/* 사용 페이지 공용 상단 헤더 스타일 (템플릿: templates/core/_site_header.html)
   랜딩 상단 네비(landing.css `.nav`)와 같은 인상을 주되, main.css 와 함께 로드돼도
   흔들리지 않도록 자체 완결형으로 작성한다. */
.site-header {
  background: #ffffff;
  border-bottom: 1px solid #e4e8ee;
  font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

.site-header-inner {
  /* 본문(body --site-width 1180px)과 좌우 끝이 맞도록 좌우 여백만큼 더 넓게 잡는다. */
  max-width: 1228px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-brand {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: #42387b;
}

.site-brand em {
  font-style: normal;
  color: #008acb;
}

.site-brand:hover {
  text-decoration: none;
  color: #42387b;
}

/* 랜딩 히어로의 eyebrow 배지와 같은 라운드 태그 — 서비스 한 줄 설명. */
.site-tagline {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 700;
  color: #2b5fe3;
  background: #eef3fe;
  border: 1px solid #d8e3fc;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

.site-nav a {
  text-decoration: none;
  color: #4a5262;
  font-size: 15px;
  font-weight: 600;
}

.site-nav a:hover {
  color: #2b5fe3;
  text-decoration: none;
}

/* 태그는 좁은 화면에서 가장 먼저 접는다 — 메뉴가 밀려 줄바꿈되는 편이 더 나쁘다. */
@media (max-width: 1000px) {
  .site-tagline {
    display: none;
  }
}