/*
[FILE]
c:/dolcu/hub/main/modules/hub_header/hub_header.css

[ROLE]
허브 헤더 통합 스타일 (최종)
- 배경: 보라빛 광원 → 검정으로 자연 감쇠 (100 → 0 체감)
- 좌: 로고 / 중(가변): identity / 우: 내지갑

[FUTURE NOTES]
1. 헤더 배경은 이미지 사용 없이 CSS 유지
2. identity는 중앙 슬롯 내 우측 정렬 + 세로 스택
*/


/* ================================
   hub_header 모듈 공통 스타일
================================ */

.hub-header {
  width: 100%;
  height: 57px;
  margin-bottom: 0px;
  color: #ffffff;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%), /* 상단 검정 */
    linear-gradient(to top, #3c155a 0%, rgba(20, 1, 32, 0) 100%);          /* 하단 짙은보라 */
}


.hub-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 1.0;
}


/* ===============================
   좌측: 로고
=============================== */
.hub-header-logo {
  flex: 0 0 auto;
}

.hub-header-logo .logo-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 7PX;
  color: #ffffff;
}

.hub-header-logo .logo-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
}


/* ===============================
   중앙: 사용자 상태 / 로그인
   - 중앙 슬롯 내부 우측 정렬
   - 세로 스택 (상태 → 버튼/서브텍스트)
=============================== */
.hub-header-identity {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-right: 5px;
  gap: 4px;
  text-align: right;
}

.hub-header-identity .hub-user-main {
  font-size: 12px;
  font-weight: 700;
  margin-top: 14px;
  /* letter-spacing: 0.3px; */
}

/* USER일 때만 나오는 문구 */
.hub-header-identity .hub-user-sub {
  /* padding-bottom: 20px; */
  font-size: 11px;
  color:  #ffffff;
}


/* GUEST일 때만 나오는 문구 */
.hub-header-identity[data-user="guest"] .hub-user-main {
  margin-top: 0px;
  padding-right: 5px;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  color: #ffffff;
  opacity: 0.85;
}


/* GUEST일 때만 나오는 로그인 버튼 */
.hub-header-identity .hub-login-btn {
  /* height: 5px;                          원하는 높이 값 설정  */
  font-size: 12px;
  padding: 2px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgb(222, 191, 13);
  color: #ffffff;
  cursor: pointer;
}


.hub-header-identity .hub-login-btn:active {
  background: rgba(255, 255, 255, 0.18);
}


/* ===============================
   우측: 내지갑
=============================== */
.hub-header-wallet {
  flex: 0 0 auto;
}

/* ===============================
   우측: 내지갑 버튼 (강조)
=============================== */
.hub-header-wallet button {
  width: 50px;                     /* 원하는 너비 */
  height: 60px;                     /* 원하는 높이 */    
  margin-top: -1px;             
  /* padding: 10px;  
                     기본 패딩 제거 */
  border: none;                     /* 테두리 제거 */
  background-color: transparent;    /* 배경색 설정-투명 */
  cursor: pointer;                  /* 마우스 커서 변경 */
  transform: translateY(-5px);


  /* 지갑 아이콘 배경 */
  background-image: url("/assets/img/icon_wallet_01.png");
  background-repeat: no-repeat;
  background-position-x: left;
  background-position-y: bottom;
  background-size: 50px 40px;

  cursor: pointer;
}

.hub-header-wallet button:active {
  background-color: #111111;
}