/* 배경 스타일 */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif;
	scrollbar-color: #B3CDF0 #e3f2fd;
    scrollbar-width: thin;
}

/* 스크롤바 전체 스타일 */
::-webkit-scrollbar {
    width: 10px; 
    height: 10px; 
}

/* 스크롤바 트랙 (배경) */
::-webkit-scrollbar-track {
    background: #e3f2fd; 
    border-radius: 5px; 
}

/* 스크롤바 핸들 (움직이는 부분) */
::-webkit-scrollbar-thumb {
    background: #B3CDF0; 
    border-radius: 5px; 
    border: 2px solid #e3f2fd; 
}

/* 스크롤바 핸들에 호버 효과 */
::-webkit-scrollbar-thumb:hover {
    background: #fff; 
}

/* Top 버튼 스타일 */
#top-button {
    position: fixed; /* 화면의 고정 위치 */
    bottom:20px; /* 아래쪽 간격 */
    right: 20px; /* 오른쪽 간격 */
    background-color: #fff; /* 버튼 배경색 */
    color: #B3CDF0; /* 버튼 텍스트 색상 */
    border: 7px solid #B3CDF0;
    border-radius: 50%; /* 둥근 버튼 */
    width: 50px; /* 버튼 크기 */
    height: 50px;
    font-size: 10px; /* 글자 크기 */
	font-weight: bold;
    cursor: pointer; /* 클릭 가능 커서 */
    opacity: 0; /* 기본 상태에서 숨김 */
    visibility: hidden; /* 기본적으로 보이지 않음 */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* 부드러운 전환 효과 */
}

/* Top 버튼 보이기 */
#top-button.show {
    opacity: 1;
    visibility: visible;
}

.animated-background {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, #fdfbfb, #e2e2e2, #b3cdf0, #e9eff6);
    background-size: 400% 400%;
    animation: gradientAnimation 8s ease infinite;
}

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 헤더 스타일 */

header {
    width: 100%;
    display: flex;
    justify-content: center;
    margin:0;
	z-index: 10;
}

.centered-header {
    width: 100%;
    display: flex;
    justify-content: center; 
    margin-top: 70px;
}

.header-container {
    width: 900px; 
    max-width: 90%;
    background-color: #B3CDF0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-radius: 6px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 동그라미 그룹 */
.circle-group {
    display: flex;
    gap: 7px; /* 동그라미 간격 */
}

.circle {
    width: 8px;
    height: 8px;
    background-color: #e1efff;
    border-radius: 50%;
}

.close-icon {
    font-size: 20px;
    color: #e1efff;
    cursor: pointer;
	font-weight: 700;
}

/* 메인 컨테이너 */
main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* 큰 박스 스타일 */
.large-box {
	z-index: 1;
    width: 890px; /* 기본 너비 */
    max-width: 90%; /* 모바일 화면에서는 90% */
    background-color: white;
    border: 2px solid #d9e7f9;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
	margin-top: -40px; 
	justify-content: center;
	background-image: url('/css/images/bg.jpg'); 
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat; 
}


/* 메인 레이아웃 */
.two-column-layout {
    display: flex;
    justify-content: space-between;
    width: 90%;
	height: 500px;
    gap: 40px;
	padding : 50px 50px 70px 20px;
}

/* 왼쪽 세로열 */
.left-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    flex: 1;
	
}

/* 프로필 섹션 */
.profile-section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.profile-image {
    width: 150px;
    height: 150px;
    border: 7px solid #B3CDF0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #5c85b5;
    text-align: center;
	background-image: url('/css/images/pro.jpg');
	background-size: cover;
	background-position: center;
}

.profile-image:hover {
    border: 7px solid #ECECEC;
}



/* 타이틀 영역 */
.title-section {
    display: block; 
    justify-content: center;
    align-items: center;
    width: 100%;
	margin-top: -30px;
}

.title-section h1 {
    font-family: "Merriweather", serif;
    font-weight: 900;
    font-style: italic; 
	font-size: 30px;
	line-height: 0.9;
    text-align: center; 
    background: linear-gradient(to right, #B3CDF0, #C7EBFF); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    margin: 20px 0; 
    padding: 10px 20px; 
	transition: transform 0.3s ease, color 0.3s ease; 
	letter-spacing: -0.5px;
}

.title-section h1:hover {
    transform: scale(1.1); 
}

h2 {
    display: block; /* 기본 블록 요소로 강제 */
    margin: 0; /* 불필요한 여백 제거 */
	font-size: 10px;
	text-align: center;
	color: #C9C9C9;
	font-family: roboto;
	font-weight: 700;
}


/* 오른쪽 세로열 */
.right-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 2;
}

.menu-area, .empty-box {
    width: 100%;
    background-color: #f9f9f9;
    border: 1px solid #d9e7f9;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    font-size: 1rem;
    color: #5c85b5;
}



/* 텍스트 영역 */
.text-area {
    width: 100%;
	height: 70px;
    background-color: transparent;
    border: none;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    font-size: 1rem;
    color: #5c85b5;
	margin-left: 10px;
	margin-top:50px;
}

.text-area a {
	text-decoration: none;
	padding: 10px 20px;
	font-weight: 700;
	color: #fff;
	background-color: #bbd4ef;
	transition: all 0.3s ease;
	border: 4px solid #ddeaf7;
	border-radius: 8px;
}

.text-area a:hover {
	background-color: #f4f7fa;
	text-decoration: none;
	padding: 10px 20px;
	font-weight: 700;
	color: #bbd4ef;
	border: 4px solid #bbd4ef;
}


.embedded-content {
    width: 100%;
    height: 100%;
    border: none;
}

/* 메뉴 영역 */
.menu-area {
    width: 100%;
    padding: 20px;
    text-align: center;
    font-size: 10px;
    color: #5c85b5;
}

/* 메뉴 리스트 스타일 */
.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;
	align-items: center;
	gap: 20px;
}

.menu-item {
    position: relative;
    cursor: pointer;
    padding: 10px 20px;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.menu-item:hover {
    background-color: #d9e7f9;
    color: #ffffff;
}

.menu-item a {
            text-decoration: none;
            color: inherit;
            
            transition: color 0.3s ease;
        }

        .menu-item a:hover {
            color: #fff;
			font-weight: 700;
			text-decoration: line-through;
        }

/* 실선 추가 */
.menu-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -25px; /* 실선 위치 */
    top: 50%;
    transform: translateY(-50%);
    width: 1px; /* 실선 너비 */
    height: 70%; /* 실선 높이 */
    background-color: #d9e7f9; /* 실선 색상 */
}

.menu-item:hover {
    background-color: #d9e7f9;
    color: #ffffff;
}



/* sns 메뉴 리스트 스타일 */
.menu-list2 {
    list-style: none;
    padding: 0;
    margin: 20px;
    display: flex;
    justify-content: space-around;
	align-items: center;
	gap: 20px;
	font-size: 10px;
	font-weight: 700;
	color: #B3CDF0;
}

.menu-item2 {
    position: relative;
    cursor: pointer;
    padding: 10px 20px;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.menu-item2:hover {
    background-color: #d9e7f9;
    color: #ffffff;
	font-size: 10px;
}

.menu-item2 a {
            text-decoration: none;
            color: inherit;
            font-size: 10px;
            transition: color 0.3s ease;
        }

        .menu-item2 a:hover {
            color: #fff;
			font-weight: 700;
			text-decoration: line-through;
			font-size: 10px;
        }

/* 실선 추가 */
.menu-item2:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -15px; /* 실선 위치 */
    top: 50%;
    transform: translateY(-50%);
    width: 1px; /* 실선 너비 */
    height: 50%; /* 실선 높이 */
    background-color: #d9e7f9; /* 실선 색상 */
}

.menu-item2:hover {
    background-color: #d9e7f9;
    color: #ffffff;
}



/* 드롭다운 메뉴 숨기기 */
.dropdown-menu {
	list-style-type: disc;
    padding: 10px 0;
    margin: 0;
    position: absolute;
    top: 100%; /* 부모 메뉴 바로 아래 */
    left: 0;
    background-color: #fff;
    border: 6px solid #d9e7f9;
    display: none; /* 기본 상태에서 숨김 */
    z-index: 10;
    width: 150px;
	font-family: roboto;
}

.dropdown-item {
	list-style-position: inside;
    padding: 10px 15px;
    text-align: left;
    color: #5c85b5;
	font-size: 9px;
	font-weight: 500;
    transition: background-color 0.3s ease;
	font-family: roboto;
}

.dropdown-item:not(:last-child) {
    border-bottom: 1px solid #d9e7f9; /* 실선 색상 */
}

.dropdown-item:hover {
    background-color: #d9e7f9;
    color: #ffffff;
	font-weight: 700;
	text-decoration: line-through;
}

/* 드롭다운 보이기 */
.dropdown:hover .dropdown-menu {
    display: block; /* 드롭다운 메뉴 표시 */
}

/* 빈 공간 박스 */
.empty-box {
    width: 100%;
    background-color: #f5faff;
    border: 1px solid #d9e7f9;
    border-radius: 8px;
    padding: 20px;
    font-size: 10px;
    color: #989898;
	text-align: left;
	margin-bottom: 200px;
}

@media screen and (max-width: 768px) {
	
	
	.centered-header {margin-top: 230px;
}
	
        .animated-background {
        min-height: 100vh; /* 배경 높이를 화면 크기에 맞춤 */
    }
	
	
	header {
	width: 95%;

}
	
	.centered-header {
   		width: 95%;
		visibility: visible;
	}
	
    .large-box {
        width: auto; 
        max-width: 87%; 
        padding: 10px; 
		margin-top:-10px;
		height: 800px;
		margin-bottom: 120px;
    }
	
    .two-column-layout {
        flex-direction: column; 
        gap: 20px; 
        padding : 20px;
		height: 700px;

    }

    .left-column, .right-column {
        flex: none; /* 열 너비를 고정 */
        width: 90%; /* 화면에 맞게 넓이 조정 */
    }
	
	.left-column {
		margin-top: -20px;
	}
	
.menu-item:not(:last-child)::after {
    right: -15px; /* 실선 위치 */

}
	
	.profile-section,
    .title-section {
        margin-left: 25px; 
    }
	
	.empty-box {
	margin-bottom: 120px;
}

	
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #1e1e1e;
        color: #ffffff;
    }
}