/* ====== 관리자 시스템 전체 스타일 ====== */
/* 
이 파일은 관리자 시스템의 모든 스타일을 정의합니다.
CSS는 웹페이지의 디자인과 레이아웃을 담당하는 언어입니다.
*/

/* ====== 기본 리셋 및 폰트 설정 ====== */
/* 
* (전체 선택자): 모든 HTML 요소에 적용되는 기본 스타일을 설정합니다.
margin: 0; - 요소들 사이의 바깥쪽 여백을 제거합니다
padding: 0; - 요소 내부의 안쪽 여백을 제거합니다  
box-sizing: border-box; - 요소의 크기 계산에 패딩과 테두리를 포함시킵니다
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 
html 요소: 웹페이지의 루트 요소에 대한 스타일을 설정합니다
font-size: 16px; - 기본 글자 크기를 16픽셀로 설정합니다
scroll-behavior: smooth; - 페이지 스크롤을 부드럽게 만듭니다
*/
html {
    font-size: 16px;
    scroll-behavior: smooth;
}

/* 
body 요소: 웹페이지의 본문에 대한 스타일을 설정합니다
font-family: - 글꼴을 설정합니다 (첫 번째가 없으면 다음 것을 사용)
background: linear-gradient - 배경을 파란색에서 보라색으로 그라데이션 설정
min-height: 100vh; - 최소 높이를 화면 전체 높이로 설정
color: #2d3748; - 글자 색상을 어두운 회색으로 설정
line-height: 1.6; - 줄 간격을 글자 크기의 1.6배로 설정
overflow-x: hidden; - 가로 스크롤바를 숨깁니다
*/
body {
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    color: #2d3748;
    line-height: 1.6;
    overflow-x: hidden;
}

/* ====== 헤더 스타일 ====== */
/* 
헤더는 웹페이지의 상단에 고정되어 있는 영역입니다.
사용자 정보와 주요 네비게이션 버튼들이 위치합니다.
*/
.header {
    background: rgba(255, 255, 255, 0.95); /* 반투명 흰색 배경 */
    backdrop-filter: blur(20px); /* 배경을 흐리게 만들어 글래스 효과 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 하단 테두리 */
    position: sticky; /* 스크롤 시 상단에 고정 */
    top: 0; /* 상단에서 0픽셀 위치에 고정 */
    z-index: 1000; /* 다른 요소들보다 위에 표시 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
}

/* 
헤더 내부의 내용을 담는 컨테이너입니다.
제목과 사용자 정보를 좌우로 배치합니다.
*/
.header-content {
    max-width: 1400px; /* 최대 너비 제한 */
    margin: 0 auto; /* 좌우 중앙 정렬 */
    padding: 1rem 2rem; /* 상하 1rem, 좌우 2rem 여백 */
    display: flex; /* 플렉스박스 레이아웃 사용 */
    justify-content: space-between; /* 자식 요소들을 좌우 끝으로 배치 */
    align-items: center; /* 세로 중앙 정렬 */
}

/* 
헤더의 제목 스타일입니다.
그라데이션 텍스트 효과를 적용합니다.
*/
.header h1 {
    font-size: 1.5rem; /* 글자 크기 */
    font-weight: 700; /* 글자 굵기 (굵게) */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 그라데이션 배경 */
    -webkit-background-clip: text; /* 웹킷 브라우저용 텍스트 클리핑 */
    -webkit-text-fill-color: transparent; /* 텍스트 색상을 투명하게 */
    background-clip: text; /* 배경을 텍스트 모양으로 잘라냄 */
    margin: 0; /* 여백 제거 */
}

/* 
사용자 정보를 담는 컨테이너입니다.
역할, 사용자명, 버튼들을 가로로 배치합니다.
*/
.user-info {
    display: flex; /* 플렉스박스 레이아웃 */
    align-items: center; /* 세로 중앙 정렬 */
    gap: 1rem; /* 요소들 사이의 간격 */
}

/* 
사용자의 역할을 표시하는 배지입니다.
관리자, 부관리자 등을 구분하여 표시합니다.
*/
.user-info .role {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 그라데이션 배경 */
    color: white; /* 글자 색상 */
    padding: 0.5rem 1rem; /* 상하 0.5rem, 좌우 1rem 여백 */
    border-radius: 50px; /* 둥근 모서리 (원형) */
    font-size: 0.75rem; /* 글자 크기 */
    font-weight: 600; /* 글자 굵기 */
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3); /* 그림자 효과 */
}

/* ====== 헤더 버튼 스타일 ====== */
/* 
헤더에 있는 모든 버튼들의 공통 스타일입니다.
DB 관리, 로그아웃 등의 버튼에 적용됩니다.
*/
.header .btn {
    padding: 0.5rem 1rem; /* 상하 0.5rem, 좌우 1rem 여백 */
    font-size: 0.875rem; /* 글자 크기 */
    font-weight: 600; /* 글자 굵기 */
    border-radius: 8px; /* 둥근 모서리 */
    text-decoration: none; /* 밑줄 제거 */
    transition: all 0.3s ease; /* 모든 변화를 0.3초 동안 부드럽게 */
    border: none; /* 테두리 제거 */
    cursor: pointer; /* 마우스 오버 시 포인터 커서 */
    display: inline-flex; /* 인라인 플렉스박스 */
    align-items: center; /* 세로 중앙 정렬 */
    gap: 0.5rem; /* 아이콘과 텍스트 사이 간격 */
}

/* 
주요 버튼 스타일 (DB 관리 버튼 등)
파란색 그라데이션 배경을 사용합니다.
*/
.header .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 파란색 그라데이션 */
    color: white; /* 흰색 글자 */
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3); /* 그림자 효과 */
}

/* 
주요 버튼에 마우스를 올렸을 때의 효과
위로 살짝 올라가고 그림자가 커집니다.
*/
.header .btn-primary:hover {
    transform: translateY(-2px); /* 위로 2픽셀 이동 */
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4); /* 그림자 확대 */
}

/* 
위험 버튼 스타일 (로그아웃 버튼 등)
빨간색 그라데이션 배경을 사용합니다.
*/
.header .btn-danger {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); /* 빨간색 그라데이션 */
    color: white; /* 흰색 글자 */
    box-shadow: 0 2px 10px rgba(255, 107, 107, 0.3); /* 그림자 효과 */
}

/* 
위험 버튼에 마우스를 올렸을 때의 효과
*/
.header .btn-danger:hover {
    transform: translateY(-2px); /* 위로 2픽셀 이동 */
    box-shadow: 0 4px 20px rgba(255, 107, 107, 0.4); /* 그림자 확대 */
}

/* 
보조 버튼 스타일 (내정보 수정 버튼 등)
투명한 배경에 테두리를 사용합니다.
*/
.header .btn-secondary {
    background: rgba(255, 255, 255, 0.1); /* 반투명 흰색 배경 */
    color: #667eea; /* 파란색 글자 */
    border: 1px solid rgba(102, 126, 234, 0.2); /* 파란색 테두리 */
}

/* 
보조 버튼에 마우스를 올렸을 때의 효과
*/
.header .btn-secondary:hover {
    background: rgba(102, 126, 234, 0.1); /* 배경색 변경 */
    transform: translateY(-2px); /* 위로 2픽셀 이동 */
}

/* ====== 네비게이션 바 스타일 ====== */
/* 
네비게이션 바는 헤더 아래에 위치하며,
주요 메뉴들(공고 관리, 후기 관리 등)을 포함합니다.
*/
.navbar {
    background: rgba(255, 255, 255, 0.95); /* 반투명 흰색 배경 */
    backdrop-filter: blur(20px); /* 배경 흐림 효과 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 하단 테두리 */
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
}

/* 
네비게이션 바의 내용을 담는 컨테이너입니다.
메뉴 목록과 햄버거 메뉴를 좌우로 배치합니다.
*/
.nav-container {
    max-width: 1400px; /* 최대 너비 제한 */
    margin: 0 auto; /* 좌우 중앙 정렬 */
    padding: 0 2rem; /* 좌우 2rem 여백 */
    display: flex; /* 플렉스박스 레이아웃 */
    justify-content: space-between; /* 자식 요소들을 좌우 끝으로 배치 */
    align-items: center; /* 세로 중앙 정렬 */
}

/* 
네비게이션 메뉴 목록입니다.
공고 관리, 후기 관리 등의 메뉴들을 가로로 배치합니다.
*/
.nav-menu {
    display: flex; /* 플렉스박스 레이아웃 */
    list-style: none; /* 목록 점 제거 */
    margin: 0; /* 기본 여백 제거 */
    padding: 0; /* 기본 패딩 제거 */
    gap: 0.5rem; /* 메뉴들 사이의 간격 */
}

/* 
개별 네비게이션 메뉴 아이템입니다.
*/
.nav-item {
    margin: 0; /* 기본 여백 제거 */
}

/* 
네비게이션 링크 스타일입니다.
각 메뉴 항목(공고 관리, 후기 관리 등)의 스타일을 정의합니다.
*/
.nav-link {
    display: flex; /* 플렉스박스 레이아웃 */
    align-items: center; /* 세로 중앙 정렬 */
    gap: 0.5rem; /* 아이콘과 텍스트 사이 간격 */
    padding: 1rem 1.5rem; /* 상하 1rem, 좌우 1.5rem 여백 */
    color: #4a5568; /* 글자 색상 (회색) */
    text-decoration: none; /* 밑줄 제거 */
    font-weight: 500; /* 글자 굵기 */
    transition: all 0.3s ease; /* 모든 변화를 0.3초 동안 부드럽게 */
    border-radius: 12px; /* 둥근 모서리 */
    position: relative; /* 상대 위치 설정 (가상 요소를 위한) */
    overflow: hidden; /* 넘치는 내용 숨김 */
}

/* 
네비게이션 링크의 배경 효과를 위한 가상 요소입니다.
::before는 요소의 앞에 내용을 추가하는 가상 선택자입니다.
*/
.nav-link::before {
    content: ''; /* 내용 없음 */
    position: absolute; /* 절대 위치 */
    top: 0; /* 상단에서 0픽셀 */
    left: -100%; /* 왼쪽에서 -100% (화면 밖에 숨김) */
    width: 100%; /* 전체 너비 */
    height: 100%; /* 전체 높이 */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 그라데이션 배경 */
    transition: left 0.3s ease; /* left 속성 변화를 0.3초 동안 부드럽게 */
    z-index: -1; /* 텍스트 뒤에 배치 */
}

/* 
마우스 오버나 활성 상태일 때 배경을 보이게 합니다.
left를 0으로 설정하여 배경이 나타나도록 합니다.
*/
.nav-link:hover::before,
.nav-link.active::before {
    left: 0; /* 왼쪽에서 0픽셀 (완전히 보임) */
}

/* 
마우스 오버나 활성 상태일 때의 텍스트 스타일입니다.
*/
.nav-link:hover,
.nav-link.active {
    color: white; /* 흰색 글자 */
    transform: translateY(-2px); /* 위로 2픽셀 이동 */
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3); /* 그림자 효과 */
}

/* ====== 햄버거 메뉴 ====== */
/* 
햄버거 메뉴는 모바일에서 네비게이션을 토글하는 버튼입니다.
세 개의 가로선으로 구성되어 있습니다.
*/
.hamburger {
    display: none; /* 기본적으로 숨김 (데스크톱에서는 보이지 않음) */
    flex-direction: column; /* 세로 방향으로 배치 */
    cursor: pointer; /* 마우스 오버 시 포인터 커서 */
    padding: 0.5rem; /* 모든 방향 0.5rem 여백 */
    border-radius: 8px; /* 둥근 모서리 */
    transition: all 0.3s ease; /* 모든 변화를 0.3초 동안 부드럽게 */
}

/* 
햄버거 메뉴에 마우스를 올렸을 때의 효과
*/
.hamburger:hover {
    background: rgba(102, 126, 234, 0.1); /* 연한 파란색 배경 */
}

/* 
햄버거 메뉴의 각 가로선(바) 스타일입니다.
*/
.bar {
    width: 25px; /* 너비 */
    height: 3px; /* 높이 */
    background: #667eea; /* 파란색 배경 */
    margin: 3px 0; /* 상하 3px 여백 */
    transition: 0.3s; /* 변화를 0.3초 동안 부드럽게 */
    border-radius: 2px; /* 둥근 모서리 */
}

/* ====== 햄버거 메뉴 활성화 상태 ====== */
/* 
햄버거 메뉴가 클릭되어 활성화되었을 때의 애니메이션입니다.
세 개의 가로선이 X 모양으로 변합니다.
*/

/* 
두 번째 가로선을 투명하게 만들어 숨깁니다.
*/
.hamburger.active .bar:nth-child(2) {
    opacity: 0; /* 투명도 0 (완전히 숨김) */
}

/* 
첫 번째 가로선을 아래로 이동시키고 45도 회전시켜 X의 위쪽 선을 만듭니다.
*/
.hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg); /* 아래로 8px 이동하고 45도 회전 */
}

/* 
세 번째 가로선을 위로 이동시키고 -45도 회전시켜 X의 아래쪽 선을 만듭니다.
*/
.hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg); /* 위로 8px 이동하고 -45도 회전 */
}

/* ====== 메인 컨테이너 ====== */
/* 
메인 컨테이너는 웹페이지의 주요 내용을 담는 영역입니다.
모든 카드와 폼들이 이 안에 배치됩니다.
*/
.container {
    max-width: 1400px; /* 최대 너비 제한 */
    margin: 2rem auto; /* 상하 2rem, 좌우 중앙 정렬 */
    padding: 0 2rem; /* 좌우 2rem 여백 */
}

/* ====== 카드 스타일 ====== */
/* 
카드는 정보를 담는 박스 형태의 컴포넌트입니다.
공고 등록 폼, 목록 등이 카드 형태로 표시됩니다.
*/
.card {
    background: rgba(255, 255, 255, 0.95); /* 반투명 흰색 배경 */
    backdrop-filter: blur(20px); /* 배경 흐림 효과 */
    border-radius: 20px; /* 둥근 모서리 */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* 테두리 */
    overflow: hidden; /* 넘치는 내용 숨김 */
    margin-bottom: 2rem; /* 하단 여백 */
    transition: all 0.3s ease; /* 모든 변화를 0.3초 동안 부드럽게 */
}

/* 
카드에 마우스를 올렸을 때의 효과입니다.
위로 살짝 올라가고 그림자가 커집니다.
*/
.card:hover {
    transform: translateY(-5px); /* 위로 5픽셀 이동 */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); /* 그림자 확대 */
}

/* 
카드의 헤더 부분입니다.
제목과 아이콘이 표시되는 영역입니다.
*/
.card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 그라데이션 배경 */
    color: white; /* 흰색 글자 */
    padding: 1.5rem 2rem; /* 상하 1.5rem, 좌우 2rem 여백 */
    font-weight: 700; /* 글자 굵기 (굵게) */
    font-size: 1.1rem; /* 글자 크기 */
    display: flex; /* 플렉스박스 레이아웃 */
    align-items: center; /* 세로 중앙 정렬 */
    gap: 0.5rem; /* 아이콘과 텍스트 사이 간격 */
}

/* 
카드의 본문 부분입니다.
폼이나 목록이 표시되는 영역입니다.
*/
.card-body {
    padding: 2rem; /* 모든 방향 2rem 여백 */
}

/* ====== 폼 스타일 ====== */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
    margin-bottom: 0.5rem;
  font-weight: 600;
    color: #2d3748;
    font-size: 0.9rem;
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group input[type="file"],
.form-group select,
.form-group textarea {
  width: 100%;
    padding: 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.8);
    color: #2d3748;
    transition: all 0.3s ease;
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-2px);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

/* ====== 버튼 스타일 ====== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
  border: none;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
  width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.btn-success {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(72, 187, 120, 0.3);
}

.btn-success:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(72, 187, 120, 0.4);
}

.btn-danger {
    background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(245, 101, 101, 0.3);
}

.btn-danger:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(245, 101, 101, 0.4);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #667eea;
    border: 2px solid rgba(102, 126, 234, 0.2);
    backdrop-filter: blur(10px);
}

.btn-secondary:hover {
    background: rgba(102, 126, 234, 0.1);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
}

/* ====== 메시지 스타일 ====== */
.success-message,
.error-message,
.warning-message,
.info-message {
    padding: 1rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-left: 4px solid;
    backdrop-filter: blur(10px);
}

.success-message {
    background: rgba(72, 187, 120, 0.1);
    color: #22543d;
    border-left-color: #48bb78;
}

.error-message {
    background: rgba(245, 101, 101, 0.1);
    color: #742a2a;
    border-left-color: #f56565;
}

.warning-message {
    background: rgba(237, 137, 54, 0.1);
    color: #744210;
    border-left-color: #ed8936;
}

.info-message {
    background: rgba(102, 126, 234, 0.1);
    color: #2a4365;
    border-left-color: #667eea;
}

/* ====== 테이블 스타일 ====== */
.admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
  overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-top: 1rem;
}

.admin-table th {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
    padding: 1rem;
    text-align: left;
    font-size: 0.9rem;
}

.admin-table td {
    padding: 1rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
    transition: all 0.3s ease;
}

.admin-table tr:hover td {
    background: rgba(102, 126, 234, 0.05);
}

.admin-table tr:last-child td {
  border-bottom: none;
}

/* ====== 모달 스타일 ====== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    z-index: 2000;
    animation: fadeIn 0.3s ease;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    padding: 2rem;
    border-radius: 20px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: slideIn 0.3s ease;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(102, 126, 234, 0.1);
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2d3748;
}

.close {
    font-size: 1.5rem;
    cursor: pointer;
    color: #a0aec0;
    transition: all 0.3s ease;
    width: 32px;
    height: 32px;
  display: flex;
  align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.close:hover {
    color: #f56565;
    background: rgba(245, 101, 101, 0.1);
    transform: rotate(90deg);
}

/* ====== 특별한 컴포넌트 스타일 ====== */

/* 별점 스타일 */
.rating-input {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.rating-input input[type="radio"] {
    display: none;
}

.rating-input label {
    font-size: 1.5rem;
    color: #e2e8f0;
  cursor: pointer;
    transition: all 0.3s ease;
}

.rating-input input[type="radio"]:checked ~ label,
.rating-input label:hover,
.rating-input label:hover ~ label {
    color: #fbbf24;
    transform: scale(1.2);
}

/* 기본적으로 5점이 선택된 상태로 표시 */
.rating-input input[type="radio"][value="5"]:checked ~ label,
.rating-input input[type="radio"][value="5"]:checked + label {
    color: #fbbf24;
}

/* 별점 기본 상태 - 모든 별을 노란색으로 */
.rating-input label {
    color: #fbbf24;
}

/* 선택되지 않은 별은 회색으로 */
.rating-input input[type="radio"]:not(:checked) ~ label {
    color: #e2e8f0;
}

/* 선택된 별과 그 이전 별들을 노란색으로 */
.rating-input input[type="radio"]:checked ~ label {
    color: #fbbf24;
}

/* 후기 카드 스타일 */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}

.review-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 0.8rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.review-content {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.review-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.review-right {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
}

.review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.review-user-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.review-user {
    font-weight: 600;
    color: #2d3748;
    font-size: 0.9rem;
}

.review-date {
    font-size: 0.8rem;
    color: #718096;
}

.review-rating {
    margin-bottom: 0.1rem;
}

.star {
    color: #f6e05e;
    font-size: 1.1rem;
}

.star.empty {
    color: #e2e8f0;
}

.review-text {
    color: #4a5568;
    line-height: 1.3;
    font-size: 0.9rem;
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.review-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.no-image {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #a0aec0;
    font-style: italic;
    background: rgba(160, 174, 192, 0.1);
    border-radius: 12px;
    font-size: 0.8rem;
}

.review-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(226, 232, 240, 0.5);
}

/* 공고 목록 스타일 */
.notice-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.notice-item {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.notice-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.notice-item.important {
    border-left: 4px solid #f56565;
    background: rgba(245, 101, 101, 0.05);
}

.notice-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.notice-title {
    font-weight: 600;
    color: #2d3748;
    font-size: 1.1rem;
    flex: 1;
}

.important-badge {
    background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

.notice-meta {
    font-size: 0.8rem;
    color: #718096;
    margin-bottom: 1rem;
}

.notice-content {
    color: #4a5568;
    line-height: 1.6;
}

.notice-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* 빈 상태 스타일 */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: #718096;
}

.empty-state h3 {
    margin-bottom: 1rem;
    color: #4a5568;
    font-size: 1.25rem;
}

/* ====== 애니메이션 ====== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -60%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* ====== 반응형 디자인 ====== */
@media (max-width: 1024px) {
    .container {
        padding: 0 1rem;
    }
    
    .header-content,
    .nav-container {
        padding: 1rem;
    }
    
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }
    
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 80px;
        flex-direction: column;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        border-radius: 0 0 20px 20px;
        z-index: 9999;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .nav-item {
        margin: 0;
    }
    
    .nav-link {
        padding: 1rem;
        border-radius: 0;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }
    
    .nav-link:hover {
        border-radius: 0;
    }
    
    .reviews-grid {
        grid-template-columns: 1fr;
    }
    
    .review-content {
        flex-direction: column;
        gap: 1rem;
    }
    
    .review-right {
        width: 100%;
        height: 200px;
        order: -1;
    }
    
    .notice-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .notice-actions {
        justify-content: center;
    }
    
    .modal-content {
        width: 95%;
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .header-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .user-info {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .card-body {
        padding: 1.5rem;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    .review-actions,
    .notice-actions {
        flex-direction: column;
    }
    
    /* 경고 메시지 모바일 최적화 */
    .warning-message,
    .error-message,
    .success-message,
    .info-message {
        word-wrap: break-word;
        word-break: keep-all;
        line-height: 1.5;
        font-size: 0.9rem;
    }
    
    /* 텍스트 줄바꿈 방지 */
    .warning-message strong,
    .error-message strong,
    .success-message strong,
    .info-message strong {
        white-space: nowrap;
    }
    
    /* 긴 텍스트 줄바꿈 허용 */
    .warning-message br,
    .error-message br,
    .success-message br,
    .info-message br {
        display: none;
    }
    
    /* 컨테이너 패딩 조정 */
    .container {
        padding: 0 1rem;
    }
    
    /* 카드 내부 텍스트 최적화 */
    .card-body p,
    .card-body div {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* ====== 푸터 스타일 ====== */
.footer {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 4rem;
    padding: 2rem 0;
    text-align: center;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.footer p {
    margin: 0;
    color: #667eea;
    font-weight: 500;
    font-size: 0.9rem;
}

/* ====== 스크롤바 스타일 ====== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
}

/* ====== 이미지 업로드 영역 스타일 ====== */
.image-upload-area {
    border: 2px dashed #cbd5e0;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    background: #f7fafc;
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-upload-area:hover {
    border-color: #667eea;
    background: #f0f4ff;
}

.image-upload-area.dragover {
    border-color: #667eea;
    background: #e6f3ff;
    transform: scale(1.02);
}

.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.upload-placeholder i {
    font-size: 3rem;
    color: #a0aec0;
    margin-bottom: 0.5rem;
}

.upload-placeholder p {
    margin: 0;
    color: #718096;
    font-size: 0.9rem;
    font-weight: 500;
}

.upload-placeholder .btn {
    margin: 0.25rem;
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
}

.image-preview {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-preview img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.remove-image {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e53e3e;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.remove-image:hover {
    background: #c53030;
    transform: scale(1.1);
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .image-upload-area {
        padding: 1.5rem;
        min-height: 150px;
    }
    
    .upload-placeholder i {
        font-size: 2rem;
    }
    
    .upload-placeholder p {
        font-size: 0.8rem;
    }
    
    .upload-placeholder .btn {
        font-size: 0.7rem;
        padding: 0.4rem 0.8rem;
    }
}

/* ====== 이미지 업로드 영역 스타일 ====== */
.image-upload-area {
    border: 2px dashed #cbd5e0;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    background: #f7fafc;
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-upload-area:hover {
    border-color: #667eea;
    background: #f0f4ff;
}

.image-upload-area.dragover {
    border-color: #667eea;
    background: #e6f3ff;
    transform: scale(1.02);
}

.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.upload-placeholder i {
    font-size: 3rem;
    color: #a0aec0;
    margin-bottom: 0.5rem;
}

.upload-placeholder p {
    margin: 0;
    color: #718096;
    font-size: 0.9rem;
    font-weight: 500;
}

.upload-placeholder .btn {
    margin: 0.25rem;
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
}

.image-preview {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-preview img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.remove-image {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e53e3e;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.remove-image:hover {
    background: #c53030;
    transform: scale(1.1);
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .image-upload-area {
        padding: 1.5rem;
        min-height: 150px;
    }
    
    .upload-placeholder i {
        font-size: 2rem;
    }
    
    .upload-placeholder p {
        font-size: 0.8rem;
    }
    
    .upload-placeholder .btn {
        font-size: 0.7rem;
        padding: 0.4rem 0.8rem;
    }
}