/* --- 기본 (모바일) 스타일 --- */
.board-container {
  /* display: flex; 모바일에서는 flex를 사용하지 않고 세로로 쌓음 */
  flex-direction: column; 
  gap: 20px;
  width: 100%;
  padding: 0 15px; /* 모바일 좌우 여백 */
  margin: 20px auto 60px auto;
  box-sizing: border-box;
}

.board-content {
  width: 100%;
  padding: 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  box-sizing: border-box;
}

/* 비회원 정보 입력: 모바일에서는 위아래로 쌓음 */
.guest-info {
  display: flex;
  flex-direction: column; /* 세로로 쌓기 */
  gap: 12px;
  margin-bottom: 16px;
}
.guest-info input {
  width: 100%;
  padding: 10px;
  font-size: 14px;
}

/* 파일 첨부 */
.write-files input[type="file"] {
  display: block;
  margin-bottom: 12px;
}

/* 글쓰기 버튼 영역 */
.write-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* CKEditor 스타일 */
.ck-editor__editable {
  min-height: 300px;
  max-height: 300px;
  overflow-y: auto;
  resize: none;
  position: relative;
  scroll-behavior: smooth;
}


/* --- 태블릿/데스크톱 스타일 (768px보다 클 때) --- */
@media (min-width: 768px) {
  .board-container {
    display: flex; /* 데스크톱에서만 flex 사용 */
    flex-direction: row; /* 원래대로 가로 배치 */
    width: 1260px;
    padding: 0;
    margin: 30px auto 120px auto;
  }
  
  .board-content {
    width: 1010px;
  }
  
  /* 비회원 정보 입력: 데스크톱에서는 가로로 나란히 */
  .guest-info {
    flex-direction: row;
  }

.guest-info input {
  width: 100%;
  padding: 10px;
  font-size: 14px;
}

.modal.hidden {
  display: none;
}

.modal {
  /* 모달 스타일 */
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
}
}