@charset "utf-8";
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a{
  color: inherit;
  text-decoration: inherit;
}
img{
  max-width: 100%;
}
ul,li{
  list-style: none;
}
html{
  color: #333;
  background-color: #fff;
  width: 100%;
  height: 100vh;
  position: relative;
}

main{
  display: flex;
  height: 100vh;
}

aside{
  width: 290px;
  padding: 10px;
  border-right: 5px solid #ebebeb;
}
header{
  height: 100px;
  /* border: 1px solid pink; */
}
.logo{
  width: 160px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* border: 1px solid #000; */
}

.side{
  padding-top: 10px;
}
nav{
  position: relative;
}

/* .gnb{
  border: 1px solid #000;
} */


.gnb>li>a{
  display: block;
  font-weight: bold;
  padding: 5px 20px;
  border-radius: 50px;
  transition: background-color 0.1s;
  font-size: 24px;
}
.gnb>li:hover>a{
  background-color: #ebebeb;
}

.name{  
  display: block;
  padding-top: 300px;
}

.namelist ul li a {
  display: block; /* a 태그에 패딩(여백)이 정상적으로 먹히도록 블록 요소로 변경 */
  padding: 2px 20px; /* 원하시는 위아래 5px, 좌우 20px 여백 */
  cursor: default;
  font-size: 18px;
}


/* 사이드바 우측의 남은 영역을 모두 차지 */
.center {
  flex: 1; /* 남은 가로 공간 꽉 채우기 */
  display: flex;
  flex-direction: column; /* 가로 배치를 세로(위아래) 배치로 변경! (핵심) */
  height: 100vh;
  
  /* 이전 이미지처럼 검은 배경을 원하시면 아래 속성을 유지하세요 */
  color: #555; /* 푸터 글씨색 예시 */
}


/* center 안의 maincon (주의: .center.maincon 처럼 붙여 쓰면 안 되고 띄어 써야 합니다) */
.center .maincon {
  flex: 1; /* 빈 세로 공간을 모두 차지하여 푸터를 바닥으로 밀어냅니다! (핵심) */
  overflow-y: auto;
}
.center .maincon a{
  cursor: default;
}
.center .maincon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* center 안의 footer */
.center .footer {
  padding: 20px 0; /* 원하는 여백 */
  text-align: center;
  font-size: 13px;
}
.center .footer u{
  text-decoration: underline;    
  text-decoration-style: dotted;  
  text-decoration-color: #666;    
  text-underline-offset: 4px;
}

/* ------------------ */
/* =========================================
  PC버전 (기본 상태) - 모바일 헤더 숨김
   ========================================= */
.mobile-header {
  display: none; /* PC에서는 햄버거 버튼 안 보임 */
}


/* =========================================
  반응형 웹 (모바일 & 태블릿) 설정
  화면 가로폭이 768px 이하일 때 발동
   ========================================= */
@media screen and (max-width: 768px) {
  
  /* 🌟 메인 콘텐츠 이미지 비율 자동 맞춤 */
  .center .maincon img {
    width: 100%;
    height: auto; /* PC에서 준 100% 높이를 풀고 원본 비율에 따라 자동으로 조절 */
    object-fit: contain; /* 이미지가 잘리지 않고 화면 안에 온전히 다 들어오게 함 */
  }
  /* 1. 모바일 헤더(햄버거 버튼) 보이기 */
  .mobile-header {
    display: flex;
    padding: 15px 20px;
    background-color: #fff;
    border-bottom: 1px solid #ebebeb;
  }
  
  #hamburger-btn {
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
  }

  /* 2. 메인 영역 높이 설정 해제 (자연스럽게 늘어나도록) */
  .center {
    height: auto; 
    min-height: 100vh;
  }

  /* 3. 🌟핵심: 사이드바를 화면 왼쪽 밖으로 숨기기 (서랍장) */
  aside {
    position: fixed; /* 화면에 띄움 */
    top: 0;
    left: -300px; /* 너비(290px)보다 더 밖으로 완전히 숨김 */
    width: 290px;
    height: 100vh;
    background-color: #fff;
    z-index: 1000; /* 다른 콘텐츠보다 가장 위에 올라오도록 설정 */
    transition: left 0.3s ease; /* 스르륵 나타나는 애니메이션 효과 */
    box-shadow: 2px 0 10px rgba(0,0,0,0.1); /* 약간의 그림자 추가 */
  }

  /* 4. 'open' 클래스가 추가되면 화면 안으로 들어옴! */
  aside.open {
    left: 0;
  }

  /* 모바일에서 과도한 여백 줄이기 */
  .name {
    padding-top: 50px; 
    margin-bottom: 20px;
  }
}