/**************************
-- 전체 레이아웃 --
**************************/
/* ✅초기화 */
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}


html, body {
  height:100%;
   margin:0;
}

/* ✅전체 틀 */
.main-wrap {
  width:100%;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ✅HEADER (고정) */
.header {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:80px;
  z-index:1000;
  background:transparent;
  transition: all 0.3s ease;
}

/* ✅ BANNER */
.main-banner {
  width:100%;
  height:100vh;
}

/* ✅ CONTENT */
.content {
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:40px 20px;
  flex:1;
}

/* ✅ FOOTER */
.footer-inner {
  max-width:1200px;
  margin:0 auto;
  padding:40px 20px;
}
/**************************
-- 전체 레이아웃 여기까지--
**************************/




/**************************
            -- 히어로 --
**************************/
/*  ✅ 헤더 내부 정렬 */
.header-inner {
  max-width:1200px;
  margin:0 auto;
  height:100%;
  padding:0 20px;

  display:flex;
  align-items:center;
 justify-content:space-between;
}

/* 로고 */
.header-left img {
  height:70px;
}


/* 스크롤 했을 때  헤드 색상 */
.header.scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px); 
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* 스크롤 시 글씨 색 */
.header.scrolled .header-center a {
  color: #000;
}



/* 메뉴 */
.header-center {
 overflow: visible;
  position: absolute;
  left: 65%;
  transform: translateX(-65%);
}


/*********
 메뉴
 *********/ 
/* gnb 기본 */
.gnb {
  display:flex;
  gap:30px;
  list-style:none;
}

/* li 기준 */
.gnb > li {
  position:relative;
}

/* 서브메뉴 숨김 */
.sub-menu {
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  background:#fff;
  padding:10px 0;
  display:none;
  min-width:120px;
  text-align:center;
   width:auto;
   white-space:nowrap;
   overflow: hidden; 
}

.gnb,
.sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gnb > li {
  position:relative;
  padding-bottom:10px;  /* ⭐ 이게 진짜 핵심 */
}

.gnb > li:hover .sub-menu {
  display:block;
}

.gnb > li > a {
  font-weight: 600;  /* 추천: 500~600 사이 */
}

/* 서브메뉴 링크 */
.sub-menu li a {
  display:block;
  padding:8px 15px;
  color:#000;
  text-decoration:none;
  font-size:15px;
}

.sub-menu li a:hover {
  background:#f5f5f5;
}


.header-center a {
  text-decoration:none;
  color: #333;
  font-size:16px;
  white-space: nowrap;
}








/******************
 == 햄버거 메뉴 ===
 ******************/

.header-right {
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
    background:none; 
    list-style: none;
}


/* 햄버거 색도 같이 */
.header.scrolled .hamburger-btn {
     position: static;
    top: 10px;
    right: 50px;
    z-index: 9999;

    border: none;
    padding: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-radius: 8px;
    outline: none;         
}


.hamburger-btn {
  display:flex;
  align-items:center;
  justify-content:center;

  background: transparent;
  border: none;
  padding: 10px;
  cursor: pointer;
  gap: 5px;
  border-radius: 8px;
  outline: none;
}

.hamburger-btn .line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: #000;
  transition: 0.3s;
}

.hamburger-btn label {
                              position:relative; 
                              width:25px; height:25px;  
                                cursor:pointer; 
                                background: transparent; }

 
                           
.hamburger-btn label span{position:absolute; 
                                        z-index: 999; width: 25px; height: 3px;
                                      transition: background 0.2s ease, transform 0.25s ease, opacity 0.25s ease;}

/* 햄버거버튼 배경/색상 */
 .hamburger-btn label span:nth-child(1){background:#0e6ca5;}
 .hamburger-btn label span:nth-child(2){background:#126e88; }
 .hamburger-btn label span:nth-child(3){background:#12887a; }
  .hamburger-btn{background:none;}
 .hamburger-btn:hover {background:none;}
 .hamburger-btn:hover.active {background:none;}



.hamburger-btn label span:nth-child(1){top:0;}
 .hamburger-btn label span:nth-child(2){top:50%; transform:translateY(-50%);}
 .hamburger-btn label span:nth-child(3){bottom:0;}

/* X로 변환 */
.hamburger-btn.active .line:nth-child(1){top:50%; transform:translateY(-50%) rotate(45deg); background:green; }
.hamburger-btn.active .line:nth-child(2){opacity:0;}
.hamburger-btn.active .line:nth-child(3){bottom:50%; transform:translateY(50%) rotate(-45deg); background:blue; }





/* 🔥 모바일 */
@media (max-width:768px){

/* ✅ CONTENT */
.content {
  padding:40px 2%;
}


  /* 메뉴 숨김 */
  .header-center {
    display:none;
  }

  /* 햄버거 보이기 */
  .header-right {
 display:flex;
  }
.hamburger-btn label {left:5%;}
}