/* 공통 스타일 */
* {
    margin: 0;
    padding: 0;
    /* box-sizing: border-box; */
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
}

img {
	border:0;
}

a {
    color: #0066cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* 레이아웃 */
#wrap {
    width: 987px;
    /* max-width: 987px; */
    margin: auto;
    /* background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
    min-height: 100vh;
}

#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #202D35;
    height: 67px;
    /* border-bottom: 1px solid #eee; */
}

#logo img {
    height: 52px;
}

#top_login {
    font-size: 14px;
}


.join-button, .my-info-button{
	position: relative; /* 툴팁을 위한 상대 위치 설정 */
	background-color: #1a1a1a; /* 버튼 배경색 (어두운 색) */
	color: white; /* 텍스트 색상 */
	border: 2px solid white; /* 흰색 외곽선 */
	border-radius: 25px; /* 둥근 모서리 */
	padding: 10px 20px; /* 버튼 내부 여백 */
	font-size: 16px; /* 텍스트 크기 */
	font-weight: bold; /* 텍스트 굵기 */
	text-align: center; /* 텍스트 정렬 */
	cursor: pointer; /* 마우스 커서를 포인터로 변경 */
	transition: all 0.3s ease; /* 호버 효과를 위한 부드러운 전환 */
  }
  
  .join-button:hover {
	background-color: white; /* 호버 시 배경색 변경 */
	color: #1a1a1a; /* 호버 시 텍스트 색상 변경 */
  }

  .my-info-button::after {
    content: '회원정보';
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    white-space: nowrap;
	}

	.my-info-button:hover::after {
		opacity: 1;
		visibility: visible;
	}

  .my-info-button:hover {
	background-color: white; /* 호버 시 배경색 변경 */
	color: #1a1a1a; /* 호버 시 텍스트 색상 변경 */
  }

/* 네비게이션 */
/* #menu {
    background-color: #202D35;
} */

.navbar {
    background-color: #202D35;
    padding: 15px 20px;
}

.nav-links {
	list-style: none; /* 불릿 제거 */
	display: flex; /* 가로 정렬 */
	justify-content: center; /* 중앙 정렬 */
	margin: 0;
	padding: 0;
}

.nav-item {
	color: #ffffff; /* 텍스트 색상 */
	font-size: 20px;
	font-weight: bold;
	margin: 0 40px; /* 각 메뉴 간격 */
	cursor: pointer; /* 클릭 가능 표시 */
	position: relative; /* 밑줄 위치 조정 */
}

.nav-item.active {
	color: #ffc107; /* 활성화된 메뉴 텍스트 색상 */
}

.nav-item.active::after {
	content: ""; /* 밑줄 생성 */
	position: absolute;
	bottom: -5px; /* 텍스트 아래에 위치 */
	left: 0;
	right: 0;
	height: 3px;
	background-color: #ffc107; /* 밑줄 색상 */
}


/* 콘텐츠 영역 */
#content {
    /* padding: 30px; */
    min-height: 500px;
}

/* 푸터 */
#footer {
    padding: 20px;
    background-color: #202D35;
    color: #fff;
    text-align: center;
    font-size: 14px;
}



/* 홈 화면 스타일 */
.home-container {
    max-width: 900px;
    margin: 0 auto;
}

.main-content {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin: 30px 0;
}

.board-preview {
    flex: 1;
    min-width: 300px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 20px;
}

.board-preview h3 {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.preview-item {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.preview-date {
    font-size: 12px;
    color: #999;
}

.preview-author {
    font-size: 12px;
    color: #666;
    margin-right: 10px;
}

.community-info {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 4px;
    margin-top: 30px;
}

/* 로그인 및 회원가입 스타일 */
.login-container {
    max-width: 420px;
    margin: 50px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    gap: 8px;
}

.form-group label {
    font-weight: bold;
    color: #333;
}

.form-group input {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.login-button, 
.register-button{
    padding: 12px;
    background-color: #202D35;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
}

.login-button:hover, 
.register-button:hover{
    background-color: #2c3e50;
}

/*user-info Styles*/
.user-info-container {
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Logout Button Specific Styles */
.logout-button {
    background-color: #f44336;
    color: white;
    border-color: #f44336;
}

.logout-button:hover {
    background-color: white;
    color: #f44336;
}

/* Modify Button Specific Styles */
.modify-info-container {
    max-width: 480px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.modify-button {
    background-color: #4CAF50;
    color: white;
    border-color: #4CAF50;
}

.modify-button:hover {
    background-color: white;
    color: #4CAF50;
}
/* span 스타일 (아이디, 이름) */
.info-item span {
    padding: 8px 12px;
    background-color: #f5f5f5;
    border-radius: 4px;
    color: #666;
    min-width: 200px;
    display: inline-block;
}

/*회원가입 페이지*/
.register-container{
    max-width: 500px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.info-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
    /* display: flex; */
}

.info-item label {
    width: 90px;
    font-size : 14px;
    font-weight: bold;
    color: #333;
    display: inline-block;
}

.info-item input {
    padding: 8px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.3s ease;
    width: 200px;
}

.info-item input:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.2);
}

/* 핸드폰 번호 input 스타일 */
.info-item input.hp {
    width: 80px;
    text-align: center;
}

/* 이메일 input 스타일 */
.info-item input[name="email1"],
.info-item input[name="email2"] {
    width: 140px;
}

.check-nick-button,
.check-id-button {
    padding: 8px 12px;
    background-color: #efefef;
    color: black;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}


/* Button Container */
#buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    flex-direction: column;
}

/* Common Button Styles */
.submit-register-button,
.reset-register-button,
.submit-modify-button,
.reset-modify-button {
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid;
    background-color: #202D35;
    color:white;
}


/* Button hover State */
.submit-register-button:hover,
.reset-register-button:hover,
.submit-modify-button:hover,
.reset-modify-butotn:hover {
    background-color: #2c3e50;
}


/*board Styles*/
.layout {
    display: flex;
    gap : 10px;
    /* flex-direction: column; */
    /* width: 100%; */
}

/* 왼쪽 메뉴 스타일 */
#col1 {
    flex: 0 0 150px;
    background-color: #f5f5f5;
    padding: 15px;
    border-right: 1px solid #ddd;
    height: auto;
}

#left_menu h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

#left_menu ul {
    list-style: none;
    padding: 0;
}

#left_menu ul li {
    margin-bottom: 10px;
}

#left_menu ul li a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
    transition: color 0.3s;
}

#left_menu ul li a:hover {
    color: orange;
}

/* 오른쪽 콘텐츠 스타일 */
#col2 {
    flex: 1;
    padding: 20px;
}

/* 제목 스타일 */
#title {
    max-width: 100%;
    /* height: 20px; */
    font-size : 22px;
    font-weight : bold;
    margin-bottom: 10px;
}

/* 검색 폼 스타일 */
#list_search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

#list_form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto; /* 오른쪽 정렬 */
}


#list_search select,
#list_search input[type="text"] {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

#list_search input[type="image"] {
    cursor: pointer;
}





#list_search5 button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

#list_search5 img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

#list_search5 button:hover img {
    transform: scale(1.1);
}



#list_top_title {
    display: flex;
    align-items: center;
    padding: 12px;
    background-color: #f8f9fa;
    border-top: 2px solid #333;
    border-bottom: 1px solid #ddd;
}

#list_top_title ul {
    list-style:none;
    display: flex;
    width: 100%;
    align-items: center;
}

#list_top_title li {
    color: #333;
    font-weight: bold;
    font-size: 14px;
}

#list_title1 { width: 5%; text-align: center;}      /* 번호 */
#list_title2 { width: 50%; padding-left: 40px;}     /* 제목 */
#list_title3 { width: 15%; text-align: center;}     /* 글쓴이 */
#list_title4 { width: 20%; text-align: center;}     /* 등록일 */
#list_title5 { width: 10%; text-align: center;}     /* 조회 */

/* List content styling */
#list_content {
    min-height: 300px;
}

#list_item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
}

#list_item:hover {
    background-color: #f8f9fa;
}

#list_item1 { 
    width: 5%; 
    text-align: center;
}

#list_item2 { 
    width: 50%;
    padding-left: 40px;
}

#list_item2 a {
    text-decoration: none;
    color: #333;
    transition: color 0.2s;
}

#list_item2 a:hover {
    color: #4CAF50;
}

#list_item3 { 
    width: 15%;
    text-align: center;
}

#list_item4 { 
    width: 20%;
    text-align: center;
    color: #666;
}

#list_item5 { 
    width: 10%;
    text-align: center;
    color: #666;
}

/* Pagination styling */
#page_bottom {
    display: flex;
    justify-content: center; /* 가운데 정렬 */
    align-items: center;
    gap: 10px; /* 버튼 간격 */
    margin-top: 10px; /* 위쪽 여백 */
    position: relative; /* 글쓰기 버튼을 절대 위치로 배치하기 위해 필요 */
}

#page_bottom button {
    padding: 6px 12px; /* 버튼 내부 여백 */
    border: 1px solid #ccc; /* 테두리 */
    border-radius: 4px; /* 둥근 모서리 */
    background-color: #f9f9f9; /* 배경색 */
    color: #333; /* 글자색 */
    cursor: pointer; /* 마우스 포인터 */
    transition: background-color 0.3s, color 0.3s; /* 호버 효과 */
}

#page_bottom button:hover {
    background-color: #007bff; /* 호버 시 배경색 */
    color: #fff; /* 호버 시 글자색 */
}

#page_bottom button.active {
    background-color: #007bff; /* 활성화된 버튼 배경색 */
    color: #fff; /* 활성화된 버튼 글자색 */
    font-weight: bold; /* 강조 */
    border-color: #0056b3; /* 활성화된 버튼 테두리 */
}

#page_bottom #write_button {
    position: absolute;
    right: 0; /* 오른쪽 정렬 */
    padding: 5px 16px; /* 버튼 내부 여백 */
    background-color: #333; /* 어두운 배경색 */
    color: #fff; /* 흰색 글자 */
    border: 1px solid #333; /* 테두리 */
    border-radius: 4px; /* 둥근 모서리 */
    cursor: pointer; /* 마우스 포인터 */
    transition: background-color 0.3s, color 0.3s; /* 호버 효과 */
}

#page_bottom #write_button:hover {
    /* 호버 시 #333보다 더 어두운 색 */
    background-color: #555; /* 호버 시 배경색 */
    border-color: #555; /* 호버 시 테두리 색상 */
    
}

.view-container {
    padding: 20px;
}

#view_title {
    border-bottom: 2px solid #ddd;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

#view_title .subject {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 10px;
}

#view_title .info {
    color: #666;
    font-size: 0.9em;
}

#view_title .info span {
    margin-right: 15px;
}

#view_content {
    min-height: 200px;
    line-height: 1.6;
    padding: 20px 0;
}

#view_buttons {
    margin-top: 20px;
    text-align: right;
}

#view_buttons button {
    padding: 8px 15px;
    margin-left: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.list_button {
    background-color: #6c757d;
    color: white;
}

.modify_button {
    background-color: #28a745;
    color: white;
}

.delete_button {
    background-color: #dc3545;
    color: white;
}



.write-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.board-write h2 {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #333;
    font-size: 24px;
}

.write-group {
    margin-bottom: 20px;
}

.write-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

.write-group input[type="text"] {
    width: 97%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.write-group textarea {
    width: 97%;
    height: 450px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    /* resize: vertical; */
    resize:none;
    font-size: 16px;
}

.write-group.file-upload {
    width: 97%;
    margin-bottom: 20px;
}

.file-row {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}

.file-row label {
    min-width: 80px;
    padding: 5px 12px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-right: none;
    border-radius: 4px 0 0 4px;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}

.file-row input[type="file"] {
    flex: 1;
    padding: 3px 10px;
    border: 1px solid #ddd;
    border-radius: 0 4px 4px 0;
    width: calc(100% - 80px); /* Subtract label width */
    box-sizing: border-box;
}

/* 호버 효과 추가 */
.file-row:hover label {
    background-color: #e0e0e0;
}

/* 파일 선택 버튼 스타일 개선 (선택사항) */
.file-row input[type="file"]::-webkit-file-upload-button {
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 4px 8px;
    cursor: pointer;
}


.button-group {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.button-group button {
    padding: 3px 20px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.submit-btn {
    background-color: #202D35;
    color: white;
}

.submit-btn:hover {
    background-color: #0e8ec5;
}

.cancel-btn {
    background-color: #7c1a13;
    color: white;
}

.cancel-btn:hover {
    background-color: #da190b;
}

.image-preview-container {
    flex: 1;
    padding: 3px 10px;
    border: 1px solid #ddd;
    border-radius: 0 4px 4px 0;
    width: calc(100% - 80px); /* Subtract label width */
    box-sizing: border-box;
}

.image-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.delete-image-btn {
    padding: 5px 10px;
    background-color: #ff4444;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.delete-image-btn:hover {
    background-color: #cc0000;
}


.content_info {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 4px;
}

.content_info .info-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
}

.content_info span {
    color: #666;
    font-size: 14px;
}






/* 댓글 섹션 */
/* 댓글 작성 폼 */
.comment-form {
    margin-top: 30px;
}

.comment-form .form-group {
    margin-bottom: 15px;
}

.comment-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.comment-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box;
    height: 80px; /* 고정된 높이 설정 */
    resize: none;  /* 사용자가 크기를 조절할 수 없도록 설정 */
}


.comment-form button {
    padding: 10px 15px;
    background-color: #202D35;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 20%;
}

.comment-form button:hover {
    background-color: #555;
}


/* 전체 댓글 박스 스타일 */
.comments{
    margin : 5px;
    padding: 10px;
}
.comment_box {
    border-bottom: 1px solid #e0e0e0;  /* 댓글 사이 구분선 */
    padding: 10px 0;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
}

/* 작성자 닉네임 스타일 */
#comment_nick_box {
    font-weight: bold;
    color: #333; /* 닉네임 색상 */
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

/* 댓글 텍스트 스타일 */
#comment_text_box {
    font-size: 15px;
    line-height: 1.5;
    color: #555;
    margin-bottom: 5px;
}

/* 댓글 작성 시간 스타일 */
#comment_date {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #999;
}

/* 댓글 닉네임, 텍스트, 시간 배치 */
.comment_box {
    display: flex;
    flex-direction: column;
}