:root {
  --lnb-width: 220px;
  --section-menu-gap: 2.5rem; /* 40px */
  --menu-gap: 0.9375rem; /* 15px */
  --overlay-dimmed: 10000000;
  --overlay-content: 10000001;

  --text-gray-600: #9097a3;
  --text-gray-1000: #17191c;

  --text-blue-600: #0a74ff;
}

/* pc */
.pc_lnb {
  font-family: "Pretendard Variable";
  display: block;
  position: absolute;
  width: 220px;
  left: calc(50% - 354px - 220px - 80px);
  padding-top: 80px;

  & > :not(:first-child) {
    margin-top: var(--section-menu-gap);
  }

  & .accordion_menu {
    display: block;
    width: var(--lnb-width);
  }

  & .accordion_menu_button {
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.2s;
    outline: none;
    height: fit-content;
    width: 100%;
    justify-content: space-between;
    border-radius: 0;
    border-bottom: 1px solid #ccc;
    padding: 0;
    padding-bottom: 15px;
    background-color: white;
    cursor: pointer;

    &:focus-visible {
      outline: none;
      box-shadow: 0 0 0 1px #1a1a1a;
    }
    &:disabled {
      pointer-events: none;
      opacity: 0.5;
    }
    &:hover {
      border-bottom: 1px solid #ccc;
    }
    p {
      margin: 0;
      font-size: 1.125rem; /* 18px */
      line-height: 1.75rem; /* 28px */
      font-weight: 700;
    }
    svg {
      margin: 0;
      pointer-events: none;
      flex-shrink: 0;
      width: 1rem;
      height: 1rem;
    }
    &[data-state="open"] svg {
      transform: rotate(180deg);
    }
    &[data-state="closed"] svg {
      transform: rotate(0deg);
    }
  }

  & .accordion_menu_content_wrapper {
    overflow: hidden;
    height: auto;
    
    &[data-state="open"] {
      visibility: visible;
      padding-top: 30px;
      transition: height 300ms ease-out;
    }
    &[data-state="closed"] {
      visibility: hidden;
      padding-top: 0px;
      transition: height 300ms ease-out, visibility 0s 300ms, padding 100ms 200ms;
    }

    & > :not(:first-child) {
      margin-top: var(--menu-gap);
    }
  }

  & a.menu_item {
    font-size: 1rem;
    line-height: 1.5625rem; /* 25px */
    color: var(--text-gray-600);
    cursor: pointer;

    &[data-state="active"] {
      color: var(--text-blue-600);
      font-weight: 500;
    }

    &:hover {
      color: var(--text-gray-1000);
    }
    &:focus-visible {
      outline: none;
      box-shadow: 0 0 0 1px #1a1a1a;
    }
  }
}

@media all and (max-width: 1440px) {
  .pc_lnb {
    display: none;
  }
}

.lnb_dimmed {
  display: block;
  position: fixed;
  inset: 0;
  z-index: var(--overlay-dimmed);
  background-color: rgba(0, 0, 0, 0.8);
  pointer-events: auto;

  &[data-state="open"] {
    animation: fadeIn 500ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  &[data-state="closed"] {
    display: none;
    animation: fadeOut 500ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
  }
}


.lnb_drawer {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--overlay-content);
  margin-top: 6rem;
  height: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: 1px solid #e5e5e5;
  background-color: white;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;

  & .lnb_drawer_handle {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
    height: 8px;
    width: 100px;
    border-radius: 9999px;
    background-color: #f5f5f5;
    cursor: pointer;
  }

  & .lnb_drawer_scroll_area_wrapper {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 80svh;
    width: 100%;
  }

  & .lnb_drawer_scroll_area {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow-x: hidden;
    overflow-y: scroll;

    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  & .lnb_drawer_content_wrapper {
    display: table;
    min-width: 100%;

    & .lnb_drawer_content {
      display: flex;
      flex-direction: column;
      margin-top: 2.5rem;
      margin-bottom: 2.5rem;

      & > :not(:first-child) {
        margin-top: var(--section-menu-gap);
      }

      & .lnb_drawer_menu_header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.25rem; /* 20px */
        text-align: center;

        @media all and (min-width: 768px) {
          text-align: left;
        }
      }

      & .lnb_drawer_menu_title {
        font-size: 1.125rem; /* 18px */
        line-height: 1;
        font-weight: 600;
        letter-spacing: -0.025em;
        margin: 0;
      }

      & p {
        padding: 0;
        margin: 0;

        & .lnb_drawer_menu_link {
          display: inline-flex;
          user-select: none;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
          white-space: nowrap;
          border-radius: 0.375rem; /* 6px */
          font-weight: 500;
          transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-duration: 150ms;
          font-size: 1rem;
          color: var(--text-gray-600);
          padding: 0;
          height: fit-content;
          cursor: pointer;

          &[data-state="active"] {
            color: var(--text-blue-600);
            font-weight: 500;
          }

          &:hover {
            color: var(--text-gray-1000);
          }

          &:focus-visible {
            outline: 2px solid transparent;
            outline-offset: 2px;
            box-shadow: 0 0 0 1px #1a1a1a;
          }

          &:disabled {
            pointer-events: none;
            opacity: 0.5;
          }
        }
      }
    }
  }

  &[data-state="open"] {
    animation: slideFromBottom 500ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  /* FIXME 닫히기 전에 깜빡거리는 문제 수정 필요 */
  &[data-state="closed"] {
    display: none;
    animation: slideToBottom 500ms cubic-bezier(0.32, 0.72, 0, 1);
  }
}

@media all and (min-width: 1440px) {
  .mobile_lnb_button {
    display: none;
  }
}

/* keyframes */
@keyframes slideDown {
  from {
    height: 0;
  }
  to {
    height: var(--collapsible-content-height);
  }
}

@keyframes slideUp {
  from {
    height: var(--collapsible-content-height);
  }
  to {
    height: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideFromBottom {
  from {
    transform: translate3d(0, 100%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideToBottom {
  to {
    transform: translate3d(0, 100%, 0);
  }
}