/* docs/style.css */

/* --- 1. 초기화 및 기본 폰트 설정 --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-y: scroll; }
body { 
  font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif; 
  color: #333; 
  line-height: 1.6; 
  background-color: #f9f9f9; 
}
a { text-decoration: none; color: inherit; }
ul, li { list-style: none; }

/* --- 2. 헤더 (네비게이션) --- */
header { 
  background-color: #fff; 
  border-bottom: 1px solid #ddd; 
  position: sticky; top: 0; z-index: 1000; 
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
}

/* [수정] 헤더 컨테이너 너비 확장 */
.header-container { 
  max-width: 1600px; /* 1200px -> 1600px로 확장 */
  width: 95%;        /* 화면 꽉 차게 */
  margin: 0 auto; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  height: 80px; 
  padding: 0 20px; 
}

.logo a { 
  font-size: 1.5rem; 
  font-weight: 900; 
  color: #004098; 
  letter-spacing: -1px; 
  white-space: nowrap; /* [수정] 로고 줄바꿈 방지 */
}

/* 메뉴 리스트 컨테이너 */
nav { 
  display: flex; 
  align-items: center; 
  gap: 30px; /* [수정] 간격 조정 */
  flex-shrink: 0; /* 줄어들지 않도록 설정 */
}

nav > ul { 
  display: flex; 
  gap: 20px; /* [수정] 메뉴 간격 조정 */
  margin: 0;
  padding: 0;
}

/* 메뉴 아이템 스타일 */
nav > ul > li > a { 
  font-size: 1rem; /* [수정] 폰트 사이즈 미세 조정 */
  font-weight: 700; 
  color: #444; 
  padding: 25px 0; 
  display: flex;       /* 아이콘과 텍스트 가로 정렬 */
  align-items: center; /* 세로 중앙 정렬 */
  transition: color 0.3s; 
  white-space: nowrap; /* [수정] 텍스트 줄바꿈 방지 */
}
nav > ul > li:hover > a, 
nav > ul > li > a.active { color: #004098; }

/* 메뉴 아이콘 스타일 */
.menu-icon {
  width: 24px;       /* 텍스트 크기에 맞춰 조절 */
  height: auto;      /* 비율 유지 */
  margin-right: 8px; /* 텍스트와의 간격 */
  object-fit: contain;
}

/* [수정] 사용자 정보 및 로그아웃 버튼 */
.user-info-area { 
  display: flex; 
  align-items: center; 
  gap: 10px; /* [수정] 간격 조정 */
  font-size: 0.95rem; 
  color: #555; 
  margin-left: 15px; /* [수정] 여백 조정 */
  white-space: nowrap; /* [수정] 줄바꿈 방지 */
}

.user-name { 
  font-weight: bold; 
  color: #004098; 
  display: flex;
  align-items: center;
}

.divider { color: #ddd; }

.btn-logout { 
  padding: 6px 14px; 
  border: 1px solid #ddd; background: #fff; border-radius: 20px; 
  font-size: 0.85rem; cursor: pointer; transition: all 0.3s; color: #666; 
}
.btn-logout:hover { 
  background: #f1f1f1; color: #333; border-color: #bbb; 
}

/* --- 3. 배너 영역 --- */
/* 메인 페이지 큰 배너 */
.hero-section { 
  background: linear-gradient(rgba(0, 64, 152, 0.8), rgba(0, 64, 152, 0.6)), url('bg.jpg') no-repeat center center/cover; 
  height: 250px; 
  display: flex; flex-direction: column; justify-content: center; align-items: center; 
  text-align: center; color: #fff; 
}
.hero-section h2 { font-size: 3rem; margin-bottom: 20px; font-weight: 700; }
.hero-section p { font-size: 1.2rem; opacity: 0.9; }

/* 서브 페이지 띠 배너 */
.sub-banner { 
  background-color: #004098; 
  height: 120px; 
  display: flex; justify-content: center; align-items: center; 
  color: white; margin-bottom: 40px; 
}
.sub-banner h2 { font-size: 2.2rem; font-weight: 700; }

/* --- 4. 공통 레이아웃 --- */
.container { 
  max-width: 1200px; margin: 0 auto; 
  padding: 0 20px 60px; min-height: 500px; 
}
.content-header { 
  border-bottom: 2px solid #333; padding-bottom: 15px; margin-bottom: 30px; 
  display: flex; justify-content: space-between; align-items: flex-end; 
}
.content-header h3 { font-size: 1.8rem; color: #333; }
.content-header p { color: #666; font-size: 0.9rem; margin-bottom: 5px; }

/* --- 5. 버튼 및 입력 폼 스타일 --- */
.btn-upload { 
  background-color: #004098; color: white; border: none; 
  padding: 10px 20px; font-size: 1rem; border-radius: 4px; 
  cursor: pointer; font-weight: bold; transition: background 0.3s; 
}
.btn-upload:hover { background-color: #00337a; }

.upload-box { 
  background-color: #fff; padding: 40px; 
  border: 1px solid #ddd; border-radius: 8px; 
  margin-bottom: 40px; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
}

.input-group { margin-bottom: 15px; }
.input-group label { display: block; font-weight: bold; margin-bottom: 5px; }
.input-group input[type="text"], 
.input-group textarea, 
.resume-editor { 
  width: 100%; padding: 12px; 
  border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; 
}
.resume-editor { min-height: 400px; line-height: 1.6; resize: vertical; }

/* --- 6. 프로젝트 카드 스타일 --- */
.project-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px;
}
.project-card {
  background: white; border-radius: 8px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.3s;
  border: 1px solid #eee; cursor: pointer; position: relative;
}
.project-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.15); }
.img-wrapper { width: 100%; height: 200px; background-color: #f0f0f0; border-bottom: 1px solid #eee; }
.img-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 20px; text-align: center; }

/* 프로젝트 버튼 오른쪽 정렬 */
.card-actions {
  display: flex;
  justify-content: flex-end; /* 오른쪽 정렬 */
  gap: 10px;
  padding: 10px 15px 0;
  background: #fff;
}
.action-btn {
  cursor: pointer; color: #888; transition: color 0.3s;
}
.action-btn:hover { color: #004098; }
.action-btn.delete:hover { color: #e74c3c; }


/* --- 7. 라이브러리 카드 스타일 --- */
.lib-card {
  background: white;
  border: 1px solid #ddd; /* 테두리 */
  border-radius: 8px;
  padding: 25px;
  position: relative; /* 버튼 배치를 위해 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.lib-actions {
  position: absolute;
  top: 20px;
  right: 20px; /* 우상단 배치 */
  display: flex;
  gap: 10px;
}
.lib-date { font-size: 0.85rem; color: #999; margin-bottom: 5px; }
.lib-title { font-size: 1.2rem; color: #333; margin-bottom: 10px; font-weight: bold; }
.lib-text { color: #555; white-space: pre-wrap; }


/* --- 8. 게시판 스타일 --- */
.board-table { 
  width: 100%; border-collapse: collapse; 
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
}
.board-table th, .board-table td { 
  border-bottom: 1px solid #eee; padding: 15px; text-align: center; 
}
.board-table th { 
  background-color: #f8f9fa; color: #004098; 
  font-weight: bold; border-top: 2px solid #004098; 
}
.board-table td { color: #555; }
.board-table tr:hover { background-color: #fcfcfc; }
.board-title-link { cursor: pointer; color: #333; font-weight: bold; }
.board-title-link:hover { text-decoration: underline; color: #004098; }

/* 투표 컨테이너 */
.vote-container {
    display: flex; gap: 8px; justify-content: center;
}

/* 추천/비추천 버튼 스타일 */
.like-btn { 
  cursor: pointer; color: #3498db; /* 파란색 */
  border: 1px solid #3498db; background: white; 
  padding: 4px 10px; border-radius: 15px; 
  font-size: 0.85rem; transition: all 0.2s; 
}
.like-btn:hover { background: #3498db; color: white; }

.dislike-btn { 
  cursor: pointer; color: #e74c3c; /* 빨간색 */
  border: 1px solid #e74c3c; background: white; 
  padding: 4px 10px; border-radius: 15px; 
  font-size: 0.85rem; transition: all 0.2s; 
}
.dislike-btn:hover { background: #e74c3c; color: white; }

/* 게시판 상세 보기 모달 내용 */
.post-detail-content {
  min-height: 150px;
  padding: 20px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 20px;
  white-space: pre-wrap; /* 줄바꿈 유지 */
  color: #333;
  line-height: 1.6;
  font-size: 1rem;
}

/* 댓글 스타일 */
.comment-section {
  margin-top: 20px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}
.comment-list {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 15px;
}
.comment-item {
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.9rem;
}
.comment-author { font-weight: bold; color: #004098; margin-right: 5px; }
.comment-date { font-size: 0.8rem; color: #aaa; }
.comment-form { display: flex; gap: 10px; }
.comment-input { flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }


/* --- 9. 로그인 / 회원가입 --- */
.auth-container { 
  display: flex; justify-content: center; align-items: center; 
  height: 100vh; background-color: #f0f2f5; 
}
.auth-box { 
  background: white; padding: 40px; border-radius: 8px; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
  width: 400px; text-align: center; 
}
.auth-input { 
  width: 100%; padding: 12px; margin: 10px 0; 
  border: 1px solid #ddd; border-radius: 4px; 
}
.auth-btn { 
  width: 100%; padding: 12px; margin-top: 10px;
  background-color: #004098; color: white; 
  border: none; border-radius: 4px; 
  font-size: 1rem; cursor: pointer; font-weight: bold; 
}
.auth-link { display: block; margin-top: 15px; font-size: 0.9rem; color: #666; }

/* --- 10. 모달 (팝업) --- */
.modal-overlay { 
  display: none; position: fixed; top: 0; left: 0; 
  width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); 
  z-index: 2000; justify-content: center; align-items: center; 
}
.modal-overlay.open { display: flex; }
.modal-content { 
  background: white; padding: 30px; border-radius: 10px; 
  width: 90%; max-width: 600px; position: relative; 
  animation: slideDown 0.3s ease; 
}
@keyframes slideDown { 
  from { transform: translateY(-30px); opacity: 0; } 
  to { transform: translateY(0); opacity: 1; } 
}
.close-modal { 
  position: absolute; top: 15px; right: 20px; 
  font-size: 1.5rem; cursor: pointer; color: #999; 
}

/* --- 11. 푸터 --- */
footer { 
  background-color: #2c3e50; color: #ccc; 
  padding: 40px 0; margin-top: 60px; text-align: center; 
}