body, h1, h2, h3, p, ul, li {
  margin: 0;
  padding: 0;
  } 
  .nav {
    display: flex;
    padding: 15px;
    align-items: center;
    background : #ffefd5;
  }
  .nav a {
    margin-right: 10px;
  }
  .logo {
    font-weight: bold;
  }
  .custom-nav {
    display: flex;
    padding: 15px;
    align-items: center;
    background: #ffefd5;
  }
  
  .custom-nav a {
    margin-right: 10px;
  }
  
  .custom-nav .logo {
    font-weight: bold;
  }
  a {
    text-decoration-line: none;
  /*   text-decoration-line: underline; */
  /*   text-decoration-line: overline; */
  /*   text-decoration-line: line-through; */
  /*   text-decoration-line: underline line-through overline; */
  }

  .bottom-center {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: 50%;
      text-align: center;
  }
  .grey-bg {
    background: #ffe4e1;
  }
  .white-bg {
    background: white;
    margin: 20px;
    border-radius: 5px;
  }
  .list-box {
    padding : 10px;
    border-bottom: 1px solid#eee;
  }
  .list-box h4{
    font-size: 16px;
    margin: 5px;
  }
  .list-box p {
    font-size: 13px;
    margin: 5px;
    color: grey;
  }
  input,div {
    box-sizing: border-box;
  }
  .form-box {
    background : white;
    padding : 25px;
    margin: 20px;
    border-radius: 8px;
  }
  .form-box input {
    padding : 10px;
    font-size: 16px;
    width: 100%;
    border: 1px solid black;
    border-radius: 5px;
    margin-bottom: 10px;
  }
  .form-box button {
    padding: 10px;
    border : none;
    background : lightgrey;
    border-radius: 5px;
  }
  .detail-bg {
    background: white;
    padding: 15px;
    margin-top: 10px;
  }
  .second {
    width: 300px;
    margin-bottom: 20px;
    padding: 50px;
    border-width: 10px;
  }
  .btn-success {
    opacity : 0.8
  }
  .btn-danger {
    opacity : 0.8
  }
  .btn-warning {
    opacity : 0.8
  }
  .search {
    margin : 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 200px;
    margin-right: 10px; /* 입력창과 버튼 사이의 간격 조절 */
  }

  .search-send {
      padding: 10px 20px;
      background-color: #ff4500; /* 버튼 배경색 */
      color: #fff; /* 버튼 텍스트 색상 */
      border: none;
      border-radius: 5px;
      cursor: pointer;
  }

  /* 버튼 호버 효과 */
  .search-send:hover {
      background-color: red; /* 호버 시 배경색 변경 */
  }
  
  .chat-screen { width: 100%; }
  
  .chat-box {
    margin-top: 15px;
    display: flex;
    max-width: 80%; /* 최대 너비 설정 */
  }
  
  .chat-box span {
    padding: 10px;
    border-radius: 5px;
    word-wrap: break-word; /* 긴 텍스트가 넘치지 않도록 줄 바꿈 처리 */
    max-width: 100%; /* 최대 너비 설정 */
  }
  
  .mine, .sender {
    justify-content: flex-end;
  }

  .mine span, .sender span {
      background: #cfe2ff; /* 채팅 내용의 배경색 */
  }
    
  .other-user, .receiver {
      justify-content: flex-start;
  }

  .other-user span, .receiver span {
      background: #f0f0f0; /* 채팅 내용의 배경색 */
  }

  .chat-input {
    margin-top: 15px;
    padding: 10px;
    border-radius: 5px;
  }
  .chat-button {
    padding: 10px;
    border : none;
    background : lightgrey;
    border-radius: 5px;
  }
  figure {
    text-align: center;
    margin-top: 50px; /* 페이지 상단에서 떨어지는 여백 조절 */
  }
  figcaption {
      font-size: 1.2rem; /* 텍스트 크기 조절 */
      margin-top: 20px; /* 타이틀 아래 여백 조절 */
      text-align: left; /* 텍스트를 왼쪽 정렬 */
      font-weight: bold; /* 텍스트를 두껍게 */
  }
  p {
      font-size: 1.5rem; /* 텍스트 크기 조절 */
      font-weight: bold; /* 텍스트를 두껍게 */
  }
  /* 알림 박스 스타일 */
  .chat-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 10000; /* 우선순위를 높임 */
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.5s;
}

.chat-notification.show {
    opacity: 1;
    transform: translateY(0);
}

.delete-btn {
  display: inline-block;
  padding: 5px 10px;
  background-color: #ff6347; /* 삭제 버튼 배경색 */
  color: #fff; /* 삭제 버튼 텍스트 색상 */
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.delete-btn:hover {
  background-color: #d14836; /* 호버 시 배경색 변경 */
}
.data-box {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
  cursor: pointer;
  background-color: white; /* 흰색 배경색 적용 */
  opacity: 1; /* 초기 투명도 */
  transition: opacity 0.5s ease-in-out; /* 투명도 변경 부드럽게 */
}
.data-box.hide {
opacity: 0; /* 숨김 상태로 투명도 0으로 설정 */
}
.estate-box {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer; /* 클릭 가능하도록 커서 설정 */
}
.sse-estate-box {
  border-color: #007bff; /* SSE 데이터 박스의 테두리 색상 변경 */
  background-color: #f0f0f0; /* SSE 데이터 박스의 배경색 변경 */
  font-weight: bold;
}
.image-container {
  float: right; /* 이미지를 오른쪽으로 플로팅 */
  margin-right: 80px; /* 오른쪽 여백 설정 */
  max-width: 35%; /* 최대 너비 설정 */
  margin-bottom: 20px; /* 이미지 아래 여백 추가 */
  clear: right; /* 이미지의 오른쪽을 모두 지워줌 */
}

.data-container {
  clear: right; /* 이미지 오른쪽을 모두 지워줌 */
}