/* #menu-gnb에 liquid glass 효과 적용 */

#menu-gnb {
  background: rgba(0, 0, 0, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: -1px 1px 2px rgb(0 0 0 / 35%);
  
  position: relative;
  /* overflow: hidden; */
}
#menu-gnb::after {
  content: '';
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  position: absolute;
  top: 0;
  left: 0;
  /* 핵심: 왼쪽 부분만 불투명하게 마스킹 */
  mask-image: linear-gradient(to right, black 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 40%, transparent 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(0, 0, 0, 0.12);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.11) 100%, rgb(255 255 255) 98%, rgb(113 113 113 / 45%) 0%);
  z-index: -1;
}

#menu-gnb::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0px;
  left: 0;
  background: rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 10%, rgba(255, 255, 255, 0.5) 90%, rgba(255, 255, 255, 0) 100%);
  backdrop-filter: blur(4px) brightness(2);
  -webkit-backdrop-filter: blur(4px) brightness(2);
  mask-image: linear-gradient(to right, transparent 10%, white 40%, white 60%, transparent 90%);
  -webkit-mask-image: linear-gradient(to right, transparent 10%, white 40%, white 60%, transparent 90%);
  opacity: 0.35;
  z-index: -1;
}

@media (max-width: 900px) { 

  #header .inner {
    background: rgba(0, 0, 0, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: -1px 1px 2px rgb(0 0 0 / 35%);
  }

  #header .inner::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0px;
    left: 0;
    background: rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 10%, rgba(255, 255, 255, 0.5) 90%, rgba(255, 255, 255, 0) 100%);
    backdrop-filter: blur(4px) brightness(2);
    -webkit-backdrop-filter: blur(4px) brightness(2);
    mask-image: linear-gradient(to right, transparent 10%, white 40%, white 60%, transparent 90%);
    -webkit-mask-image: linear-gradient(to right, transparent 10%, white 40%, white 60%, transparent 90%);
    opacity: 0.35;
    z-index: -1;
  }

  #header .inner::after {
    content: '';
    width: calc(100% - 1px);
    height: calc(100% - 1px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    position: absolute;
    top: 0;
    left: 0;
    mask-image: linear-gradient(to right, black 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 40%, transparent 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, 0.12);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.11) 100%, rgb(255 255 255) 98%, rgb(113 113 113 / 45%) 0%);
    z-index: -1;
  }

  #menu-gnb {
    background: initial;
    border: initial;
    box-shadow: initial;
    position: initial;
  }

  #menu-gnb::before,
  #menu-gnb::after {
    display: none;
  }

}