/* Pretendard 폰트 적용 및 기본 스타일 */
body {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    margin: 0;
    background-color: rgb(235, 235, 235); /* 사용자 지정 연한 회색 배경 */
    color: #1d1d1f; /* 사용자 지정 진한 회색 텍스트 */
    line-height: 1.6;
}

.container {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
}

/* style.css의 .main-nav 관련 스타일 수정/추가 */

/* --- 네비게이션 바 스타일 (업데이트 추가) --- */
.main-nav {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* padding 삭제 -> .nav-content 에서 처리 */
    height: 60px;
    display: flex; /* 내부 요소 정렬 */
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    width: 100%;
    box-sizing: border-box;
}
.main-nav .nav-content {
    display: flex;
    justify-content: space-between; /* 로고는 왼쪽, 메뉴는 오른쪽 */
    align-items: center;
    width: 100%; /* 컨테이너 너비 사용 */
    /* max-width: 1100px; /* container 너비와 동일하게 설정 */
    /* margin: 0 auto; /* 가운데 정렬 */
    /* padding: 0 20px; /* 좌우 여백 */
}
/* 로고 스타일 */
.main-nav .logo img {
    height: 35px; /* 로고 높이 지정 */
    width: auto; /* 너비는 비율에 맞게 자동 조절 */
    display: block; /* 이미지 하단 여백 제거 */
}

/* 네비게이션 링크 목록 (기존 ul 스타일 약간 수정) */
.main-nav ul { /* ID 선택자 명확히 */
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px; /* 메뉴 간격 */
}

.main-nav a:not(.logo) { /* 로고 링크 제외 */
    text-decoration: none;
    color: #1d1d1f;
    font-weight: 500;
    font-size: 1em;
    padding: 10px 0;
    position: relative;
    transition: color 0.2s ease;
}

.main-nav a:not(.logo):hover {
    color: #BF5B04;
}
/* 네비게이션 활성 링크 표시 */
.main-nav a:not(.logo).active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #BF5B04;
}

/* --- 헤더 스타일 --- */
header {
    text-align: center;
    margin-bottom: 40px;
    margin-top: 40px; /* 네비게이션 바 때문에 상단 여백 추가 */
}

header h1 {
    font-size: 2.5em;
    font-weight: 600;
    margin-bottom: 10px;
}

header p {
    font-size: 1.1em;
    color: #6e6e73; /* 사용자 지정 약간 연한 회색 */
}

/* --- 카테고리 네비게이션 (업데이트 적용) --- */
.category-nav {
    margin-top: 30px;
    display: flex; /* 버튼들을 가로로 배치 */
    justify-content: center; /* 가운데 정렬 */
    flex-wrap: wrap; /* 화면 작아지면 줄바꿈 */
    gap: 10px; /* 사용자 지정 margin 대신 gap 사용 */
}

.category-button {
    font-family: inherit;
    background-color: #f3efef; /* 사용자 지정 배경색 */
    border: none;
    padding: 10px 20px; /* 패딩 조정 */
    /* margin: 0 5px; 삭제 (gap 사용) */
    border-radius: 20px; /* 사용자 지정 둥근 모서리 */
    cursor: pointer;
    font-size: 1em; /* 크기 조정 */
    font-weight: 500;
    /* 사용자 지정 그림자 및 트랜지션 */
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 카테고리 버튼 호버 효과 (사용자 지정 스타일 적용) */
.category-button:hover {
    background-color: #e2e2e2; /* 사용자 지정 호버 배경색 */
    transform: translateY(-2px); /* 약간 더 위로 이동 (조정) */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); /* 사용자 지정 호버 그림자 */
}

/* 카테고리 버튼 활성 상태 (사용자 지정 스타일 적용) */
.category-button.active {
    background-color: #F2A81D; /* 사용자 지정 활성 배경색 */
    color: white;
    font-weight: 600; /* 활성 시 굵기 추가 */
    box-shadow: 0 2px 6px rgba(242, 168, 29, 0.4); /* 활성 색상 기반 그림자 */
}
/* 활성화된 버튼 호버 시 효과 (선택적) */
.category-button.active:hover {
     background-color: #d9971a; /* 사용자 지정 활성 배경색 약간 어둡게 */
     transform: translateY(0); /* 호버 시 이동 방지 */
    box-shadow: 0 2px 6px rgba(242, 168, 29, 0.4);
}

/* --- 서버 그리드 --- */
.server-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px; /* 간격 조정 */
}

/* --- 서버 카드 (업데이트 적용) --- */
.server-card {
    background-color: #ffffff;
    border-radius: 18px; /* 사용자 지정 둥근 모서리 */
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 사용자 지정 그림자 */
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex; /* 내부 요소 정렬 위해 flex 사용 */
    flex-direction: column; /* 세로 방향 배치 */
    text-decoration: none; /* 링크 밑줄 제거 (a 태그 사용 시) */
    color: inherit; /* 링크 색상 상속 */
    position: relative; /* 추천 배지 위치 기준 */
}

.server-card:hover {
    transform: translateY(-6px); /* 사용자 지정 호버 효과 (조정) */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); /* 사용자 지정 호버 그림자 (조정) */
}

.server-card-image {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

.server-card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.server-card-category {
    font-size: 0.8em;
    font-weight: 700; /* 굵기 조정 */
    color: #BF5B04; /* 사용자 지정 카테고리 색상 */
    margin-bottom: 8px; /* 간격 조정 */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.server-card-name {
    font-size: 1.3em;
    font-weight: 600;
    margin-bottom: 10px; /* 간격 조정 */
    color: #1d1d1f;
    line-height: 1.3;
}

.server-card-description {
    font-size: 0.95em;
    color: #6e6e73;
    line-height: 1.5; /* 줄간격 */
    margin-top: auto;
    /* 여러 줄 말줄임표 (사용자 지정 2줄) */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(1.5em * 2); /* 2줄 높이 확보 */
}

/* --- 추천 배지 스타일 (업데이트 추가) --- */
.recommend-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #BF5B04; /* 사용자 지정 카테고리 색상 활용 */
    color: white;
    font-size: 0.7em;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- 초대 버튼 스타일 (업데이트 추가) --- */
.button.invite-button {
    display: inline-block;
    background-color: #F2A81D; /* 사용자 지정 활성 색상 활용 */
    color: white;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600; /* 굵기 조정 */
    transition: background-color 0.2s ease, transform 0.1s ease;
    border: none;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 2px 6px rgba(242, 168, 29, 0.3); /* 버튼 그림자 */
}

.button.invite-button:hover {
    background-color: #d9971a; /* 사용자 지정 활성 색상 약간 어둡게 */
    transform: scale(1.03);
}

/* --- 결과 없음 메시지 스타일 (추가) --- */
.no-results {
    grid-column: 1 / -1; /* 그리드 전체 너비 차지 */
    text-align: center;
    color: #6e6e73;
    font-size: 1.1em;
    padding: 40px 20px;
}

/* style.css 에 추가 */

/* --- 푸터 스타일 --- */
.site-footer {
    background-color: #e0e0e0; /* 배경색 (기존 배경보다 약간 어둡게) */
    color: #6e6e73; /* 텍스트 색상 */
    padding: 30px 0;
    margin-top: 60px; /* 메인 콘텐츠와의 간격 */
    text-align: center;
    font-size: 0.9em;
    border-top: 1px solid #d1d1d1; /* 상단 구분선 */
}

.site-footer .container {
    max-width: 1100px; /* 컨테이너 너비 일치 */
    margin: 0 auto;
    padding: 0 20px;
}

.site-footer p {
    margin: 5px 0;
    line-height: 1.5;
}
/* --- 더 이상 사용되지 않는 모달 스타일은 여기서 제거됨 --- */