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

/* 갤러리 기본 스타일 */
#record-wrapper { width: 100%; font-family: 'Noto Sans KR', sans-serif; margin: 30px 0; } 

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

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

/* 갤러리 그리드 */
.record-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; border-top: 4px solid #133773; padding-top: 20px; } 

.record-item { position: relative; overflow: hidden; border-radius: 8px; transition: transform 0.3s, box-shadow 0.3s; } 
.record-item:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } 

.record-image { position: relative; width: 100%; padding-top: 75%; overflow: hidden; background: #f5f5f5; } 
.record-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; } 
.record-item:hover .record-image img { transform: scale(1.1); } 

.record-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(19, 55, 115, 0.8); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; } 
.record-item:hover .record-overlay { opacity: 1; } 

.view-icon { color: #fff; } 
.view-icon svg { width: 40px; height: 40px; } 

.record-info { padding: 20px; background: #fff; border: 1px solid #eee; border-top: none; } 
.record-title { font-size: 1.6rem; font-weight: 600; color: #333; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 
.record-meta { display: flex; justify-content: space-between; font-size: 1.3rem; color: #999; } 

/* 데이터 없음 */
.no-data { text-align: center; padding: 100px 0; font-size: 1.6rem; color: #999; grid-column: 1 / -1; } 

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

/* 갤러리 상세보기 스타일 */
#record-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; } 

/* 이미지 갤러리 섹션 */
.image-record-section { padding: 40px 0; border-bottom: 1px solid #ddd; } 

.main-image-container { width: 100%; max-width: 900px; margin: 0 auto; } 
.main-image { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); cursor: pointer; transition: transform 0.3s; } 
.main-image:hover { transform: scale(1.02); } 

.thumbnail-container { display: flex; gap: 15px; margin-top: 30px; overflow-x: auto; padding: 10px 0; justify-content: center; } 
.thumbnail-item { flex: 0 0 auto; width: 120px; height: 120px; border-radius: 6px; overflow: hidden; cursor: pointer; border: 3px solid transparent; transition: all 0.3s; } 
.thumbnail-item:hover { border-color: #133773; transform: scale(1.05); } 
.thumbnail-item.active { border-color: #133773; } 
.thumbnail-item img { width: 100%; height: 100%; object-fit: cover; } 

/* 게시글 내용 */
.view-content { padding: 50px 30px; min-height: 200px; font-size: 1.6rem; line-height: 3; color: #333; 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); } 

/* 갤러리 글쓰기 스타일 */
#record-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; } 

/* 파일 업로드 영역 */
.file-upload-area { position: relative; } 
.file-upload-area input[type="file"] { display: none; } 
.file-label { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; border: 2px dashed #ddd; border-radius: 8px; background: #f8f9fa; cursor: pointer; transition: all 0.3s; } 
.file-label:hover { border-color: #133773; background: #f0f4ff; } 
.file-label svg { margin-bottom: 15px; color: #133773; } 
.file-label span { font-size: 1.5rem; color: #666; font-weight: 500; } 
.file-info { margin-top: 10px; font-size: 1.3rem; color: #999; } 
.file-label.drag-over { background-color: #f0f8ff; border: 2px dashed #007bff; color: #007bff; } 

/* 드래그 앤 드롭 영역 활성화 스타일 */
.file-label.drag-over { border-color: #133773; background-color: #f0f4ff; } 

/* 이미지 미리보기 */
.preview-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; margin-top: 20px; } 
.preview-item { position: relative; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: #fff; } 
.preview-item img { display:block; width: 100%; height: 150px; object-fit: cover; } 
.preview-filename { padding: 10px; font-size: 1.2rem; color: #666; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #f8f9fa; }
.preview-delete-btn {position: absolute; top: 5px; right: 5px; background: white; color: #133773; border: 1px solid #133733; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: bold; box-shadow: 0 2px 4px rgba(0,0,0,0.2); line-height: 1; z-index: 10;}
.preview-delete-btn:hover { background-color: #133773 !important; color: white !important; transition: all 0.2s ease; } 


/* 버튼 */
.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: 1024px){
 .record-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } 
 #record-wrapper .search-box input { width: 200px; } 
 .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; } 
 .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: 768px){
 .record-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; } 
 #record-wrapper .record-top { flex-direction: column; align-items: flex-start; gap: 15px; } 
 #record-wrapper .search-box { width: 100%; } 
 #record-wrapper .search-box input { flex: 1; width: auto; } 
 .record-title { font-size: 1.5rem; } 
 .record-meta { font-size: 1.2rem; } 
 
 #record-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: 200px; 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; } 
 
 .thumbnail-container { gap: 10px; } 
 .thumbnail-item { width: 80px; height: 80px; } 
 
 .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; } 
 .preview-container { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; } 
 .preview-item img { height: 100px; } 
 }

/* 반응형 - 작은 모바일 */
@media all and (max-width: 500px){
 .record-grid { grid-template-columns: 1fr; } 
 .record-title { font-size: 1.4rem; } 
 
 .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; } 
 
 .thumbnail-container { gap: 8px; } 
 .thumbnail-item { width: 60px; height: 60px; } 
 }

 /* 관리자 버튼 스타일 */
.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; } 

/* record_edit.php용 추가 스타일 */
/*.existing-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; margin-top: 20px; } 

.existing-file-item { position: relative; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; } 

.existing-file-item img { width: 100%; height: 150px; object-fit: cover; } 

.delete-file-btn { position: absolute; top: 5px; right: 5px; background: #f44336; color: white; border: none; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: 18px; line-height: 1; transition: background 0.3s; } 

.delete-file-btn:hover { background: #d32f2f; } */