/* ===== COMPONENTS STYLES ===== */
/**
 * @file: layout/header.css
 * @description: 사용자 인터페이스 관련 스타일
 * @components: 로그인 버튼, 사용자 메뉴, 액션 버튼
 * @usage: 사용자 관련 UI 요소 스타일링
 */
.user-actions {
  display: flex;
  align-items: center;
  margin-left: auto;
  position: relative;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  height: 40px;
  justify-content: flex-end;
  padding-right: 0; /* 오른쪽 패딩 제거 */
}

.user-actions.initialized {
  visibility: visible;
  opacity: 1;
}

/* ===== LAYOUT STYLES ===== */
/**
 * @file: layout/header.css
 * @description: 사용자 메뉴 스타일
 * @components: 사용자 메뉴
 * @usage: 사용자 메뉴 스타일링
 */
.user-menu {
  position: relative;
  padding: 6px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 오른쪽 정렬 추가 */
  gap: 8px;
  min-width: 80px;
  margin-left: auto;
}

/* ===== LAYOUT STYLES ===== */
/**
 * @file: layout/header.css
 * @description: 사용자 인터페이스 관련 스타일
 * @components: 로그인 버튼, 사용자 메뉴, 액션 버튼
 * @usage: 사용자 관련 UI 요소 스타일링
 */
 
/* 사용자 정보 영역 스타일 수정 */
.user-info-area {
  display: flex;
  align-items: center;
  padding: 0; /* 패딩 제거 */
  justify-content: flex-end;
  width: 100%;
  gap: 4px;
}

/* ===== LAYOUT STYLES ===== */
/**
 * @file: layout/header.css
 * @description: 사용자 정보 스타일
 * @components: 사용자 정보 컨테이너
 * @usage: 사용자 정보 컨테이너 스타일링
 */
.user-info {
  width: 1px;
  height: 20px;
  background-color: #e0e0e0;
  margin: 0 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}

/* ===== LAYOUT STYLES ===== */
/**
 * @file: layout/header.css
 * @description: 프로필 영역 스타일
 * @components: 프로필 영역
 * @usage: 프로필 영역 스타일링
 */
.profile-area {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}