/* =========================================
   1. 기본 레이아웃 및 폰트
   ========================================= */
body { margin: 0; display: flex; height: 100vh; font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; color: #333; }
.container { display: flex; width: 100%; }

/* 사이드바 */
.sidebar { width: 250px; background: #333; color: white; padding: 20px; display: flex; flex-direction: column; flex-shrink: 0; }
.sidebar .logo { text-align: center; margin-bottom: 30px; font-size: 24px; font-weight: bold; letter-spacing: 2px; }
.sidebar .logo a { color: #fff; text-decoration: none; }
.sidebar .logo a:hover { color: #ddd; }

.login-box { margin-bottom: 20px; border-bottom: 1px solid #555; padding-bottom: 20px; }
.login-box input { width: 100%; padding: 10px; margin-bottom: 5px; box-sizing: border-box; border: 1px solid #555; border-radius: 4px; background: #444; color: white; }
.login-box button { width: 100%; padding: 8px; background: #555; color: white; border: none; cursor: pointer; border-radius: 4px; }
.login-box button:hover { background: #666; }
.menu-list { display: flex; flex-direction: column; }
.menu-list a { color: #ccc; text-decoration: none; padding: 12px; border-bottom: 1px solid #444; display: block; transition: all 0.2s; }
.menu-list a.active, .menu-list a:hover { background: #007bff; color: white; font-weight: bold; border-radius: 4px; border-bottom: none; }

/* 컨텐츠 영역 */
.content { flex: 1; padding: 30px; overflow-y: auto; background: #f9f9f9; display: flex; flex-direction: column; }
.header-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 2px solid #ddd; padding-bottom: 10px; }

/* 버튼 공통 */
.btn-action { background: #007bff; color: white; border: none; padding: 8px 16px; cursor: pointer; border-radius: 4px; font-size: 14px; transition: background 0.2s; margin-right: 5px; }
.btn-action:hover { background: #0056b3; }
.btn-gray { background: #6c757d; }
.btn-gray:hover { background: #5a6268; }

/* 메시지 박스 */
.msg-box { padding: 15px; margin-bottom: 20px; border-radius: 5px; font-weight: bold; text-align: center; animation: fadein 0.5s; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.msg-box.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.msg-box.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.msg-box.warning { background-color: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
@keyframes fadein { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* 갤러리 그리드 */
.gallery-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.photo-item { position: relative; width: 150px; height: 150px; overflow: hidden; border: 1px solid #ddd; background: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.photo-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; cursor: pointer; }
.photo-item img:hover { transform: scale(1.1); }
.photo-item input[type="checkbox"] { position: absolute; top: 8px; left: 8px; transform: scale(1.5); z-index: 10; cursor: pointer; }

/* 페이지네이션 */
.pagination-wrapper { text-align: center; margin: 30px 0; }
.pagination { display: inline-block; }
.pagination a, .pagination span { display: inline-block; padding: 8px 14px; margin: 0 3px; border: 1px solid #ddd; text-decoration: none; color: #333; background: white; border-radius: 4px; font-size: 14px; }
.pagination a:hover { background: #f0f0f0; }
.pagination .active { background: #007bff; color: white; border-color: #007bff; }

/* 업로드 섹션 */
.upload-section { background: white; padding: 25px; border-radius: 8px; border: 1px solid #ddd; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.upload-wrapper { display: flex; flex-direction: column; gap: 15px; align-items: flex-start; }
#fileInput { display: none; }
.file-label { display: inline-block; padding: 12px 24px; background-color: #6c757d; color: white; border-radius: 5px; cursor: pointer; font-size: 15px; transition: background 0.2s; font-weight: bold; }
.file-label:hover { background-color: #5a6268; }
#fileNameDisplay { font-size: 14px; color: #666; margin-left: 5px; }
.btn-upload { background-color: #28a745; color: white; border: none; padding: 12px 30px; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold; transition: background 0.2s; }
.btn-upload:hover { background-color: #218838; }
.btn-upload:disabled { background-color: #e2e6ea; color: #adb5bd; cursor: not-allowed; border: 1px solid #dae0e5; }
.warning-box { color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; padding: 12px; border-radius: 5px; font-size: 14px; font-weight: bold; display: none; animation: shake 0.4s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } }

/* 업로드 리스트 */
.upload-list { list-style: none; padding: 0; margin: 0; border-top: 2px solid #eee; }
.upload-list li { padding: 10px; border-bottom: 1px solid #eee; display: flex; align-items: center; background: #fff; }
.upload-list .fname { margin-left: 10px; font-size: 14px; color: #333; }
.upload-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; margin-left: 10px; border: 1px solid #ddd; cursor: pointer; transition: transform 0.2s; }
.upload-thumb:hover { transform: scale(1.2); border-color: #007bff; }

/* 삭제 UI */
.del-wrapper { margin-left: 15px; display: inline-flex; align-items: center; }
.btn-del-init { background: #dc3545; color: white; border: none; padding: 5px 10px; border-radius: 3px; cursor: pointer; font-size: 12px; }
.btn-del-init:hover { background: #c82333; }
.del-confirm { display: inline-flex; align-items: center; gap: 5px; background: #fff3cd; padding: 3px 8px; border-radius: 4px; border: 1px solid #ffeeba; }
.del-msg { font-size: 12px; color: #856404; font-weight: bold; margin-right: 5px; }
.btn-yes { text-decoration: none; background: #dc3545; color: white; padding: 3px 8px; border-radius: 3px; font-size: 12px; }
.btn-no { background: #6c757d; color: white; border: none; padding: 3px 8px; border-radius: 3px; font-size: 12px; cursor: pointer; }

/* ★★★ 로그 페이지 탭 및 테이블 스타일 (신규) ★★★ */
.tab-container { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 2px solid #ddd; padding-bottom: 1px; }
.tab-btn { padding: 10px 20px; text-decoration: none; color: #555; background: #eee; border: 1px solid #ddd; border-bottom: none; border-radius: 5px 5px 0 0; font-weight: bold; }
.tab-btn:hover { background: #e0e0e0; }
.tab-btn.active { background: #fff; color: #007bff; border-bottom: 2px solid #fff; margin-bottom: -2px; }

.log-content { background: #fff; padding: 20px; border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.log-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.log-table th, .log-table td { padding: 10px; border-bottom: 1px solid #eee; text-align: center; }
.log-table th { background: #f8f9fa; font-weight: bold; color: #555; }
.log-table tr:hover { background: #f9f9f9; }

/* 모달 */
.modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.9); justify-content: center; align-items: center; flex-direction: column; }
.modal-content { max-width: 90%; max-height: 85%; box-shadow: 0 0 20px rgba(255,255,255,0.2); border: 2px solid white; border-radius: 4px; animation: zoom 0.3s; object-fit: contain; }
.close-txt { color: #f1f1f1; font-size: 16px; margin-bottom: 10px; font-weight: bold; cursor: pointer; }
@keyframes zoom { from {transform: scale(0.5); opacity: 0;} to {transform: scale(1); opacity: 1;} }