/**
 * 서북 플랫폼 공용 통합 헤더 스타일
 *  - 모든 사용자 페이지 공통 단일 헤더
 *  - 다크 테마 · 스크롤 고정 없음(static) — 사용자가 스크롤하면 같이 올라감
 */
#sbnPlatformHeader {
  background: #0a0e1a !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  /* position:static — 스크롤과 함께 위로 올라감. sticky/fixed 절대 불가. */
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  /* 드롭다운 메뉴는 .sph-user-dd(relative) 기준으로 absolute 되므로 헤더 z-index 불필요 */
  /* 루트 index.html 의 header 전역 스타일(backdrop-filter, 반투명 배경) 무효화 */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,"Noto Sans KR","Malgun Gothic",sans-serif;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* 헤더 내부 auth 영역 — 절대 sticky/fixed 되지 않도록 방어 */
#sbnPlatformHeader .sph-auth,
#sbnPlatformHeader #sbnAuthMount,
#sbnPlatformHeader #authArea,
#sbnPlatformHeader .authArea {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
}
#sbnPlatformHeader * { box-sizing: border-box; }
#sbnPlatformHeader a { text-decoration: none; color: inherit; }

#sbnPlatformHeader .sph-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 6px 24px; /* 세로 패딩 10px → 6px (20% ↓) */
  display: flex; align-items: center; gap: 18px;
}

#sbnPlatformHeader .sph-brand {
  display: flex; align-items: center; gap: 10px;
  color: #fff; font-weight: 700; flex-shrink: 0;
}
#sbnPlatformHeader .sph-logo {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 6px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  font-size: 10px; font-weight: 800; color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
  letter-spacing: -.02em;
}
#sbnPlatformHeader .sph-name { font-size: 13px; letter-spacing: -.01em; }

#sbnPlatformHeader .sph-divider {
  width: 1px; height: 18px; background: rgba(255,255,255,.1);
  flex-shrink: 0;
}

/* 사이트 이동 드롭다운 (<details> 기반) */
#sbnPlatformHeader .sph-site-dd {
  position: relative; flex-shrink: 0;
}
#sbnPlatformHeader .sph-site-dd summary {
  list-style: none;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
  font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px;
  transition: all .12s;
  user-select: none;
  white-space: nowrap;
}
#sbnPlatformHeader .sph-site-dd summary::-webkit-details-marker { display: none; }
#sbnPlatformHeader .sph-site-dd summary:hover { background: rgba(255,255,255,.1); }
#sbnPlatformHeader .sph-site-dd summary .sph-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sph-active-color, #94a3b8);
  box-shadow: 0 0 8px var(--sph-active-color, transparent);
  display: inline-block; flex-shrink: 0;
}
#sbnPlatformHeader .sph-site-dd summary .sph-chev {
  font-size: 9px; color: #94a3b8;
  transition: transform .15s;
  margin-left: 2px;
}
#sbnPlatformHeader .sph-site-dd[open] summary .sph-chev {
  transform: rotate(180deg);
}
#sbnPlatformHeader .sph-site-dd[open] summary {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.15);
}
#sbnPlatformHeader .sph-site-dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: #0f172a;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 6px;
  list-style: none;
  margin: 0;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
  z-index: 600;
}
#sbnPlatformHeader .sph-site-dd-menu li { margin: 0; padding: 0; }
#sbnPlatformHeader .sph-site-dd-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 7px;
  color: #cbd5e1;
  font-size: 13px; font-weight: 500;
  text-decoration: none;
  transition: background .12s;
  white-space: nowrap;
}
#sbnPlatformHeader .sph-site-dd-menu a:hover {
  background: rgba(255,255,255,.06); color: #fff;
}
#sbnPlatformHeader .sph-site-dd-menu a.active {
  color: #fff;
  background: rgba(255,255,255,.08);
  font-weight: 600;
}
#sbnPlatformHeader .sph-site-dd-menu a .sph-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--site-color, #64748b);
  flex-shrink: 0;
}
#sbnPlatformHeader .sph-site-dd-menu a.active .sph-dot {
  box-shadow: 0 0 8px var(--site-color);
}

#sbnPlatformHeader .sph-subnav {
  display: flex; gap: 2px;
  padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,.08);
  flex: 1; min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
#sbnPlatformHeader .sph-subnav::-webkit-scrollbar { height: 3px; }
#sbnPlatformHeader .sph-subnav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.1); border-radius: 999px;
}
#sbnPlatformHeader .sph-subnav a,
#sbnPlatformHeader .sph-subnav > .navLink {
  padding: 4px 10px; border-radius: 5px;
  color: #94a3b8;
  font-size: 12px; font-weight: 500;
  transition: all .12s;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex; align-items: center;
  user-select: none;
  border: none; background: transparent;
}
#sbnPlatformHeader .sph-subnav a:hover,
#sbnPlatformHeader .sph-subnav > .navLink:hover {
  background: rgba(255,255,255,.05); color: #fff;
}
#sbnPlatformHeader .sph-subnav a.current,
#sbnPlatformHeader .sph-subnav a.active,
#sbnPlatformHeader .sph-subnav > .navLink[aria-current="page"] {
  color: #fff; background: rgba(37,99,235,.18);
}

#sbnPlatformHeader .sph-spacer { flex: 1; min-width: 0; }

#sbnPlatformHeader .sph-auth {
  display: inline-flex; align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}

/* Archive 용 #authArea 사용자 드롭다운 (auth-widget 드롭다운과 동일 스타일) */
#sbnPlatformHeader .sph-user-dd {
  position: relative;
}
#sbnPlatformHeader .sph-user-dd summary {
  list-style: none;
  cursor: pointer;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
  font-size: 11px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px;
  transition: all .12s;
  user-select: none;
}
#sbnPlatformHeader .sph-user-dd summary::-webkit-details-marker { display: none; }
#sbnPlatformHeader .sph-user-dd summary:hover,
#sbnPlatformHeader .sph-user-dd[open] summary {
  background: rgba(255,255,255,.12);
}
#sbnPlatformHeader .sph-user-dd summary .authNick {
  color: #fff !important; font-weight: 600;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#sbnPlatformHeader .sph-user-dd summary .kycBadge {
  font-size: 10px !important; font-weight: 700; padding: 2px 6px; border-radius: 4px;
}
#sbnPlatformHeader .sph-user-dd summary .sph-chev {
  font-size: 9px; color: #94a3b8;
  transition: transform .15s;
}
#sbnPlatformHeader .sph-user-dd[open] summary .sph-chev {
  transform: rotate(180deg);
}
#sbnPlatformHeader .sph-user-dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: #0f172a;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 6px;
  list-style: none;
  margin: 0;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
  z-index: 600;
}
#sbnPlatformHeader .sph-user-dd-menu li { margin: 0; padding: 0; }
#sbnPlatformHeader .sph-user-dd-menu .dd-header {
  padding: 8px 12px 6px;
  font-size: 11px; color: #64748b;
}
#sbnPlatformHeader .sph-user-dd-menu .dd-email {
  color: #cbd5e1;
  font-size: 12px;
  word-break: break-all;
}
#sbnPlatformHeader .sph-user-dd-menu .dd-note {
  padding: 8px 12px;
  font-size: 12px;
  color: #f59e0b;
  font-weight: 500;
}
#sbnPlatformHeader .sph-user-dd-menu .dd-divider {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 4px 0;
}
#sbnPlatformHeader .sph-user-dd-menu .dd-item {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: #cbd5e1;
  font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background .12s;
}
#sbnPlatformHeader .sph-user-dd-menu .dd-item:hover {
  background: rgba(255,255,255,.06); color: #fff;
}
#sbnPlatformHeader .sph-user-dd-menu .dd-item.dd-danger {
  color: #fca5a5;
}
#sbnPlatformHeader .sph-user-dd-menu .dd-item.dd-danger:hover {
  background: rgba(239,68,68,.1); color: #fecaca;
}

/* auth 버튼/배지 다크 테마 오버라이드 */
#sbnPlatformHeader .sbn-btn,
#sbnPlatformHeader .authBtn {
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.1) !important;
}
#sbnPlatformHeader .sbn-btn:hover,
#sbnPlatformHeader .authBtn:hover {
  background: rgba(255,255,255,.12) !important;
}
#sbnPlatformHeader .sbn-btn.primary,
#sbnPlatformHeader .authBtn.primary {
  background: #2563eb !important;
  color: #fff !important;
  border-color: #2563eb !important;
}
#sbnPlatformHeader .sbn-btn.primary:hover,
#sbnPlatformHeader .authBtn.primary:hover {
  background: #1d4ed8 !important;
}
#sbnPlatformHeader .sbn-auth-user {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #fff !important;
}
#sbnPlatformHeader .sbn-auth-user:hover { background: rgba(255,255,255,.1) !important; }
#sbnPlatformHeader .sbn-nick,
#sbnPlatformHeader .authNick { color: #fff !important; }
#sbnPlatformHeader .sbn-caret { color: #94a3b8 !important; }
#sbnPlatformHeader .kycBadge { opacity: .95; }

/* 반응형 */
@media (max-width: 880px) {
  #sbnPlatformHeader .sph-inner { padding: 5px 12px; gap: 8px; }
  #sbnPlatformHeader .sph-name { display: none; }
  #sbnPlatformHeader .sph-divider { display: none; }
  #sbnPlatformHeader .sph-site-dd summary { padding: 4px 9px; font-size: 11px; }
  #sbnPlatformHeader .sph-subnav { padding-left: 6px; font-size: 11px; }
  #sbnPlatformHeader .sph-subnav a,
  #sbnPlatformHeader .sph-subnav > .navLink { padding: 3px 7px; font-size: 10px; }
}