/* 스크롤바 숨기기 */
 html::-webkit-scrollbar {
   display: none;
 }

/* burger_icon */
.burger_icon {
  cursor: pointer;
  display: none;    
  position: fixed; /* 고정된 위치로 설정 */
  z-index: 2;
  padding: 8px 0;
  top: calc(var(--navbar-height)/2);
  right: 10px;
  user-select: none;
  width: auto;
  margin: 0;
  z-index: 510;
}
.burger_icon .burger_sticks {
  background: #333;
  display: block;
  height: 3px;
  position: relative;
  transition: background .2s ease-out;
  width: 23px;
}
.burger_icon .burger_sticks:before,
.burger_icon .burger_sticks:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}
.burger_icon .burger_sticks:before {
  top: 6px;
}
.burger_icon .burger_sticks:after {
  top: -6px;
}
.burger_check {
  display: none;
}
.burger_check:checked~.burger_icon .burger_sticks {
  background: transparent;
}
.burger_check:checked~.burger_icon .burger_sticks:before {
  transform: rotate(-45deg);
}
.burger_check:checked~.burger_icon .burger_sticks:after {
  transform: rotate(45deg);
}
.burger_check:checked~.burger_icon:not(.steps) .burger_sticks:before,
.burger_check:checked~.burger_icon:not(.steps) .burger_sticks:after {
  top: 0;
}


.menu {
  position: fixed;
  top: calc(var(--navbar-height) + var(--padding-height) * 2 + 1px);
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  background-color: white;
  transition: height 0.3s ease;
  z-index: 1;
}
.burger_check:checked ~ .menu {
  height: calc(100% - (var(--navbar-height) + var(--padding-height) * 2 + 1px));
}
.burger_check:checked~.menu .header_list {
  display: block;
}
.header_list{
  display: none;
  padding-left: 0;
  text-align: center; /* 수평 가운데 정렬 */
  list-style-type: none;
  margin-top: 50px; /* 원하는 상단 마진 크기를 설정 */
}
.header_list li {
  margin: 10px 0; /* 위아래 간격 */
}
.menu .header_list li a {
  font-size: 18px;
  color: #252525;
  text-decoration: none;
}



.navbar {
  display: flex;
  justify-content: center; /* 가운데 정렬 */
  align-items: center;
  padding: var(--padding-height) var(--padding-width);
  height: var(--navbar-height);
  position: fixed;
  top: 0; /* 이게 반드시 필요함 */
  width: 100%;
  background-color: white;
  border-bottom: 1px solid rgba(200, 200, 200, 1);
  z-index: 500;
}
.navbar_logo {
  position: absolute;
  left: 32px; /* 좌측 고정 */
}
.navbar_logo h1 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  border-bottom: none;
}
.navbar_logo h1 a {
  font-weight: bold;
  font-size: 25px;
  color: #000;
  text-decoration: none;
}
.navbar_logo h1 img {
  height: 50px; /* 원하는 로고 크기로 조절 */
  width: auto;
  display: block;
}

.navbar_menu {
  display: flex;
  list-style: none;
  padding-left: 0;
}
.navbar_menu li {
  list-style: none;
  padding: 8px 12px;
}
.navbar_menu li a {
  font-size: 16px;
  color: #252525;
  text-decoration: none;
}
.navbar_menu li:hover {
  background-color: rgb(235, 235, 235);
  border-radius: 5px;
}

.navbar_action {
  position: absolute;
  right: 32px;
}

.start-button {
  display: inline-block;
  padding: 8px 16px;
  background-color: #0077ff;
  color: white;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.2s ease;
}

.start-button:hover {
  background-color: #005ec2;
}

@media screen and (max-width: 798px) {
  .navbar_menu {
    display: none;
  }
  .navbar_action {
    right: 80px;
    /* 또는 64px, 원하는 만큼 조정 가능 */
  }
  .burger_icon {
    display: inline-block;
  }
  .menu {
    display: block;
  }
}
@media screen and (min-width: 799px) {
  .menu {
    display: none !important;
    height:  calc(100% - (var(--navbar-height) + var(--padding-height) * 2 + 1px)) !important;
  }

}