/* =============================================
   01_header / header.css
   루미크리스탈 헤더
   ============================================= */

@import '../00_shared/variables.css';

/* ===== 헤더 전체 ===== */

header {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 100;

  background: rgba(6, 20, 46, 0.92);
  backdrop-filter: blur(10px);

  border-bottom: none;
}

/* ===== 내부 정렬 ===== */

.header-inner {
  max-width: var(--max-width);
  height: 96px;

  margin: 0 auto;
  padding: 0 40px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ===== 로고 ===== */

.logo {
  display: flex;
  align-items: center;

  text-decoration: none;
}

/* 실제 로고 이미지 */

.logo-image{
  height:72px;
  width:auto;
  display:block;
}
/* ===== 우측 상단 배지 ===== */

.header-badges{
display:flex;
align-items:center;
gap:26px;
}

.header-badges > span,
.header-badges > a{
font-size:0.83rem;
letter-spacing:0.2px;

opacity:0.78;

text-decoration:none;
color:rgba(255,255,255,0.88);

transition:
color 0.28s ease,
opacity 0.28s ease;
}

.header-badges > a:hover{
color:var(--gold);
opacity:1;
}
/* 배지 앞 금색 아이콘 */

.header-badges span::before {
  content: '✦ ';
  color: var(--gold);
  font-size: 0.6rem;
}

/* ===== 마우스 올렸을 때 ===== */

.header-badges span,
.header-badges a {
  text-decoration: none;
  transition: all 0.3s ease;
  color: inherit; /* 부모인 header-badges의 색상을 따라감 */
  display: inline-flex;
  align-items: center;
}

/* 2. 링크(a)에 마우스 올렸을 때: 금색으로 조용한 변화 */
.header-badges a:hover span {
  color: var(--gold);
  transform: translateY(-1px); /* 기존에 있던 살짝 올라가는 효과 유지 */
}

/* 3. 일반 텍스트(span)에 마우스 올렸을 때: 흰색으로 강조 (기존 유지 원할 시) */
.header-badges span:hover {
  color: #ffffff;
}
/* ===== 모바일 ===== */

@media (max-width: 768px) {

  .header-inner {
    height: 72px;
    padding: 0 20px;
  }

  .logo-image {
    height: 42px;
  }

  .header-badges {
    display: none;
  }

}

/* 로고 이미지 강제 크기 보정 */
.logo {
  display: flex;
  align-items: center;
  width: 260px;
  height: 72px;
  overflow: visible;
}

.logo-image {
  width: 220px !important;
  height: auto !important;
  max-height: 72px !important;
  object-fit: contain;
  display: block;
}