/* 전체 페이지 스타일 */
body,
html {
    margin: 0;
    padding: 0;
    height: 100vh;
    /* 브라우저 뷰포트의 높이로 설정 */
    width: 100%;
    /* 전체 너비로 설정 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('image\background.jpg.png');
    /* 배경 이미지 설정 */
    background-size: cover;
    /* 이미지가 body를 가득 채우도록 설정 */
    background-position: center;
    /* 중앙 정렬 */
    background-repeat: no-repeat;
    /* 반복 방지 */
    font-family: 'Noto Sans KR', sans-serif;
    /* Noto Sans KR 폰트 적용 */
}

/* 프로필 이미지 스타일 */
.profile-container {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ddd;
}

.profile-image img {
    width: 100%;
    border-radius: 50%;
}

/* 로그인 버튼 스타일 */
.login-button {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: #333;
    /* 버튼 배경색 */
    color: #fff;
    /* 버튼 텍스트 색상 */
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
    /* 폰트 설정 */
}

.login-button:hover {
    background-color: #555;
    /* 호버 시 배경색 */
}

/* 로그인 버튼 클릭 시 색상 변화 */
.login-button:active {
    background-color: #555;
}

/* 메인 콘텐츠 영역 */
.content {
    text-align: center;
    /* 중앙 정렬 */
    position: relative;
    /* 내용의 상대 위치 설정 */
    z-index: 1;
    /* 다른 요소들보다 위에 위치하게 함 */
}

/* 검색창 제목 스타일 */
.search-title {
    font-size: 32px;
    font-weight: bold;
    color: #333;
    margin-bottom: 150px;
    /* 제목과 검색창 간의 간격 설정 */
}

/* 검색바 컨테이너 스타일 */
.search-bar-container {
    border: 2px solid black;
    /* 검은색 테두리 */
    border-radius: 40px;
    /* 더 둥근 타원형 모양 */
    padding: 5px 30px;
    width: 90%;
    /* 전체 화면 대비 더 넓은 폭 */
    max-width: 1000px;
    /* 최대 폭 */
    background-color: #333;
    /* 어두운 배경색 */
}

/* 검색바 스타일 */
.search-bar {
    width: 100%;
    border: none;
    outline: none;
    padding: 15px;
    font-size: 18px;
    color: white;
    /* 텍스트를 하얀색으로 */
    background-color: transparent;
    /* 배경색 투명 */
    border-radius: 40px;
}

/* 플레이스홀더 스타일 */
.search-bar::placeholder {
    color: #bbb;
    /* 약간 밝은 회색으로 플레이스홀더 스타일 */
}

/* 프로필 이미지 스타일 추가 */
.profile-container {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ddd;
}

.profile-image img {
    width: 100%;
    border-radius: 50%;
}

/* 우측 상단에 프로필 컨테이너 배치 */
#loginButton,
#profileContainer {
    position: absolute;
    top: 20px;
    right: 20px;
}

/* 프로필 이미지 스타일 */
#profileImage img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

#profileContainer {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
}

#profileImage {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
}

#profileDropdown {
    display: none;
    position: absolute;
    top: 60px;
    /* 프로필 이미지 아래 */
    right: 0;
    width: 150px;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    z-index: 1000;
}

#profileDropdown a {
    padding: 10px;
    display: block;
    text-decoration: none;
    color: #333;
}

#profileDropdown a:hover {
    background-color: #f1f1f1;
}

/* 프로필 이미지 스타일 추가 */
#profileImage {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(221, 221, 221, 0.5); /* 반투명 배경 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 기본 프로필 이미지 */
#profileImage img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}