.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid #24283a;
  background: #090a0ff5;
  backdrop-filter: blur(14px);
}
.site-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  max-width: 1280px;
  min-height: 66px;
  margin-inline: auto;
  padding: 9px 16px;
}
.site-header-inner > a { flex: none; white-space: nowrap; }
.site-header-inner > .site-language { flex: none; margin-left: auto; }
.site-header .site-nav {
  display: grid;
  flex: 0 0 100%;
  width: 100%;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 3px;
  margin-left: 0;
  font-size: .84rem;
  font-weight: 700;
  color: #d4d1de;
}
.site-nav a {
  display: block;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.site-nav a:hover { background: #181522; color: #eee0ff; }
.site-nav a[aria-current="page"] {
  border-color: #7344a2;
  background: #2b153f;
  color: #e0baff;
}
.site-nav a:focus-visible { outline: 2px solid #d7b3ff; outline-offset: -2px; }
html:not([lang="en"]) .site-nav [lang="en"],
html[lang="en"] .site-nav [lang="ko"] { display: none; }
@media (max-width: 1100px) {
  .site-header { position: static; }
  .site-header-inner { gap: 6px 12px; }
  .site-header .site-nav {
    flex: 0 0 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .site-header .site-nav a:last-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .site-header .site-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); font-size: .76rem; }
  .site-nav a { padding-inline: 3px; }
}