* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; font-family: 'Nanum Gothic','Pretendard','SamsungOneKorean','Samsung Sharp Sans',sans-serif; }

/* 헤더 */
.site-header {
  position: fixed;
  top: 0; left: 0; width: 100%;
  padding: 0 10%;
  height: 70px;
  display: flex; justify-content: space-between; align-items: center;
  background-color: rgba(255,255,255,0.95);
  backdrop-filter: blur(5px);
  border-bottom: 1px solid #ddd;
  z-index: 1000;
}

.logo { flex: 0 0 auto; }
.logo img { height: 50px; }

nav { flex: 1 1 auto; display: flex; justify-content: flex-end; align-items: center; }

/* PC 메뉴 */
nav ul.menu {
  display: flex;
  list-style: none;
  gap: 40px;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}

nav ul.menu li { position: relative; }
nav ul.menu li a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  padding: 10px 0;
  display: block;
  position: relative;
  transition: color 0.3s;
  line-height: 1.5;
}
nav ul.menu li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 2px;
  background-color: #ddd;
  transition: width 0.3s;
}
nav ul.menu li a:hover::after { width: 100%; }
nav ul.menu li a:hover { color: #0073e6; }

/* 서브 메뉴 */
nav ul.menu li ul.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  padding: 10px 0;
  margin: 0;
  background: #fff;
  border: 1px solid #ddd;
  min-width: 150px;
  z-index: 1000;
}
nav ul.menu li:hover > ul.submenu { display: block; }
nav ul.menu li ul.submenu li a { display: block; padding: 8px 20px; color: #333; }
nav ul.menu li ul.submenu li a:hover { background: #f5f5f5; }

.menu-toggle { display: none; background: none; border: none; font-size: 28px; cursor: pointer; }
body { padding-top: 70px; }

/* 모바일 스타일 */
@media(max-width:767px){
  header { padding: 0 5%; height: 60px; }
  .logo { flex:0 0 50%; }
  nav { flex:0 0 50%; justify-content:flex-end; position:relative; }

  /* 햄버거 버튼 */
  .menu-toggle {
    display:block;
    right: 0;
    top: 100%;
    transform: none;
    z-index: 1001; 
  }

  /* 모바일 메뉴 위치 및 슬라이드 */
  nav ul.menu {
    position: absolute;
    gap: 0;
    top: 100%;
    right: 0;
    left: 0;
    flex-direction: column;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    background: #fff;
    border: none;
    border-radius: 4px;
    z-index: 1000;
    transition: max-height 0.4s ease;
  }

  nav ul.menu.active {
    max-height: 2000px;
    border: 1px solid #eee;
  }

  /* 모바일 메뉴 항목 */
  nav ul.menu li { width: 100%; border-bottom: 1px solid #eee; }
  nav ul.menu li a {
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* 서브 메뉴 */
  nav ul.menu li ul.submenu {
    position: static;
    border: none;
    max-height: 0;
    overflow: hidden;
    background: #f9f9f9;
    transition: max-height 0.3s ease;
  }
  nav ul.menu li ul.submenu.active { max-height: 500px; }
  nav ul.menu li ul.submenu li a { padding-left: 40px; }

  /* v 표시 */
  .arrow { display: inline-block; margin-left: 5px; font-size: 0.8em; transition: transform 0.3s; }
  nav ul.menu li a:not(:has(+ .submenu)) .arrow { display: none; } /* 서브 없는 메뉴 숨김 */
  nav ul.menu li a.active .arrow { transform: rotate(180deg); }
}

/* PC에서는 v 숨김 */
@media(min-width:768px){
  .arrow { display: none; }
}


/* 항상 버튼이 위에 오도록 (전역) */
.site-header nav .menu-toggle{
  position: relative;
  z-index: 1001;
  pointer-events: auto;
}

/* 모바일 전용 표시 + 덮어쓰기 보강 */
@media (max-width: 767px){
  .site-header nav .menu-toggle{
    display: block;   /* 이미 있으나, 우선순위 보강용 */
  }
}


.site-header nav .menu-toggle{ position:relative; z-index:1001; pointer-events:auto; }

@media(max-width:767px){
  nav ul.menu{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
  nav ul.menu.active{ max-height:2000px; border:1px solid #eee; }
  nav ul.menu li ul.submenu{ position:static; border:none; max-height:0; overflow:hidden; background:#f9f9f9; transition:max-height .3s ease; }
  nav ul.menu li ul.submenu.active{ max-height:500px; }
}