/* ============================================
   로그인 후 Header — Figma 스펙 100% 적용
   ============================================ */

/* 1. 아바타 (금 뱃지) */
.hdr-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.hdr-avatar-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.hdr-avatar-initial {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f4c542, #c87d00);
  color: #000;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 2. 닉네임 */
.hdr-nickname {
  color: #FFF;
  font-family: 'Pretendard', sans-serif;
  font-size: 15px;
  font-weight: 400;
  text-decoration-line: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
  cursor: pointer;
  margin-right: 4px;
  /* 간격 축소 */
}

/* 3. 코인 아이콘 */
.hdr-coin-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
}

.hdr-coin-icon {
  width: 24px;
  height: 24px;
}

/* 4. 잔액 */
.hdr-balance {
  color: #FFF;
  font-family: 'Pretendard', sans-serif;
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
  margin-left: 4px;
  margin-right: 8px;
}

/* 5. 알림 벨 (원형 버튼) */
.hdr-btn-bell {
  position: relative;
  display: flex;
  width: 44px;
  height: 44px;
  justify-content: center;
  align-items: center;
  background: #E8E8E8;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.2s;
}

.hdr-btn-bell:hover {
  background: #D0D0D0;
}

.hdr-btn-bell img {
  width: 24px !important;
  height: 24px !important;
}

.hdr-bell-dot {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF3B3B;
  /* border: 2px solid #E8E8E8; */
}

/* 6. 텔레그램 (원형 이미지) */
.hdr-btn-telegram {
  display: flex;
  width: 44px;
  height: 44px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.hdr-btn-telegram img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50%;
}

/* 7. 로그아웃 버튼 (캡슐형 아웃라인) */
.hdr-btn-logout {
  display: flex;
  width: 64px;
  height: 40px;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 40px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
  padding: 0;
}

.hdr-btn-logout:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #FFF;
}

.hdr-btn-logout img {
  width: 20px !important;
  height: 20px !important;
}

/* 8. 언어 설정 미세조정 */
.lang-dropdown-wrapper {
  margin-left: 4px;
}