/**
 * BitCore Header-Right Styles (v489)
 * ====================================
 * 우측 헤더 6개 아이콘 드롭다운 스타일 (Image 1 게이트 스타일 기반)
 *
 * 기존 home.html .user-menu / .user-chip / .hdr-icon-btn / .header-right 클래스는 그대로 유지
 * (페이지마다 이미 정의되어 있어서) — 이 CSS 는 __v489-* 신규 클래스만 정의
 *
 * theme.css 의 button 전역 스타일 충돌 회피:
 *   - 모든 새 클래스에 __v489- 접두어 → 충돌 0
 */

/* ============================================
   icon-menu wrapper (hover 시 dropdown 표시)
   ============================================ */
.__v489-icon-menu {
  position: relative !important;
  display: inline-block !important;
  vertical-align: middle;
  /* [v489-fix] 부모 width 가 자식 (36px 아이콘) 만큼만 잡혀야 right:0 가 아이콘 우측에 정렬됨
                기존 .user-menu 가 position:relative 만 가지고 있어서 div 디폴트 block (width 100%)
                → right:0 이 .header-right 전체 우측 = 화면 우측, 드롭다운은 280px 좌측으로 펼침
                → 시각적으로 사람 아이콘과 멀리 떨어져 보이는 본질 */
}

/* hover 영역 확장 (드롭다운 사이 6px 빈 공간에서도 hover 유지) */
.__v489-icon-menu::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  height: 8px;
}

/* ============================================
   dropdown 본체 (게이트 스타일 - 어둡고 둥근 카드)
   ============================================ */
.__v489-dropdown {
  position: absolute;
  top: 100%;
  /* [v489-fix] 드롭다운 위치 — 부모 아이콘 중심 정렬 (left:50% + translateX(-50%))
                기존 right:0 은 사람 아이콘 우측에 정렬되어 280px 좌측으로 펼침 → 시각상 멀리 보임
                left:50% + transform-origin 으로 아이콘 바로 밑에서 펼쳐지게.
                단, 화면 가장자리 아이콘은 화면 밖으로 나가지 않도록 max-width 제한 + 우측 보정 */
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  margin-top: 8px;
  min-width: 280px;
  background: #181c22;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
  z-index: 9999;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  color: #eaecef;
}

.__v489-icon-menu:hover .__v489-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* [v489-fix] 우측 끝 아이콘 (Theme/Settings 등) 의 드롭다운은 화면 밖으로 안 나가도록 우측 정렬
              - icon-id=theme, icon-id=settings 는 right:0 으로 자기 우측 끝 정렬 */
.__v489-icon-menu[data-icon-id="theme"] .__v489-dropdown,
.__v489-icon-menu[data-icon-id="settings"] .__v489-dropdown,
.__v489-icon-menu[data-icon-id="rewards"] .__v489-dropdown,
.__v489-icon-menu[data-icon-id="globe"] .__v489-dropdown {
  left: auto;
  right: -10px;
  transform: translateX(0) translateY(6px);
}

.__v489-icon-menu[data-icon-id="theme"]:hover .__v489-dropdown,
.__v489-icon-menu[data-icon-id="settings"]:hover .__v489-dropdown,
.__v489-icon-menu[data-icon-id="rewards"]:hover .__v489-dropdown,
.__v489-icon-menu[data-icon-id="globe"]:hover .__v489-dropdown {
  transform: translateX(0) translateY(0);
}

/* ============================================
   사용자 정보 헤더 (사람 아이콘만)
   ============================================ */
.__v489-user-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 18px 16px;
}

.__v489-user-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.__v489-user-info {
  flex: 1;
  min-width: 0;
}

.__v489-user-email {
  font-size: 15px;
  font-weight: 700;
  color: #eaecef;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.__v489-user-uid {
  margin-top: 4px;
  font-size: 12px;
  color: #707a8a;
  font-weight: 500;
}

/* ============================================
   배지 (Regular User / Verified)
   ============================================ */
.__v489-user-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.__v489-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  background: #2a3142;
  color: #b7bdc6;
}

.__v489-badge-verified {
  background: rgba(46, 189, 133, 0.12);
  color: #2ebd85;
}

.__v489-badge-regular {
  background: #2a3142;
  color: #b7bdc6;
}

/* ============================================
   드롭다운 메뉴 항목 영역
   ============================================ */
.__v489-dd-items {
  padding: 6px 0;
}

.__v489-dd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.1s;
  font-family: inherit;
  color: #eaecef;
}

.__v489-dd-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.__v489-dd-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b7bdc6;
}

.__v489-dd-item:hover .__v489-dd-icon {
  color: #eaecef;
}

.__v489-dd-text {
  flex: 1;
  min-width: 0;
}

.__v489-dd-title {
  font-size: 14px;
  font-weight: 500;
  color: #eaecef;
  line-height: 1.3;
}

.__v489-dd-desc {
  margin-top: 2px;
  font-size: 12px;
  color: #707a8a;
  line-height: 1.3;
}

/* 배지 (Soon, Live, New 등) */
.__v489-dd-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(240, 185, 11, 0.15);
  color: #f0b90b;
  vertical-align: middle;
}

.__v489-dd-badge-gray {
  background: #2a3142;
  color: #707a8a;
}

/* 구분선 + Log Out */
.__v489-dd-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  margin-top: 6px;
  padding-top: 14px;
}

.__v489-dd-danger {
  color: #ef4b4b;
}

.__v489-dd-danger .__v489-dd-icon,
.__v489-dd-danger .__v489-dd-title {
  color: #ef4b4b;
}

.__v489-dd-danger:hover .__v489-dd-icon,
.__v489-dd-danger:hover .__v489-dd-title {
  color: #ff6b6b;
}

/* ============================================
   사람 아이콘 .user-chip 호환 (기존 home.html 스타일과 통일)
   ============================================ */
.__v489-icon-menu .user-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s;
}

.__v489-icon-menu:hover .user-chip {
  background: rgba(255, 255, 255, 0.08);
}

/* hdr-icon-btn 와 함께 쓰일 때도 hover 유지 */
.__v489-icon-menu:hover .hdr-icon-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #f0b90b;
}

/* ============================================
   [v495] theme.css 전역 button 스타일 충돌 회피 (메모리 §theme.css 충돌 주의)
   theme.css 의 `button { border:1px solid #2a2e39 !important; background:#1e232e !important;
                          border-radius:8px !important; }` 가 전역 button 모두에 적용되어
   우리 hdr-icon-btn 이 흰색 테두리 + 어두운 박스로 보이는 본질.
   → !important 로 강제 우선 적용.
   ============================================ */
button.hdr-icon-btn,
.header-right button.hdr-icon-btn,
.__v489-icon-menu button.hdr-icon-btn {
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  padding: 0 !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #eaecef !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s !important;
  outline: none !important;
  box-shadow: none !important;
}

button.hdr-icon-btn:hover,
.header-right button.hdr-icon-btn:hover,
.__v489-icon-menu:hover button.hdr-icon-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f0b90b !important;
  border: none !important;
}

/* user-chip (사람 아이콘) 도 동일 보호 — div 라서 button 충돌은 없지만 안전망 */
.user-chip,
.__v489-icon-menu .user-chip {
  background: transparent !important;
  border: none !important;
}

.__v489-icon-menu:hover .user-chip {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ============================================
   [v496] __v489-user-chip — 사람 아이콘 신규 클래스 (페이지별 .user-chip 충돌 회피)
   assets.html 등의 .user-chip 은 알약+화살표 디자인이라 우리 SVG 가 깨짐.
   → 신규 클래스로 완전 격리.
   ============================================ */
.__v489-user-chip {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  color: #eaecef !important;
  transition: background 0.15s !important;
}

.__v489-user-chip::after {
  /* assets.html 의 .user-chip::after 화살표 강제 제거 */
  content: none !important;
  display: none !important;
}

.__v489-user-chip svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
}

.__v489-icon-menu:hover .__v489-user-chip {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* btn-text / btn-primary (Log in / Sign up — 비로그인 시) — 차트창 .ab-login/.ab-signup 과 통일.
   theme.css 가 background:#1e232e !important 강제했지만 이건 정상이라 그대로.
   [v513] padding/font-size 명시 — theme.css 전역 button 충돌로 차트창에서 버튼이 작아지는 회귀 처방. */
.header-right button.btn-text {
  background: #2b3139 !important;
  border: 1px solid #474d57 !important;
  border-radius: 4px !important;
  padding: 5px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #eaecef !important;
  font-family: 'Inter','Segoe UI',system-ui,sans-serif !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
}
.header-right button.btn-primary {
  background: #f0b90b !important;
  border: none !important;
  border-radius: 4px !important;
  color: #000 !important;
  padding: 5px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: 'Inter','Segoe UI',system-ui,sans-serif !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
}

/* ============================================
   [v497] .header-right gap 통일 (페이지별 inline style 충돌 회피)
   본질: home.html 은 gap:4px 정상이지만 assets/identification/security 등 7개 페이지는
        inline style 에서 gap:16px 정의되어 우리 6개 아이콘 사이가 넓어짐.
   처방: 강제 gap:4px 통일 → 모든 페이지에서 home.html 과 동일한 간격
   ============================================ */
.header-right {
  gap: 4px !important;
}

/* ============================================
   [v502] 페이지 초기 로드 시 깜빡임 방지 (anti-FOUC).
   본질: 페이지 inline JS 가 헤더 아이콘 5~6개 먼저 그리고 → 우리 renderer 가 덮어쓰는데
        그 사이 ~50ms 동안 톱니 등 인라인 아이콘이 잠깐 보였다 사라짐 = 깜빡임.
   처방: CSS 가 head 에서 <link> 로 먼저 로드되므로, 페이지 inline 헤더 영역 자체를
        opacity:0 로 시작 → renderer 가 그린 후 우리 wrapper 에서만 opacity:1.

   범위:
     - .__v489-icon-menu / .__v489-user-chip / .hdr-icon-btn (renderer 가 만드는 요소) → 항상 visible
     - 그 외 #__headerIconBar 자체는 visible 유지 (auth-ui 등 다른 시스템 의존),
       단 그 안의 직접 자식 button.__hdr-icon-btn 은 처음 hidden (renderer 의 _ensureHeaderRightHost 가
       __headerIconBar 통째로 display:none 처리할 때까지 안 보이도록).
   ============================================ */

/* __headerIconBar 안의 인라인 버튼/wrap 들 — 처음에는 invisible (renderer 가 처리 후 결정).
   __headerIconBar 자체에 .__v489-hidden 클래스 부여되면 (renderer 가 처리 후) 완전히 가려짐. */
#__headerIconBar > button.__hdr-icon-btn,
#__headerIconBar > #__authWrap {
  visibility: hidden !important;
}

/* renderer 가 처리 끝나면 __headerIconBar 에 display:none 들어감. 그 후엔 위 hidden 무관. */
#__headerIconBar.__v489-claimed {
  display: none !important;
}

/* [v502] headerRight 가 이미 있는 페이지 (home/assets/identification/price/security 등) 도
   inline JS 가 그린 6개 버튼이 우리 renderer 덮어쓰기 전 깜빡임 가능.
   → __v489-icon-menu wrapper 가 아닌 직접 자식 button 은 처음부터 invisible.
   renderer 가 innerHTML 덮어쓰면 이 자식들 사라지고 새 wrapper 가 채워지므로 깜빡임 0. */
#headerRight > button.hdr-icon-btn,
#headerRight > .user-menu:not(.__v489-icon-menu),
#headerRight > .user-chip,
#headerRight > #__authWrap {
  visibility: hidden !important;
}

/* renderer 가 이미 채워둔 #headerRight 안의 우리 wrapper 들은 항상 visible */
#headerRight .__v489-icon-menu,
#headerRight .__v489-icon-menu .hdr-icon-btn,
#headerRight .__v489-icon-menu .__v489-user-chip,
#headerRight .__v489-toggle,
#headerRight .__v489-toggle .hdr-icon-btn {
  visibility: visible !important;
}
/* [v591] 통합 globe 배지 (Currency · Language 함께 표시)
   본질: 이전 v499/v500 두 배지가 같은 위치 (bottom-right) 에서 충돌
         → v591 단일 배지에 둘 다 표시 (Binance 표준 패턴) */
.__v591-globe-badge {
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  background: #f0b90b !important;
  color: #000 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  padding: 1px 4px !important;
  border-radius: 4px !important;
  line-height: 1.2 !important;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

.__v489-currency-badge {
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  background: #f0b90b !important;
  color: #000 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  padding: 1px 4px !important;
  border-radius: 4px !important;
  line-height: 1.2 !important;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
  pointer-events: none !important;
}

/* [v500] globe 아이콘 옆 현재 언어 코드 배지 (English 외 언어 선택 시).
   Currency 가 USD 디폴트일 때만 표시 (Currency 배지 우선). */
.__v489-language-badge {
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  background: #2962ff !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  padding: 1px 4px !important;
  border-radius: 4px !important;
  line-height: 1.2 !important;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
  pointer-events: none !important;
}

/* globe 아이콘 button 에 position:relative 강제 (배지 absolute 기준점) */
.__v489-icon-menu[data-icon-id="globe"] .hdr-icon-btn {
  position: relative !important;
}

/* ─────────────────────────────────────────────────
   §v1319 헤더 .btn-text 라이트 처방 (사용자 회귀 보고)
   §본질: line 363-373 .header-right button.btn-text 다크 박힘
          background:#2b3139 / border:#474d57 / color:#eaecef 모두 !important
   §사용자 보고: "상단 로그인 박스 작은거는 아직 너무 껌정입니다 ㅠ.ㅠ 왜 이렇죠 이게"
   §회귀 진단: v1318 FOUC 처방으로 html.bc-light 는 적용됐으나, 
              shared/header-right-styles.css 가 진짜 본질이라 별도 처방 필요
   §처방: html.bc-light 분기 override (!important 동급, cascade 나중 로드 이김)
   §의미 색 보존: .btn-primary #f0b90b (Sign up 노란) 처방 0건
   ───────────────────────────────────────────────── */

html.bc-light .header-right button.btn-text {
  background: #f5f5f5 !important;     /* panel2 회색 (찐한 검정 → 옅은 회색) */
  border: 1px solid #e6e8eb !important; /* line2 */
  color: #1e2329 !important;           /* text 검정 */
}
html.bc-light .header-right button.btn-text:hover {
  background: #cdd2d8 !important;       /* §v1321 사용자 명시: 긴 로긴박스 호버와 동일 색 (.oa-log/__p3810_relogin_btn 호버와 통일) */
  border-color: #b7bdc6 !important;     /* §v1321 정정: 노란 테두리 제거 (사용자 명시 "노란 테두리 제거"), 긴 박스 호버 보더와 통일 */
  color: #1e2329 !important;            /* §v1321 정정: 검정 글자 유지 (노란 글자 제거) */
}

/* .header-right button.btn-primary 노란 의미 색 보존 - 처방 0건 */