/* 메인 리디자인 CSS - 블랙+화이트 테마를 기반으로 한 전체 스타일 구성 */
/* 박스 모델 일관성 유지를 위한 전체 요소 초기화 */
*, *::before, *::after {
  box-sizing: border-box;
}

/* HTML 요소 기본 설정 (스크롤, 높이 등) */
html {
  overflow-y: auto;
}
/* body를 flex column으로 구성하여 푸터 하단 고정을 가능하게 함 */
html,
body {
  height: 100%;
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #000;
  color: #fff;
  line-height: 1.6;
}

/* body를 flex column으로 구성하여 푸터 하단 고정을 가능하게 함 */
body {
  display: flex;
  flex-direction: column;
}

/* 전체 페이지 래퍼 - 최소 높이 100vh 보장 */
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: 100%;
}

/* 콘텐츠를 가운데 정렬하고 최대 너비 지정 */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  flex: 1;
}

/* 헤더 */
.header {
  background-color: #111;
  border-bottom: 1px solid #333;
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0.3rem 0;
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px; /* 헤더 전체 높이 고정 */
}

.nav a {
  color: #ccc;
  text-decoration: none;
  margin-right: 1.5rem;
  position: relative;
  padding: 4px 0;
  transition: color 0.3s ease;
}

.nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: white;
  transition: width 0.3s ease;
}

.nav a:hover {
  color: #fff;
}

.nav a:hover::after {
  width: 100%;
}
.logo img {
  height: 50px;
  vertical-align: middle;
}
/* 메인 */
/* 메인 콘텐츠 영역 - 여백과 정렬 설정 */
.main {
  min-height: 75vh;
  padding: 2rem 1rem;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  flex: 1;
}
.board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px; /* 헤더 전체 높이 고정 */
}
.board-item-notice, .board-item{
	margin: 10px 0px;
}
/* 메인 콘텐츠 */
.main-title {
  font-size: 22px;
  color: #fff;
  text-align: center
}
h1, h2, h3, h4, h5, h6 {
	color: #fff;
	display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0
}
/* 폼(로그인, 회원가입 등) 공통 스타일 */
.form-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.form label {
  display: block;
  margin: 1rem 0 0.5rem;
}

.form input[type="text"],
.form input[type="password"],
.form input[type="email"] {
  width: 100%;
  padding: 0.6rem;
  background: #111;
  border: 1px solid #444;
  color: white;
  border-radius: 4px;
}

.form .email-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* 기본 버튼 스타일 정의 */
button {
  border: 1px solid #444;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 1rem;
  transition: background-color 0.3s, color 0.3s;
}

button:hover {
  background-color: #fff;
  color: #000;
}

/* 게시판 스타일 */
.board-container {
  width: 100%;
}

.board-section {
  margin: 1rem 0;
}

.board-title a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

.board-title a:hover {
  text-decoration: underline;
}

.meta {
  font-size: 0.9rem;
  color: #888;
}

.ccount {
  background: #fff;
  color: #000;
  font-size: 0.8rem;
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
  margin-left: 0.3rem;
}
/* 상세보기 */
.post-meta {
  font-size: 0.9rem;
  color: #999;
  margin-bottom: 3rem;
}
.post-content {
  background-color: #111;
  padding: 1.2rem;
  border: 1px solid #333;
  border-radius: 4px;
  color: white;
  white-space: pre-line; /* 줄바꿈과 공백 유지 */
}
.post-info {
  float : right;
  margin-bottom: 1rem;
}
.comment-header,
.comment-content {
  display: flex;
  background-color: #111;
  padding: 1.2rem;
  border: 1px solid #333;
  border-radius: 4px;
  color: white;
}

.comment-content {
  flex-direction: column;
  min-height: 50px;
  white-space: pre-line;
}
.comment-header {
  justify-content: space-between;  /* 왼쪽/오른쪽 끝 정렬 */
  align-items: center;
}
.button-container {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.paging {
  margin-top: 2rem;
  margin-bottom: 3rem;
  text-align: center;
  cursor: pointer;
  display: flex; /* 버튼들을 가로로 배치 */
  justify-content: center; /* 중앙 정렬 */
  gap: 1rem; /* 버튼 간 간격 */
  margin-top: 2rem;
  margin-bottom: 3rem;
}

/* 회원 정보 박스 */
.info-box {
  background: #111;
  padding: 1rem;
  border-radius: 5px;
  border: 1px solid #333;
}

/* 👍 좋아요 버튼 - 초록색 */
.likeButton,
.clikeButton,
.fclikeButton {
  background-color: #4caf50;
  color: white;
}

.likeButton:hover,
.clikeButton:hover,
.fclikeButton:hover {
  background-color: #388e3c;
  color: white;
}

/* 👎 싫어요 버튼 - 빨간색 */
.dislikeButton,
.cdislikeButton,
.fcdislikeButton {
  background-color: #f44336;
  color: white;
}

.dislikeButton:hover,
.cdislikeButton:hover,
.fcdislikeButton:hover {
  background-color: #d32f2f;
  color: white;
}

/* ✏️ 수정 버튼 - 파란색 */
#updateButton,
.cupdateButton,
.fcupdateButton {
  background-color: #2196f3;
  color: white;
}

#updateButton:hover,
.cupdateButton:hover,
.fcupdateButton:hover {
  background-color: #1976d2;
  color: white;
}

/* ❌ 삭제 버튼 - 회색 */
#deleteButton,
.cdeleteButton,
.fcdeleteButton {
  background-color: #9e9e9e;
  color: white;
}

#deleteButton:hover,
.cdeleteButton:hover,
.fcdeleteButton:hover {
  background-color: #757575;
  color: white;
}

/* 🚫 블라인드 버튼 - 주황색 */
#blindButton,
.cblindButton,
.fcblindButton {
  background-color: #ff9800;
  color: white;
}

#blindButton:hover,
.cblindButton:hover,
.fcblindButton:hover {
  background-color: #df7b00;
  color: white;
}

/* 댓글 목록 스타일 */
/* 댓글 목록 정렬 스타일 */
.comment-list {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 댓글 간 간격 */
  margin-bottom: 2rem;
}
.comment p {
  white-space: pre-wrap;
}
.comment-item {
  background-color: #111;
  padding: 1rem;
  border: 1px solid #333;
  border-radius: 4px;
  color: white;
}

.comment-item:hover {
  background-color: #222; /* 마우스를 올렸을 때 색상 변경 */;
}

.comment-item + .comment-item {
  border-top: 2px solid #444; /* 댓글 간 구분선 */;
}

/* 댓글 입력창 - 댓글 목록과 크기 맞추기 */
.comment-input-container {
  background-color: #111;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  width: 100%; /* 댓글 목록과 크기 맞추기 */;
}

.input-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.input-row input[type="text"],
.input-row input[type="password"],
.comment-input-container textarea {
  background-color: #000;
  border: 1px solid #444;
  color: #fff;
  padding: 0.6rem;
  border-radius: 4px;
  flex: 1;
  font-size: 1rem;
}

.comment-input-container textarea {
  background-color: #000;
  border: 1px solid #444;
  color: #fff;
  padding: 0.6rem;
  border-radius: 4px;
  width: 100%;
  resize: vertical;
  font-size: 1rem;
  box-sizing: border-box; /* ← 이 줄 추가! */;
}

.submit-button {
  text-align: right;
}

.paging button {
  background-color: #222;
  color: #fff;
  border: 1px solid #444;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s, color 0.3s;
}

.paging button:hover {
  background-color: #fff;
  color: #000;
}

/* 본문과 댓글 사이 구분선 + 여백 */
.post-to-comment-divider {
  border-top: 2px solid #444;
  margin: 0.5rem 0 0.5rem;
}

/* 로그인 전체 컨테이너 */
.login-container {
  background-color: #111;
  padding: 2rem;
  border: 1px solid #333;
  border-radius: 8px;
  max-width: 400px;
  margin: 3rem auto;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
}

/* 로그인 제목 */
.login-container h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #fff;
  font-size: 1.5rem;
}

/* 로그인 input 필드 */
.login-container input[type="text"],
.login-container input[type="password"] {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1.2rem;
  border: 1px solid #444;
  border-radius: 4px;
  background-color: #000;
  color: #fff;
  font-size: 1rem;
}
/* 아이디 저장 등 옵션 */
.login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: #ccc;
}

.login-options label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.login-options input[type="checkbox"] {
  accent-color: #2196f3;
}

/* 회원가입, 비밀번호 찾기 링크 */
.login-links {
  text-align: center;
  margin-top: 1rem;
}

.login-links a {
  color: #888;
  margin: 0 0.5rem;
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 0.3s;
}

.login-links a:hover {
  color: #fff;
  text-decoration: underline;
}

.login-container label {
  display: block;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #ccc;
}

/* 인풋 및 셀렉트 통일 */
.login-container input[type="text"],
.login-container input[type="password"],
.login-container select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #444;
  border-radius: 4px;
  background-color: #000;
  color: #fff;
  font-size: 1rem;
  box-sizing: border-box;
  margin-bottom: 0.8rem;
}

/* 이메일 입력 두 칸 나란히 */
.email-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.email-group input[type="text"] {
  flex: 1;
}

/* Toast Editor 위 제목 필드 */
input[type="text"]#btitle {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #444;
  border-radius: 4px;
  background-color: #000;
  color: #fff;
  font-size: 1rem;
  margin-bottom: 1.2rem;
  box-sizing: border-box;
}

/* 체크박스 영역 */
.checkbox-container {
  margin: 1rem 0 2rem;
  font-size: 0.95rem;
  color: #ccc;
}

.checkbox-container input[type="checkbox"] {
  accent-color: #2196f3;
  margin-right: 0.4rem;
  accent-color: #2196f3;
  margin-right: 0.5rem;
}

/* 읽기 전용 필드 시각적으로 구분 */
input.readonly[readonly] {
  background-color: #1a1a1a;
  color: #888;
  cursor: not-allowed;
}

/* 회원가입 버튼 */
.login-container button[type="submit"] {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 6px;
  background-color: #4caf50;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.login-container button[type="submit"]:hover {
  background-color: #327e36;
}
/* 폼(로그인, 회원가입 등) 공통 스타일 */
.form-container {
  background-color: #111;
  padding: 2rem;
  border: 1px solid #333;
  border-radius: 8px;
  max-width: 1200px;
  margin: 3rem auto;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
}
/* 파일 input */
input[type="file"] {
  background-color: #111;
  color: #ccc;
  padding: 0.6rem;
  border: 1px solid #444;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
}

/* textarea (내용 입력란) */
textarea {
  width: 100%;
  min-height: 150px;
  padding: 0.75rem;
  border: 1px solid #444;
  border-radius: 4px;
  background-color: #000;
  color: #fff;
  font-size: 1rem;
  resize: vertical;
  margin-bottom: 1rem;
  box-sizing: border-box;
}

/* 파일 선택 후 결과 출력 텍스트 */
#result {
  font-size: 0.9rem;
  color: #aaa;
  margin-bottom: 1rem;
}

/* 공지사항 체크박스 영역 */
.checkbox-container {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  color: #ccc;
}

button .action-button:hover {
  background-color: #1976d2;
}

input[type="text"]#title {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #444;
  border-radius: 4px;
  background-color: #000;
  color: #fff;
  font-size: 1rem;
  margin-bottom: 1.2rem;
  box-sizing: border-box;
}

.download-button {
  padding: 0.4rem 0.8rem;     /* 작게 */
  font-size: 0.9rem;          /* 글자 약간 줄임 */
  border-radius: 4px;         /* 모서리 둥글기 */
  background-color: #555;     /* 중간 회색 */
  color: #fff;
  border: 1px solid #777;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.download-button:hover {
  background-color: #fff;
  color: #000;
}
/* 모달 공통 스타일 */
#deleteCommentModal, #editCommentModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* 어두운 배경 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

/* 모달 내부 박스 */
.modal-content {
  background-color: #111;
  padding: 2rem;
  border-radius: 8px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
  color: white;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 인풋 사이 간격 */
}
.modal-content input[type="text"],
.modal-content input[type="password"],
.modal-content textarea {
  width: 100%;
  padding: 0.75rem;
  background-color: #000;
  border: 1px solid #444;
  color: #fff;
  border-radius: 4px;
  font-size: 1rem;
  box-sizing: border-box;
}

/* 닫기 버튼 스타일 */
.modal-content .close {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  background: none;
  border: none;
}
.modal-content .close:hover {
  color: #ff4444;
}

.progress-wrapper {
  width: 100%;
  background-color: #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  height: 20px;
  margin-top: 10px;
}

.progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(to right, #3a3a3a, #000);
  transition: width 0.3s ease;
}

#progressText {
  display: block;
  margin-top: 5px;
  font-size: 0.9rem;
  color: #555;
  text-align: right;
}
/* 햄버거 메뉴 버튼 기본 숨김 */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  width: 30px;
  height: 24px;
  gap: 5px;
}

.hamburger span {
  background-color: white;
  height: 3px;
  border-radius: 2px;
  transition: 0.3s;
}
/* 모바일 대응 (최대 768px 이하 화면) */
@media (max-width: 768px) {
  /* 로고 이미지 크기 조절 */
  .logo img {
    height: 50px;
  }
  
  .hamburger {
    display: flex;
  }
  /* nav 정렬: 세로 정렬 + 가운데 정렬 */
  .header .container {
    flex-direction: column;
    align-items: center;
    height: auto;
  }

  .nav {
    display: none;
    flex-direction: row;
    align-items: center;
    background-color: #111;
    width: 100%;
    flex: 1;
  }

  .nav.active {
    display: flex;
  }

  .nav a {
    margin: 0.5rem 0.5rem;
  }

  /* 본문 여백 조정 */
  .main {
    padding: 1rem 0.5rem;
  }

  /* 댓글 입력창도 반응형 여백으로 */
  .comment-input-container {
    padding: 1rem 0.5rem;
  }

  /* 푸터 패딩 줄이기 */
  footer {
    padding: 0.7rem 0.3rem;
  }

}
img {
  width: 100%;
  height: auto; /* 비율 유지 */
  display: block; /* inline 요소의 하단 여백 제거 */
}
/* 푸터 */
footer {
  background: #111;
  color: #aaa;
  text-align: center;
  padding: 0.5rem 0; /* 더 넉넉한 padding */
  width: 100%;
  font-size: 0.95rem; /* 글자 크기 약간 조정 */
  line-height: 1.5; /* 가독성 위한 줄 간격 추가 */;
}

/* 워터마크 - 수정하지 말 것 */
/* 워터마크 위치 및 투명도 설정 - 수정 금지 */
#divN {
  opacity: 0.3;
  width: 150px;
  height: 70px;
  position: fixed;
  left: 100%;
  top: 100%;
  margin-left: -150px;
  margin-top: -80px;
  font-weight: bold;
  font-size: 1.1rem;
}

#divN > h2 {
  color: #7afe4e;
  text-align: center;
}

#divN > h3 {
  color: #a50404;
  font-style: italic;
  text-align: center;
}

/* Toast UI Editor 스타일 */
.toastui-editor-md-container {
    background-color: #1e1e1e;
    color: #ffffff;
}
.toastui-editor-md-container .ProseMirror {
    color: #ffffff;
}
.toastui-editor-md-container .toastui-editor-md-splitter {
    background-color: #2d2d2d;
}
.toastui-editor-md-container .toastui-editor-md-preview {
    background-color: #1e1e1e;
    color: #ffffff;
}
.toastui-editor-md-container .toastui-editor-md-preview h1,
.toastui-editor-md-container .toastui-editor-md-preview h2,
.toastui-editor-md-container .toastui-editor-md-preview h3,
.toastui-editor-md-container .toastui-editor-md-preview h4,
.toastui-editor-md-container .toastui-editor-md-preview h5,
.toastui-editor-md-container .toastui-editor-md-preview h6 {
    color: #ffffff;
}
.toastui-editor-md-container .toastui-editor-md-preview p {
    color: #ffffff;
}
.toastui-editor-md-container .toastui-editor-md-preview code {
    background-color: #2d2d2d;
    color: #ffffff;
}
.toastui-editor-md-container .toastui-editor-md-preview blockquote {
    border-left-color: #4d4d4d;
    color: #ffffff;
}
.toastui-editor-md-container .toastui-editor-md-preview table th,
.toastui-editor-md-container .toastui-editor-md-preview table td {
    border-color: #4d4d4d;
    color: #ffffff;
}
.toastui-editor-md-container .toastui-editor-md-preview table tr:nth-child(2n) {
    background-color: #2d2d2d;
}

/* Toast UI Viewer 스타일 */
.toastui-editor-contents {
    color: #ffffff !important;
}

.toastui-editor-contents h1,
.toastui-editor-contents h2,
.toastui-editor-contents h3,
.toastui-editor-contents h4,
.toastui-editor-contents h5,
.toastui-editor-contents h6,
.toastui-editor-contents p,
.toastui-editor-contents blockquote,
.toastui-editor-contents pre,
.toastui-editor-contents code,
.toastui-editor-contents table,
.toastui-editor-contents th,
.toastui-editor-contents td,
.toastui-editor-contents ul,
.toastui-editor-contents ol,
.toastui-editor-contents li,
.toastui-editor-contents a {
    color: #ffffff !important;
}

.toastui-editor-contents blockquote {
    border-left-color: #ffffff !important;
}

.toastui-editor-contents code {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
}

.toastui-editor-contents pre {
    background-color: #2d2d2d !important;
}

.toastui-editor-contents table th,
.toastui-editor-contents table td {
    border-color: #ffffff !important;
}

.toastui-editor-contents a {
    color: #4a9eff !important;
}

.toastui-editor-contents a:hover {
    color: #6eb4ff !important;
}

/* Toast UI Viewer의 코드 블록 스타일 */
.toastui-editor-md-container .toastui-editor-md-preview pre {
    background-color: #2d2d2d;
    color: #ffffff;
}

.toastui-editor-md-container .toastui-editor-md-preview pre code {
    background-color: transparent;
    color: #ffffff;
}

/* Toast UI Viewer의 링크 스타일 */
.toastui-editor-md-container .toastui-editor-md-preview a {
    color: #4a9eff;
}

.toastui-editor-md-container .toastui-editor-md-preview a:hover {
    text-decoration: underline;
}

/* Toast UI Viewer의 본문 내용 스타일 */
.toastui-editor-md-container .toastui-editor-md-preview * {
    color: #ffffff;
}

.toastui-editor-md-container .toastui-editor-md-preview strong {
    color: #ffffff;
}

.toastui-editor-md-container .toastui-editor-md-preview em {
    color: #ffffff;
}

.toastui-editor-md-container .toastui-editor-md-preview ul,
.toastui-editor-md-container .toastui-editor-md-preview ol {
    color: #ffffff;
}

.toastui-editor-md-container .toastui-editor-md-preview li {
    color: #ffffff;
}

.toastui-editor-md-container .toastui-editor-md-preview hr {
    border-color: #4d4d4d;
}