@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,
.gnb>li.active>a {
  background-color: #ebebeb;
}

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

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


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


/* center 안의 maincon (주의: .center.maincon 처럼 붙여 쓰면 안 되고 띄어 써야 합니다) */
.center .maincon {
  flex: 1; /* 빈 세로 공간을 모두 차지하여 푸터를 바닥으로 밀어냅니다! (핵심) */
  overflow-y: auto;
}

/* 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) {
  
  /* 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;
  }
}

/* =========================================
   방명록(CHAT) 전용 스타일
   ========================================= */
.center .maincon {
  flex: 1; display: flex; flex-direction: column;
  background-color: #f0f4f9; overflow: hidden;
}

/* 🌟 채팅창 넓이 제한 & 중앙 정렬 마법 */
.chat-wrap {
  width: 100%;
  margin: 0 auto;   /* 좌우 여백을 자동으로 나눠가져서 완벽한 중앙 정렬 */
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-header {
  padding: 20px; text-align: center; font-size: 1.25rem; font-weight: 600;
  border-bottom: 1px solid #e3e3e3;
}

#chat-display {
  flex-grow: 1;
  padding: 24px max(24px, calc((100% - 768px) / 2));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;

  /* 🌟 추가할 부분: 스크롤바 자리를 미리 예약해서 화면 밀림 방지 */
  scrollbar-gutter: stable;
}

.bot-bubble {
  background-color: #e8f0fe; color: #1f1f1f; padding: 16px 24px;
  border-radius: 24px; border-bottom-left-radius: 4px; max-width: 80%;
  align-self: flex-start; line-height: 1.6;
}

.my-message-wrapper {
  align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end;
  max-width: 80%; animation: fadeIn 0.3s ease-out;
}

.message-bubble {
  background-color: #ffffff; color: #1f1f1f; padding: 16px 24px;
  border-radius: 24px; border-bottom-right-radius: 4px;
  line-height: 1.6; box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.action-buttons { display: flex; gap: 10px; margin-top: 6px; margin-right: 10px; }
.action-buttons button { background: none; border: none; font-size: 0.8rem; color: #757575; cursor: pointer; text-decoration: underline; }
.action-buttons button:hover { color: #1a73e8; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

#input-container { 
  padding: 20px 24px; /* 기존 40px 여백을 약간 줄여 자연스럽게 맞춤 */
  background-color: #f0f4f9; 
}

.input-wrapper { 
  width: 100%;
  max-width: 768px; /* 입력칸 넓이 제한 */
  margin: 0 auto;   /* 입력칸 가운데 정렬 */
  display: flex; 
  background-color: #ffffff; 
  border-radius: 32px; 
  padding: 8px 16px; 
  align-items: center; 
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
}
#text-input { flex-grow: 1; border: none; background: transparent; padding: 12px 8px; font-size: 1rem; outline: none; }
#submit-btn { background: linear-gradient(135deg, #1a73e8, #9333ea); color: white; border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; }


/* =========================================
   반응형 웹 (모바일 & 태블릿) 설정
   ========================================= */
.mobile-header { display: none; }

@media screen and (max-width: 768px) {
/* 🌟 메인 콘텐츠 이미지 비율 자동 맞춤 */
  .center .maincon img {
    width: 100%;
    height: auto; /* PC에서 준 100% 높이를 풀고 원본 비율에 따라 자동으로 조절 */
    object-fit: contain; /* 이미지가 잘리지 않고 화면 안에 온전히 다 들어오게 함 */
  }
  .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; }
  
  aside {
    position: fixed; top: 0; left: -300px; 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);
  }
  aside.open { left: 0; }
  .name { padding-top: 50px; margin-bottom: 20px; }
  
  #input-container { padding: 15px 20px; } /* 모바일에서는 입력칸 여백 줄임 */

  
}

/* 🌟 방명록 작성 시간 스타일 (DM 느낌) */
.message-time {
  font-size: 0.7rem;        /* 아주 작은 글씨 */
  color: #999;              /* 연한 회색 */
  margin-top: 4px;          /* 말풍선과의 간격 */
  margin-right: 4px;        /* 우측 정렬 시 미세 여백 */
  align-self: flex-end;     /* 오른쪽 정렬 */
}