/* 공통 사이트 헤더 */
.site-header {
  position: var(--site-header-position, sticky);
  top: var(--site-header-top, 0);
  left: var(--site-header-left, auto);
  right: var(--site-header-right, auto);
  z-index: var(--site-header-z, 40);
  display: flex;
  align-items: var(--site-header-align, center);
  justify-content: var(--site-header-justify, space-between);
  flex-direction: var(--site-header-direction, row);
  gap: var(--site-header-gap, 18px);
  padding: var(--site-header-padding, 14px 18px);
  border-bottom: var(--site-header-border-bottom, 1px solid var(--border, rgba(255, 255, 255, 0.2)));
  background: var(--site-header-background, rgba(30, 31, 34, 0.92));
  box-shadow: var(--site-header-shadow, 0 12px 30px var(--shadow, rgba(0, 0, 0, 0.25)));
  backdrop-filter: var(--site-header-backdrop-filter, blur(14px));
  pointer-events: var(--site-header-pointer-events, auto);
}

.site-logo,
.main-nav {
  pointer-events: var(--site-header-content-pointer-events, auto);
}

.site-header a {
  color: inherit;
  text-decoration: none;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--site-logo-min-height, 36px);
  color: var(--site-logo-color, var(--accent, #ffe27a));
  font-size: var(--site-logo-font-size, 16px);
  font-weight: var(--site-logo-font-weight, 900);
  letter-spacing: var(--site-logo-letter-spacing, 0);
  text-shadow: var(--site-logo-text-shadow, none);
  white-space: var(--site-logo-white-space, nowrap);
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: var(--main-nav-justify, flex-end);
  flex-wrap: var(--main-nav-flex-wrap, wrap);
  gap: var(--main-nav-gap, 8px);
  min-width: 0;
}

.nav-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--nav-item-min-height, 36px);
  padding: var(--nav-item-padding, 0 12px);
  border: 1px solid var(--nav-item-border-color, var(--border, rgba(255, 255, 255, 0.2)));
  border-radius: 999px;
  background: var(--nav-item-background, var(--panel-alt, rgba(255, 255, 255, 0.1)));
  box-shadow: var(--nav-item-box-shadow, none);
  backdrop-filter: var(--nav-item-backdrop-filter, none);
  color: var(--nav-item-color, var(--fg, #ffffff));
  font-size: var(--nav-item-font-size, 13px);
  font-weight: var(--nav-item-font-weight, 700);
  line-height: 1.2;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.nav-item[href]:hover,
.nav-item[href]:focus-visible {
  border-color: var(--nav-item-hover-border-color, var(--accent, #ffe27a));
  background: var(--nav-item-hover-background, rgba(255, 255, 255, 0.16));
  transform: translateY(-1px);
  outline: none;
}

.nav-item.is-active {
  border-color: var(--nav-item-active-border-color, var(--accent, #ffe27a));
  background: var(--nav-item-active-background, rgba(255, 255, 255, 0.16));
  color: var(--nav-item-active-color, #ffffff);
}

.nav-item.is-disabled {
  color: var(--nav-item-disabled-color, rgba(255, 255, 255, 0.6));
  cursor: default;
  opacity: var(--nav-item-disabled-opacity, 1);
}

@media (max-width: 760px) {
  .site-header {
    position: var(--site-header-mobile-position, var(--site-header-position, sticky));
    align-items: var(--site-header-mobile-align, var(--site-header-align, center));
    flex-direction: var(--site-header-mobile-direction, var(--site-header-direction, row));
    gap: var(--site-header-mobile-gap, var(--site-header-gap, 18px));
    padding: var(--site-header-mobile-padding, var(--site-header-padding, 14px 18px));
  }

  .main-nav {
    justify-content: var(--main-nav-mobile-justify, flex-start);
    flex-wrap: var(--main-nav-mobile-flex-wrap, wrap);
    width: var(--main-nav-mobile-width, 100%);
  }

  .nav-item {
    min-height: var(--nav-item-mobile-min-height, var(--nav-item-min-height, 36px));
    padding: var(--nav-item-mobile-padding, var(--nav-item-padding, 0 12px));
    font-size: var(--nav-item-mobile-font-size, var(--nav-item-font-size, 13px));
  }
}