:root {
  --site-bg: var(--nd-gray-200, #e8e8e9);
  --heading-bg: var(--site-bg);
  --nd-user-header-margin-bottom: 2rem;
}

.user-header {
  --user-header-bg: var(--nd-white, #fff);
  /* logo */
  --nd-logo-align: center;
  /* search */
  --nd-search-width: 15rem;
  --nd-search-height: 2.75rem;
  --nd-search-font-size: 0.875rem;
  --nd-search-color: var(--nd-body-color, #000);
  --nd-search-bg: var(--user-header-bg, #fff);
  --nd-search-border-width: 1px;
  --nd-search-border-color: var(--nd-gray-400, #ced4da);
  --nd-search-border-radius: var(--nd-border-radius-pill, 50rem);
  --nd-search-focus-color: var(--nd-search-color);
  --nd-search-focus-bg: var(--nd-search-bg);
  --nd-search-focus-border-color: var(--nd-secondary, #6c757d);
  /* search button */
  --nd-search-btn-color: var(--nd-search-color);
  --nd-search-btn-bg: var(--nd-search-bg);
  --nd-search-btn-border: var(--nd-search-border-width) solid var(--nd-search-border-color);
  --nd-search-btn-hover-color: var(--nd-search-btn-color);
  --nd-search-btn-hover-bg: var(--nd-search-btn-bg);
  --nd-search-btn-hover-border-color: var(--nd-search-border-color);
  --nd-search-btn-active-color: var(--nd-search-focus-color);
  --nd-search-btn-active-bg: var(--nd-search-focus-bg);
  --nd-search-btn-active-border-color: var(--nd-search-focus-border-color);
  /* menu */
  --nd-menu-font-size: 1.0625rem;
  --nd-menu-font-weight: 700;
  --nd-menu-link-padding-x: 1rem;
  --nd-menu-link-padding-y: var(--nd-menu-link-padding-x);
  --nd-menu-link-color: var(--nd-body-color, #000);
  /* submenu */
  --nd-menu-sub-width: max-content;
  --nd-menu-sub-font-size: 0.875rem;
  --nd-menu-sub-link-padding-x: calc(.75 * var(--nd-menu-link-padding-x));
  --nd-menu-sub-link-padding-y: 0.5rem;
  --nd-menu-sub-link-color: var(--nd-seconadry, #6c757d);
  --nd-menu-sub-link-hover-color: var(--nd-menu-link-color);
  --nd-menu-sub-link-hover-bg: var(--nd-light, #f8f9fa);
  --nd-menu-sub-link-hover-text-decoration: none;
  --nd-menu-sub-link-active-color: var(--nd-menu-sub-link-hover-color);
  --nd-menu-sub-link-active-bg: var(--nd-menu-sub-link-hover-bg);
  --nd-menu-sub-link-active-text-decoration: var(--nd-menu-sub-link-hover-text-decoration);
  /* menu button */
  --nd-menu-btn-padding-x: 0.5rem;
  --nd-menu-btn-padding-y: var(--nd-menu-btn-padding-x);
  --nd-menu-btn-font-size: 1.5rem;
  --nd-menu-btn-color: var(--nd-menu-link-color);
  --nd-menu-btn-hover-color: var(--nd-menu-btn-color);
  --nd-menu-btn-active-color: var(--nd-menu-btn-hover-color);
  /* gnb */
  --nd-gnb-padding: 0;
  --nd-gnb-font-size: 0.875rem;
  --nd-gnb-color: var(--nd-secondary, #6c757d);
  /* account */
  --nd-account-hover-color: var(--nd-body-color, #000);
  background-color: var(--user-header-bg);
}
.user-header::after {
  content: "";
  display: block;
  width: 100%;
  height: 0.875rem;
  background: 0 0 repeat-x var(--heading-bg) url("data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAYAAAAbvf3sAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDkuMS1jMDAyIDc5LmExY2QxMmY0MSwgMjAyNC8xMS8wOC0xNjowOToyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI2LjIgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY2RDUwMzJFQzhEODExRUZCMDYwRTA4MTI1NTdCREZDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjY2RDUwMzJGQzhEODExRUZCMDYwRTA4MTI1NTdCREZDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjZENTAzMkNDOEQ4MTFFRkIwNjBFMDgxMjU1N0JERkMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjZENTAzMkRDOEQ4MTFFRkIwNjBFMDgxMjU1N0JERkMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz40Q/6xAAAApElEQVR42pSS3QoCIRCFnbZttz96ytolep2eoJ5NLwQR7/TGZmIEi830wEF0zjeII0SUaNBKNKod8N7fa8NSyhutW4Se8Y+UUlfMnggY0bsSpLWeMXNEHwjYlCBjzIS1PdXZomdooOuFEB4pbK290Bk3HDkjOvQ6gwaCnHPntOcaNe6BnxYyLykNN3YLhfhj/16/u0JhDDEPQO3woOLs43O+BBgAwXqGADGDZlYAAAAASUVORK5CYII=");
  clear: both;
}
.gl-gnb, .gl-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.gl-nav {
  border-top: 1px solid var(--nd-gray-200, #e8e8e9);
}

.gl-gnb {
  gap: 1.25rem;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.gl-menu {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
}
.gl-menu-sub.gl-menu-vert {
  --nd-menu-sub-min-width: 7rem;
  --nd-menu-sub-padding-x: calc(.25 * var(--nd-menu-link-padding-x));
  --nd-menu-sub-padding-y: var(--nd-menu-sub-padding-x);
  --nd-menu-sub-bg: var(--user-header-bg);
  --nd-menu-sub-border: 1px solid rgba(var(--nd-black-rgb, 0, 0, 0), .175);
}
.gl-menu-btn {
  flex: 0 0 auto;
  width: calc(var(--nd-menu-btn-font-size) + 2 * var(--nd-menu-btn-padding-x));
  max-width: 100%;
  margin-left: calc(-1 * var(--nd-menu-btn-padding-x));
}