.l-global-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  .c-header-icon-button {
    position: relative;
  }
  .header-icon-button {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    .icon {
      fill: var(--color-surface-primary);
      width: 24px;
      height: 24px;
    }
  }
  .header-icon-badge {
    font-size: 10px;
    line-height: 1;
    font-weight: bold;
    color: var(--color-text-inverse-high);
    background: var(--color-surface-primary);
    padding-inline: var(--spacing-2);
    height: 16px;
    min-width: 16px;
    border-radius: var(--radius-round);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: calc(100% - 16px);
    top: 4px;
  }
  .c-global-header {
    background: var(--white-alpha-9);
    backdrop-filter: blur(24px);
    padding: var(--spacing-4);
    height: 64px;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    box-shadow: 0 2px 12px rgba(var(--grey-rgb), 0.05);
    .header-left,
    .header-right {
      flex: 1;
      display: flex;
      align-items: center;
      gap: var(--spacing-4);
    }
    .header-right {
      justify-content: flex-end;
    }
    .header-logo {
      img {
        max-height: 64px;
        width: auto;
        display: block;
      }
    }
  }
  .c-notification-panel {
    z-index: 9999;
    position: absolute;
    right: 0;
    top: calc(100% - var(--spacing-4));
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: 0.2s;
    &.is-notification-open {
      opacity: 1;
      pointer-events: all;
      visibility: visible;
    }
  }
}
.l-header-drawer {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: var(--black-alpha-3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  &.is-drawer-open {
    pointer-events: all;
    visibility: visible;
    opacity: 1;
  }
  .c-header-drawer {
    position: relative;
    background: var(--color-surface-base-primary);
    width: 80vw;
    max-width: 280px;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-block: var(--spacing-6);
    .drawer-close {
      padding-inline: var(--spacing-4);
    }
    .c-drawer-user {
      padding-top: var(--spacing-6);
      padding-bottom: var(--spacing-12);
      border-bottom: 1px solid var(--color-border-base-middle);
    }
    .drawer-user-info {
      display: block;
      padding-left: var(--spacing-10);
      padding-right: var(--spacing-6);
      text-decoration: none;
      color: var(--color-text-base-middle);
      dl {
        display: flex;
        align-items: center;
        gap: var(--spacing-6);
        dd {
          flex: 1;
          display: flex;
          gap: var(--spacing-6);
          align-items: center;
        }
        .user-info-text {
          flex: 1;
          display: grid;
          gap: var(--spacing-1);
        }
        .user-name {
          font-size: var(--font-size-6);
          &.disabled {
            color: var(--color-text-base-disabled);
          }
          .unit {
            font-size: var(--font-size-4);
          }
        }
        .user-email {
          font-size: var(--font-size-2);
          line-height: var(--line-height-1);
          color: var(--color-text-base-low);
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .icon {
          width: 24px;
          height: 24px;
          fill: var(--color-text-primary);
        }
      }
    }
    .drawer-nav {
      padding-block: var(--spacing-8);
      padding-inline: var(--spacing-10);
    }
    .drawer-nav-content {
      padding: 0;
      display: grid;
      gap: var(--spacing-2);
    }
    .drawer-nav-item {
      padding: 0;
      list-style: none;
      a {
        display: flex;
        align-items: center;
        gap: var(--spacing-4);
        text-decoration: none;
        color: var(--color-text-base-middle);
        padding-block: var(--spacing-6);
        font-size: var(--font-size-6);
      }
      .icon {
        width: 24px;
        height: 24px;
        fill: var(--color-surface-primary);
      }
    }
  }
  .drawer-nav-divider {
    margin-block: var(--spacing-12);
    width: 100%;
    border-top: 1px solid var(--color-border-base-middle);
  }
}