:root {
  --nd-body-bg: #ececec;
  --nd-body-bg-rgb: 236, 236, 236;
  --nd-user-header-zindex: 50;
  --nd-user-header-margin-bottom: 2rem;
  --wrap-gutter-x: 3.75rem;
  --wrap-bg: var(--nd-white, #fff);
}

.user-wrap {
  width: calc(var(--nd-index-width) + var(--wrap-gutter-x));
  margin-top: 1.25rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: calc(var(--wrap-gutter-x) * 0.5);
  padding-right: calc(var(--wrap-gutter-x) * 0.5);
  background-color: var(--wrap-bg);
}
.user-wrap::before {
  content: "";
  display: block;
  overflow: hidden;
  width: auto;
  height: 9px;
  margin-right: calc(var(--wrap-gutter-x) * -0.5);
  margin-left: calc(var(--wrap-gutter-x) * -0.5);
  background: repeat-x var(--nd-body-bg) url("data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAJCAYAAAAGuM1UAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDkuMS1jMDAyIDc5LmExY2QxMmY0MSwgMjAyNC8xMS8wOC0xNjowOToyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI2LjIgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJBNDQyQTZDRDI1MzExRUY4Njk3OEIzODQ1RUY0Qjk1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJBNDQyQTZERDI1MzExRUY4Njk3OEIzODQ1RUY0Qjk1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkE0NDJBNkFEMjUzMTFFRjg2OTc4QjM4NDVFRjRCOTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkE0NDJBNkJEMjUzMTFFRjg2OTc4QjM4NDVFRjRCOTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4NL8dsAAAAiklEQVR42pSOXQqEIBSFb2MtYIY2ErSfgVlZsx+h9uCjD/ks6s0T/UySMX1wQL3fwVsQUUE3eJw9MvMbuSptsdY2UR4RnNP5oWCMeUax551eKfWKM7FkLqwX4b3vOAFvvw4KJRK//3AGzFYPhUpr3S575xjhwCUpZZ3sfUoIYYBLzrkv/wncSYABAHpa4QHQWuGIAAAAAElFTkSuQmCC");
}

.user-header {
  /* logo */
  --logo-width: 13.5rem;
  /* gnb */
  --nd-account-margin: 0 0 0.75rem;
  --nd-account-font-size: 0.875rem;
  --nd-account-color: var(--nd-secondary, #6c757d);
  --nd-account-hover-color: var(--nd-body-color, #000);
  --nd-account-item-padding-x: 0.875rem;
  --nd-account-divider: normal;
  /* menu */
  --nd-menu-font-size: 1.0625rem;
  --nd-menu-font-weight: 400;
  --nd-menu-font-size: 1.0625rem;
  --nd-menu-link-padding-x: 1rem;
  --nd-menu-link-padding-y: calc(var(--nd-menu-link-padding-x) + 1px);
  --nd-menu-link-hover-color: var(--nd-body-color, #000);
  --nd-menu-link-active-color: var(--nd-menu-link-hover-color);
  --nd-menu-link-current-color: var(--nd-menu-link-hover-color);
  --menu-link-icon-height: 6px;
  /* submenu */
  --nd-menu-sub-width: max-content;
  --nd-menu-sub-text-align: center;
  --nd-menu-sub-offset-y: calc(100% + 1px);
  --nd-menu-sub-link-padding-y: 0.4375rem;
  --nd-menu-sub-font-size: 0.9375rem;
  --nd-menu-sub-link-color: var(--nd-gray-700, #495057);
  --nd-menu-sub-link-hover-color: var(--nd-body-color, #000);
  --nd-menu-sub-link-active-color: var(--nd-menu-sub-link-hover-color);
  /* menu button */
  --menu-btn-width: 2.5rem;
  --menu-btn-height: var(--menu-btn-width);
  --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-body-color, #000);
  --nd-menu-btn-bg: var(--nd-body-bg);
  --nd-menu-btn-border-radius: 50%;
  --nd-menu-btn-hover-color: var(--nd-menu-btn-color);
  --nd-menu-btn-hover-bg: #d4d4d4;
  --nd-menu-btn-active-color: var(--nd-menu-btn-hover-color);
  --nd-menu-btn-active-bg: var(--nd-menu-btn-hover-bg);
  /* search */
  --nd-search-width: 13.75rem;
  --nd-search-height: var(--menu-btn-height);
  --nd-search-bg: var(--nd-menu-btn-bg);
  --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-bg: var(--nd-search-bg);
  --nd-search-focus-border-color: var(--nd-secondary, #6c757d);
  --nd-search-placeholder: rgba(var(--nd-black-rgb, 0, 0, 0), 0.25);
  --nd-search-offset-x: calc(-1 * var(--nd-search-border-width));
  /* search button */
  --nd-search-btn-padding-x: var(--nd-menu-btn-padding-x);
  --nd-search-btn-font-size: var(--nd-menu-btn-font-size);
  --nd-search-btn-color: var(--nd-menu-btn-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-btn-color);
  --nd-search-btn-active-bg: var(--nd-search-focus-bg);
  --nd-search-btn-active-border-color: var(--nd-search-focus-border-color);
  /* search action button */
  --nd-search-action-width: var(--menu-btn-width);
  --nd-search-action-height: var(--menu-btn-height);
  --nd-search-action-padding-x: var(--nd-menu-btn-padding-x);
  --nd-search-action-padding-y: var(--nd-menu-btn-padding-y);
  --nd-search-action-font-size: var(--nd-menu-btn-font-size);
  --nd-search-action-color: var(--nd-menu-btn-color);
  --nd-search-action-bg: var(--nd-menu-btn-bg);
  --nd-search-action-border-radius: var(--nd-menu-btn-border-radius);
  --nd-search-action-hover-color: var(--nd-menu-btn-hover-color);
  --nd-search-action-hover-bg: var(--nd-menu-btn-hover-bg);
  --nd-search-action-active-color: var(--nd-search-action-hover-color);
  --nd-search-action-active-bg: var(--nd-search-action-hover-bg);
  align-items: flex-end;
  margin-top: var(--nd-user-header-margin-bottom);
  border-bottom: 1px solid var(--nd-gray-300, #d2d2d4);
}
.gl-nav, .gl-gnb, .user-header {
  display: flex;
  flex-wrap: wrap;
}

.gl-logo {
  flex: 0 0 auto;
  width: var(--logo-width);
  max-width: 100%;
  margin-bottom: var(--nd-menu-link-padding-y);
}

.gl-gnb {
  align-items: center;
}

.gl-nav {
  align-items: center;
  gap: 1.5rem;
}
.gl-nav-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: calc(100% - var(--logo-width));
  margin-left: auto;
}

.gl-menu {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
}
.gl-menu-link {
  isolation: isolate;
  margin-top: -1px;
  margin-bottom: -1px;
}
.gl-menu-link::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  bottom: calc(var(--nd-menu-link-padding-y) + var(--menu-link-icon-height) * 0.5);
  left: var(--nd-menu-link-padding-x);
  right: var(--nd-menu-link-padding-x);
  height: var(--menu-link-icon-height);
  transition: opacity 0.15s ease-in-out;
  /* background-color: rgba(var(--nd-primary-rgb, 0, 122, 255), 0.2); */
}
.gl-menu-item:not(.active) > .gl-menu-link::after {
  opacity: 0;
}
.gl-menu-sub.gl-menu-vert {
  --nd-menu-sub-bg: var(--nd-body-bg, #fff);
  --nd-menu-sub-border: 0;
}
.gl-menu-btn {
  width: var(--menu-btn-width);
  height: var(--menu-btn-height);
}