@charset "utf-8";html { font-size: 62.5% } 

/* 게시판 기본 스타일 */
#board-wrapper { width: 100%; font-family: 'Noto Sans KR', sans-serif; margin: 30px 0; } 

/* 상단 검색바 */
#board-wrapper .board-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; } 
#board-wrapper .board-top .total { font-size: 1.6rem; color: #666; } 
#board-wrapper .board-top .total span { color: #133773; font-weight: bold; } 

#board-wrapper .search-box { display: flex; border: 1px solid #ddd; padding: 5px; align-items: center; } 
#board-wrapper .search-box select { border: none; padding: 0 40px; border-right: 1px solid #ddd; outline: none; height: 40px; font-size: 1.6rem; } 
#board-wrapper .search-box input { border: none; padding: 0 15px; width: 350px; outline: none; font-size: 1.6rem; } 
#board-wrapper .search-box .search-btn { background: none; border: none; cursor: pointer; color: #333; padding: 5px 10px; } 
#board-wrapper .search-box .search-btn:hover { color: #133773; } 

/* 테이블 스타일 */
#board-wrapper .board-table { width: 100%; border-collapse: collapse; border-top: 4px solid #133773; border-left: none !important; border-right: none !important; border-bottom: 1px solid #eee; } 
#board-wrapper .board-table thead { background-color: #fff; } 
#board-wrapper .board-table th { padding: 25px 10px; border-bottom: 1px solid #eee; font-size: 1.6rem; font-weight: 700; color: #333; text-align: center; background-color: #fff; } 
#board-wrapper .board-table tbody tr { border-bottom: 1px solid #eee; transition: background-color 0.2s; } 
#board-wrapper .board-table tbody tr:hover { background-color: #f9f9f9; } 
#board-wrapper .board-table td { padding: 25px 10px; border-bottom: 1px solid #eee; text-align: center; color: #999; font-size: 1.6rem; border-left: none !important; border-right: none !important; } 
#board-wrapper .board-table td.tit { text-align: left; color: #333; padding-left: 20px; } 
#board-wrapper .board-table td.tit a { color: #333; text-decoration: none; transition: 0.3s; } 
#board-wrapper .board-table td.tit a:hover { color: #133773; } 
#board-wrapper .board-table th:nth-child(1) { width: auto; } 
#board-wrapper .board-table th:nth-child(2) { width: 15%; } 
#board-wrapper .board-table th:nth-child(3) { width: 10%; } 
/* #board-wrapper .board-table th:nth-child(4) { width: 10%; } */

/* 페이징 */
#board-wrapper .pagination { display: flex; justify-content: center; align-items: center; margin-top: 40px; gap: 30px; } 
#board-wrapper .pagination a { text-decoration: none; color: #999; font-size: 1.6rem; padding: 8px 12px; transition: all 0.3s; } 
#board-wrapper .pagination a.active { background-color: #133773; color: #fff; border-radius: 3px; } 
#board-wrapper .pagination a:hover:not(.active) { color: #333; font-weight: 600; } 

/* 글쓰기버튼 */
/*#board-wrapper .admin-menu { display: flex; margin-bottom: 20px; margin-top: -50px; justify-content: flex-end; } 
#board-wrapper .btn-write { padding: 20px 40px; background: #133773; color: #fff; text-decoration: none; font-size: 2rem; border-radius: 10px; } */

/* 반응형 - 태블릿 */
@media all and (max-width: 1024px){
 #board-wrapper .board-table th, #board-wrapper .board-table td { padding: 20px 8px; font-size: 1.5rem; } 
 #board-wrapper .search-box input { width: 200px; } 
 }

/* 반응형 - 모바일 */
@media all and (max-width: 768px){
 #board-wrapper .board-top { flex-direction: column; align-items: flex-start; gap: 15px; } 
 #board-wrapper .search-box { width: 100%; } 
 #board-wrapper .search-box input { flex: 1; width: auto; } 
 #board-wrapper .board-table th, #board-wrapper .board-table td { padding: 15px 5px; font-size: 1.4rem; } 
 
 /* 모바일에서 조회수 숨김 */
 #board-wrapper .board-table th:last-child, #board-wrapper .board-table td.hit { display: none; } 
 #board-wrapper .board-table td.date { font-size: 1.3rem; } 
 }

@media all and (max-width: 500px){
 #board-wrapper .board-table th, #board-wrapper .board-table td { padding: 12px 3px; font-size: 1.3rem; } 
 
 /* 모바일에서 페이징 축소 */
 #board-wrapper .pagination a { padding: 6px 10px; font-size: 1.4rem; } 

 /* 모바일에서 등록일 숨김 */
 /*#board-wrapper .board-table th:nth-child(3), #board-wrapper .board-table td.date { display: none; } */}


 /* 글쓰기 페이지 스타일 */
 #write-wrapper { width: 100%; margin: 30px 0 80px; } 
 .error-message { background-color: #ffe6e6; color: #d32f2f; padding: 15px; border-radius: 5px; margin-bottom: 20px; text-align: center; font-size: 1.5rem; } 
 .write-table { width: 100%; border-top: 4px solid #133773; } 
 .write-table table { width: 100%; border-collapse: collapse; } 
 .write-table th { background-color: #f8f9fa; padding: 20px; text-align: left; font-size: 1.6rem; font-weight: 600; color: #333; border-bottom: 1px solid #ddd; vertical-align: middle; } 
 .write-table td { padding: 20px; border-bottom: 1px solid #ddd; } 
 .write-table input[type="text"] { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 1.6rem; box-sizing: border-box; transition: border-color 0.3s; } 
 .write-table input[type="text"]:focus { outline: none; border-color: #133773; } 
 .write-table textarea { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 1.6rem; box-sizing: border-box; resize: vertical; font-family: 'Noto Sans KR', sans-serif; line-height: 1.6; transition: border-color 0.3s; } 
 .write-table textarea:focus { outline: none; border-color: #133773; } 
 .button-wrap { margin-top: 30px; text-align: center; display: flex; gap: 10px; justify-content: center; } 
 .btn-submit, .btn-cancel { padding: 15px 50px; font-size: 1.8rem; border: none; border-radius: 5px; cursor: pointer; transition: all 0.3s; text-decoration: none; display: inline-block; font-weight: 600; } 
 .btn-submit { background-color: #f5f5f5; color: #666; border: 1px solid #ddd; } 
 .btn-submit:hover { background-color: #133773; color: white; } 
 .btn-cancel { background-color: #f5f5f5; color: #666; border: 1px solid #ddd; } 
 .btn-cancel:hover { background-color: #133773; color: white; } 

 @media all and (max-width: 768px){
 .write-table th, .write-table td { padding: 15px; } 
 .write-table th { font-size: 1.5rem; } 
 .write-table input[type="text"], .write-table textarea { font-size: 1.5rem; padding: 10px 12px; } 
 .btn-submit, .btn-cancel { padding: 12px 40px; font-size: 1.6rem; } 
 }

 @media all and (max-width: 500px){
 .write-table table { display: block; } 
 .write-table tr { display: block; margin-bottom: 15px; } 
 .write-table th, .write-table td { display: block; width: 100%; padding: 10px; } 
 .write-table th { border-bottom: none; padding-bottom: 5px; } 
 .button-wrap { flex-direction: column; } 
 .btn-submit, .btn-cancel { width: 100%; padding: 15px; } 
 }

 /* 게시글 상세보기 스타일 */
 #view-wrapper { width: 100%; margin: 30px 0 80px; font-family: 'Noto Sans KR', sans-serif; } 

 /* 게시글 헤더 */
 .view-header { border-top: 4px solid #133773; border-bottom: 1px solid #ddd; padding: 30px 0; margin-bottom: 0; } 
 .view-title { font-size: 2.4rem; font-weight: 700; color: #333; margin-bottom: 20px; line-height: 1.5; } 
 .view-info { display: flex; gap: 30px; font-size: 1.5rem; color: #999; } 
 .info-item { display: flex; align-items: center; gap: 5px; } 

 /* 게시글 내용 */
 .view-content { padding: 50px 30px; min-height: 400px; font-size: 1.6rem; line-height: 3; color: #333; border-bottom: 1px solid #ddd; word-wrap: break-word; } 

 /* 네비게이션 */
 .view-navigation { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; gap: 20px; } 
 .nav-item { flex: 0; } 
 .nav-item .nav-list { flex: 0 0 auto; text-align: center; } 
 .nav-prev a, .nav-next a { display: flex; align-items: center; padding: 20px; background: #f8f9fa; border: 1px solid #ddd; border-radius: 8px; text-decoration: none; transition: all 0.3s; min-height: 80px; } 
 .nav-prev a:hover,.nav-next a:hover { background: #133773; border-color: #133773; } 
 .nav-prev a:hover .nav-icon, .nav-prev a:hover .nav-label, .nav-prev a:hover .nav-title, .nav-next a:hover .nav-icon, .nav-next a:hover .nav-label, .nav-next a:hover .nav-title { color: #fff; } 
 .nav-icon { font-size: 2rem; color: #133773; margin: 0 15px; transition: color 0.3s; } 
 .nav-text { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; } 
 .nav-label { font-size: 1.3rem; color: #999; font-weight: 600; transition: color 0.3s; } 
 .nav-title { font-size: 1.5rem; color: #333; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.3s; } 
 .nav-prev .nav-text { text-align: left; } 
 .nav-next .nav-text { text-align: right; } 
 .nav-empty { display: flex; align-items: center; padding: 20px; background: #f8f9fa; border: 1px solid #eee; border-radius: 8px; min-height: 80px; color: #ccc; } 
 .nav-icon-disabled { font-size: 2rem; color: #ccc; margin: 0 15px; } 
 .nav-empty .nav-label { font-size: 1.4rem; color: #ccc; } 
 .btn-list { display: inline-block; padding: 18px 60px; background: #133773; color: #fff; text-decoration: none; border-radius: 8px; font-size: 1.7rem; font-weight: 600; transition: all 0.3s; white-space: nowrap; } 
 .btn-list:hover { background: #0f2a5a; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(19, 55, 115, 0.3); } 

 /* 반응형 - 태블릿 */
 @media all and (max-width: 1024px){
 .view-title { font-size: 2.2rem; } 
 .view-content { padding: 40px 20px; font-size: 1.5rem; } 
 .nav-title { font-size: 1.4rem; } 
 .btn-list { padding: 15px 50px; font-size: 1.6rem; } 
 }

 /* 반응형 - 모바일 */
 @media all and (max-width: 768px){
 #view-wrapper { margin: 20px 0 60px; } 
 .view-header { padding: 20px 0; } 
 .view-title { font-size: 2rem; margin-bottom: 15px; } 
 .view-info { flex-direction: column; gap: 10px; font-size: 1.4rem; } 
 .view-content { padding: 30px 15px; min-height: 300px; font-size: 1.5rem; } 
 .view-navigation { flex-direction: column; gap: 15px; margin-top: 30px; } 
 .nav-item { width: 100%; } 
 .nav-item.nav-list { order: 3; } 
 .nav-item.nav-prev { order: 1; } 
 .nav-item.nav-next { order: 2; } 
 .nav-prev a, .nav-next a, .nav-empty { padding: 15px; min-height: 70px; } 
 .nav-icon { font-size: 1.8rem; margin: 0 10px; } 
 .nav-label { font-size: 1.2rem; } 
 .nav-title { font-size: 1.4rem; } 
 .btn-list { width: 100%; padding: 15px 20px; font-size: 1.6rem; text-align: center; } 
 }

 /* 반응형 - 작은 모바일 */
 @media all and (max-width: 500px){
 .view-title { font-size: 1.8rem; } 
 .view-info { font-size: 1.3rem; } 
 .view-content { padding: 20px 10px; font-size: 1.4rem; } 
 .nav-prev a, .nav-next a, .nav-empty { padding: 12px; min-height: 60px; } 
 .nav-icon { font-size: 1.6rem; margin: 0 8px; } 
 .nav-icon-disabled { font-size: 1.6rem; margin: 0 8px; } 
 .nav-label { font-size: 1.1rem; } 
 .nav-title { font-size: 1.3rem; } 
 .btn-list { padding: 12px 20px; font-size: 1.5rem; } 
 }

 /* 관리자 버튼 스타일 */
.admin-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #e0e0e0; } 

.btn-write,
.btn-logout,
.btn-edit,
.btn-delete { padding: 20px 54px; border: none; border-radius: 10px; font-size: 1.6rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-block; background: #0f2a5a; } 

.btn-write { background-color: #757575; color: white; } 

.btn-write:hover { background-color: #133773; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(19, 55, 115, 0.3); } 

.btn-logout { background-color: #757575; color: white; } 

.btn-logout:hover { background-color: #133773; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(19, 55, 115, 0.3); } 

.btn-edit { background-color: #757575; color: white; } 

.btn-edit:hover { background-color: #133773; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(19, 55, 115, 0.3); } 

.btn-delete { background-color: #757575; color: white; } 

.btn-delete:hover { background-color: #133773; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(19, 55, 115, 0.3);; } 

/* 상세보기 페이지의 관리자 버튼 */
#view-wrapper .admin-buttons { margin-top: 30px; margin-bottom: 20px; justify-content: center; } 

/* 반응형 디자인 */
@media screen and (max-width: 768px){
 .admin-buttons { flex-direction: column; gap: 8px; } 
 
 .btn-write,
 .btn-logout,
 .btn-edit,
 .btn-delete { width: 100%; text-align: center; } 
 }

/* 에러 메시지 스타일 */
.error-message { background-color: #ffebee; color: #c62828; padding: 12px 16px; border-radius: 4px; margin-bottom: 20px; border-left: 4px solid #f44336; }