/* Hybnomic site header (2026-10-28): one header for every page — the landing, the credit engine, market
   insights and the brand page use this file and the same markup:

   <header class="site-header [is-fixed | is-sticky]">
     <div class="site-header-in">
       <a class="site-brand" href="https://www.hybnomic.com/" aria-label="하이브노믹 홈">
         <img class="site-logo" src="…/hybnomic-logo.svg" alt="Hybnomic" width="190" height="31" />
         <img class="site-logo is-dark" src="…/hybnomic-logo-white.svg" alt="" width="190" height="31" /></a>
       <nav class="site-nav" aria-label="메인 메뉴">
         <a class="site-nav-link" href="https://credit.hybnomic.com/">크레딧 엔진</a>
         <a class="site-nav-link" href="https://www.hybnomic.com/insights/">마켓 인사이트</a></nav>
       <button type="button" class="site-nav-link site-lang">[globe in .site-lang-icon] EN</button>
     </div>
   </header>

   Uniswap-like: the page links follow the logo as plain words (no pills, no underline), the current one
   (aria-current="page") in the text colour; the language alone at the far right. Transparent at the top
   of the page (the page shows through); once the page scrolls, a frosted bar and the hairline under it
   fade in so the content passing beneath stays out of the way. Browsers without scroll-driven animation
   keep the frosted bar from the start. It stays at
   the top on every page: is-fixed (the landing) or is-sticky (the engine, market insights, the brand
   page). What changes from page to page sits under it (market insights' section bar, at
   --site-header-h). Light and dark from the tokens; the white logo in dark.
   The same file is copied to credit-engine/public/assets/site-header.css — keep the two identical. */

/* The header's height, for anything a page pins under it (market insights' section bar) */
html:root {
  --site-header-h: calc(80px + env(safe-area-inset-top));
}
@media (max-width: 700px) {
  html:root {
    --site-header-h: calc(96px + var(--stroke-width-hairline) + env(safe-area-inset-top)); /* two rows + the hairline */
  }
}
html:root body .site-header {
  --site-nav-size: var(--text-subhead-size);
  position: relative;
  z-index: 50;
  padding-top: env(safe-area-inset-top);
  background: var(--material-bar);
  -webkit-backdrop-filter: var(--blur-bar);
  backdrop-filter: var(--blur-bar);
  border-bottom: var(--stroke-width-hairline) solid transparent;
}
/* the same 15 px on every page: compact pages set body to what the others call subhead */
html:root[data-density="compact"] body .site-header {
  --site-nav-size: var(--text-body-size);
}
html:root body .site-header.is-fixed {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
}
html:root body .site-header.is-sticky {
  position: sticky;
  top: 0;
}
@supports (animation-timeline: scroll()) {
  html:root body .site-header {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    animation: site-header-bar linear both;
    animation-timeline: scroll(root);
    animation-range: 0 24px;
  }
}
@keyframes site-header-bar {
  to {
    background-color: var(--material-bar);
    -webkit-backdrop-filter: var(--blur-bar);
    backdrop-filter: var(--blur-bar);
    border-bottom-color: var(--stroke-separator);
  }
}
html:root body .site-header-in {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: calc(80px - var(--stroke-width-hairline));
  padding: 0 max(clamp(20px, 4vw, 48px), calc((100% - 1200px) / 2));
}
html:root body .site-brand {
  display: flex;
  align-items: center;
  margin-right: var(--space-24);
}
html:root body .site-logo {
  display: block;
  width: auto;
  height: 26px;
}
html:root body .site-logo.is-dark {
  display: none;
}
html:root[data-theme="dark"] body .site-logo:not(.is-dark) {
  display: none;
}
html:root[data-theme="dark"] body .site-logo.is-dark {
  display: block;
}
@media (prefers-color-scheme: dark) {
  html:root:not([data-theme="light"]) body .site-logo:not(.is-dark) {
    display: none;
  }
  html:root:not([data-theme="light"]) body .site-logo.is-dark {
    display: block;
  }
}
html:root body .site-nav {
  display: flex;
  gap: var(--space-4);
  margin-right: auto;
}
html:root body .site-nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--control-m);
  padding: 0 var(--space-12);
  border: 0;
  border-radius: var(--radius-m);
  background: none;
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: var(--site-nav-size);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color 150ms ease, transform var(--motion-press) cubic-bezier(0.17, 0.67, 0.45, 1);
}
html:root body .site-nav-link:hover,
html:root body .site-nav-link[aria-current="page"] {
  color: var(--text-primary);
}
html:root body .site-nav-link:active {
  transform: scale(var(--state-press-scale));
}
html:root body .site-lang {
  margin-left: var(--space-12);
}
html:root body .site-lang-icon {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
}
html:root body .site-lang-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
html:root body .site-brand:focus-visible,
html:root body .site-nav-link:focus-visible {
  outline: var(--stroke-width-focus) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-m);
}
/* Phones: two rows. Row 1 the logo and the language, row 2 the page links as plain words starting on
   the logo's left edge. 52 + 44 = 96. */
@media (max-width: 700px) {
  html:root body .site-header-in {
    flex-wrap: wrap;
    row-gap: 0;
    height: auto;
    padding: 0 var(--space-16);
  }
  html:root body .site-brand {
    height: 52px;
    margin-right: auto;
  }
  html:root body .site-logo {
    height: 22px;
  }
  html:root body .site-nav {
    order: 3;
    width: 100%;
    gap: var(--space-24);
  }
  html:root body .site-nav .site-nav-link {
    padding: 0;
    border-radius: 0;
  }
  html:root body .site-lang {
    margin-left: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:root body .site-nav-link {
    transition: none;
  }
}