/* style.css */
.inner { width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 2rem; }

/* =================
  Header
  ==================*/
  /* Header 기본 설정 */
/* 기본 레이아웃 */
.header .inner { display: flex; justify-content: space-between; align-items: center; height: 80px; position: relative; }
.header-left { display: flex; align-items: center; gap: 60px; }
/* GNB */
.gnb .depth1 { display: flex; gap: 40px; }
.gnb .depth1 > li { position: relative;  }
.gnb .depth1 > li > a { display: block; line-height: 80px; font-size: 18px; font-weight: 600; }
.gnb .depth2-wrap { 
  display: none; 
  position: absolute;
  top: 80px; /* 헤더 높이 */
  left: 0;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #ddd;
  box-shadow: 0 10px 15px rgba(0,0,0,0.05);
  padding: 30px 0 40px;
  z-index: 100;
 }
.gnb .depth2 { display: block !important;  text-align: center; gap: 80px; padding-left: 250px; }
.gnb .depth2 > li > a.tit {
    font-size: 18px;
    font-weight: 700;
    color: #008ccf; /* 시안의 포인트 컬러 */
    display: block;
    margin-bottom: 15px;
}
.gnb .depth3 li a {
    font-size: 15px;
    color: #666;
    padding: 5px 0;
    display: block;
    transition: color 0.2s;
}

.gnb .depth3 li a:hover {
    color: #008ccf;
    text-decoration: underline;
}

/* 사이트맵 레이어 초기 상태 */
.sitemap-layer { position: fixed; top: 0; right: -100%;  width: 100%; height: 100%; background: #fff; z-index: 9999;  transition: 0.4s ease-in-out; visibility: hidden; }
/* 활성화 상태 */
.sitemap-layer.active { 
  right: 0;
  visibility: visible;  
 }
/* 모바일 아코디언 메뉴 스타일 */
.m-depth2 {
    display: none;
    background: #f9f9f9;
}
.mobile-gnb .depth2 { display: none;  background: #f8f8f8; padding: 10px 0; } 
.mobile-gnb .depth1 > li.on > .depth2 { display: block;  }

/* Footer */
.footer { width: 100%; background-color: #333; color: #fff; }
.footer .inner { height: 100px; display: flex; align-items: center; justify-content: center; }

/* Media Queries (브레이크포인트 관리) */
@media screen and (max-width: 1024px) {
    .inner {
        max-width: 100%; /* 태블릿부터는 꽉 채우고 패딩으로 조절 */
    }
    /* 햄버거 메뉴 버튼 등이 나타날 자리 */
    .header .gnb { display: none; } 
}

@media screen and (max-width: 768px) {
    .header .inner {
        height: 6rem; /* 모바일은 헤더를 조금 줄이는 게 트렌드입니다 */
    }
}