/* ============================
   Reset 기본 스타일
============================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================
   CSS 변수 정의
============================ */
:root {
    --header-height: 160px; /* 기본 헤더 높이 */
    --footer-height: 50px;  /* 기본 푸터 높이 */
}

/* ============================
   Body 스타일
============================ */
body {
    font-family: 'Arial', sans-serif;
    background-color: #F0F0F0;
    color: #333;
    width: 100%;
    min-height: 100vh;
    padding-top: var(--header-height);
    padding-bottom: var(--footer-height);
    position: relative;
    overflow-x: hidden; /* 가로 스크롤 방지 */
}

/* ============================
   공통 컨테이너 스타일
============================ */
.main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
	margin-top: -50px; /* 원하는 만큼 음수 마진 적용 */
}

/* ============================
   헤더 스타일
============================ */
header {
    background-color: #ffffff;
    padding: 5px;
    border-top: 3px solid #03492b;
	border-bottom: 1px solid #afafaf;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1000;
}

/* 헤더 컨테이너 */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.logo {
    width: 60px; /* 로고 이미지 너비를 줄임 */
    height: auto; /* 이미지 비율을 유지하면서 높이를 자동으로 조절 */
}

.site-title {
    text-align: center; /* 텍스트 중앙 정렬 */
    flex: 1; /* 가운데에 위치하도록 */
    margin: 0;
}

/* 헤더 제목 스타일 */
header h1 {
    font-size: 28px;
    color: #5a5b5c;
    margin: 0;
    font-weight: bold;
}

/* 헤더 버튼 그룹 */
.header-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px; /* 작은 화면에서 헤더가 줄 바뀔 때 간격 */
	flex-wrap: wrap; /* 버튼 그룹이 화면 크기에 따라 줄 바뀌도록 설정 */
}

/* 공통 헤더 버튼 스타일 */
.header-buttons a,
.header-buttons button {
    padding: 5px 10px; /* 더 작은 패딩으로 버튼 크기 조정 */
    background-color: #464646;
    color: #ffffff;
    text-decoration: none;
    border: none;
    border-radius: 2px;
    font-size: 12px;
    transition: background-color 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-buttons a:hover,
.header-buttons button:hover {
    background-color: #4169e1;
}

.upload-button, .main-button {
    min-width: 30%; /* 최소 버튼 너비 지정 */
	min-height: calc(2vh);
}

/* 버튼 별 고유 클래스 스타일 */
.upload-button {
    background-color: #464646; 
	margin-bottom: 5px;
    display: flex;
    justify-content: center;  /* 가로 중앙 정렬 */
    align-items: center;      /* 세로 중앙 정렬 */
}

.upload-button:hover {
    background-color: #45a049; /* 더 진한 녹색 */
}

.main-button {
    background-color: #f44336; /* 빨간색 */
	margin-bottom: 10px;
    display: flex;
    justify-content: center;  /* 가로 중앙 정렬 */
    align-items: center;      /* 세로 중앙 정렬 */
}

.main-button:hover {
    background-color: #d32f2f; /* 더 진한 빨간색 */
}
a.logout-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
	align-items: flex-end; /* 로그아웃 버튼을 아랫부분에 정렬 */
    justify-content: center;
}

/* 로그아웃 아이콘 */
.logout-logo {
    display: inline-block;
    width: 20px; /* 아이콘 크기 */
    height: 20px;
    background: none !important; /* 배경색 없애기 */
    padding: 0;
    margin: 0;
    border: none !important; /* 테두리 없애기 */
    outline: none !important; /* 포커스 시 외곽선 없애기 */
    vertical-align: middle;
    opacity: 0.6; /* 기본 투명도 */
    transition: opacity 0.3s ease; /* 투명도 변화 효과 */
}

/* 마우스를 올렸을 때 아이콘의 투명도만 변경 */
a.logout-button:hover .logout-logo {
    opacity: 1; /* 마우스 오버 시 투명도 조정 */
    filter: sepia(100%) saturate(200%) hue-rotate(100deg) brightness(80%) contrast(120%);
    background-color: transparent !important; /* 배경 투명하게 */
    filter: none !important; /* 필터 효과 없애기 */
    box-shadow: none !important; /* 그림자 제거 */
}

/* 강제로 hover 시 배경을 투명하게 */
a.logout-button:hover {
    background-color: transparent !important;
    box-shadow: none !important; /* 그림자 제거 */
    border: none !important; /* 테두리 제거 */
    outline: none !important; /* 외곽선 제거 */
}

/* 사용자 정보 컨테이너 */
.user-info {
    display: flex;
    align-items: center;
    gap: 10px; /* 아이콘, 사용자명, 타이머, 로그아웃 버튼 간 간격 */
}

/* 사용자 아이콘 스타일 */
.user-icon {
    width: 24px;
    height: 24px;
    object-fit: cover; /* 아이콘 크기 비율 유지 */
    border-radius: 50%; /* 원형 아이콘 유지 */
}

/* 사용자 이름 스타일 */
.username {
    font-size: 16px;
    color: #464646;
    font-weight: bold;
}

/* 세션 타이머 스타일 */
.session-timer {
    font-size: 16px;
    color: #083287; /* 경고 색상 (필요에 따라 변경 가능) */
    margin: 0; /* 세션 타이머 여백 제거 */
    line-height: 1; /* 텍스트 라인 높이 조정 */
    font-weight: bold;
}

/* 분기 섹션 스타일 */
.branch-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
}

.branch-container {
    display: flex;
    gap: 60px; /* 버튼 간 간격 */
	justify-content: center; /* 버튼을 중앙에 배치 */
    flex-wrap: wrap; /* 화면 크기에 따라 버튼을 줄 바꿈 */
}
/* ============================
   분기 버튼 및 섹션 스타일
============================ */
/* 분기 버튼 스타일 */
.branch-button {
	position: relative; /* 오버레이를 버튼 하단에 고정하기 위해 설정 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #333;
    background-color: #fff;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 10px;
    width: 15%;
	height: 15%;
    transition: transform 0.3s, box-shadow 0.3s;
}

.branch-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
/* 버튼 이미지 스타일 */
.branch-button img.button-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1; /* 이미지 투명도 조정 */
    transition: opacity 0.3s;
}

.branch-button:hover img.button-icon {
    opacity: 0.5; /* 호버 시 이미지 투명도 변경 */
}

/* 버튼 오버레이 스타일 */
.button-overlay {
    position: absolute;
    bottom: 0px; /* 버튼의 하단에 배치 */
	width: 100%;
	left: 50%;
	text-align: center;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8); /* 반투명 배경 */
    padding: 5px 10px;
    border-radius: 5px;
	display: block; 
}

.button-text {
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
    text-align: center;
}

/* 메뉴 카드 연도 뱃지 */
.year-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 70%;
}
.year-badge span {
    background-color: #004094;
    color: #fff;
    font-size: 0.68em;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    line-height: 1.5;
}

/* ============================
   참여 연구 섹션 스타일
============================ */

.research-section {
    margin-top: 20px; /* 이메일 입력 필드와 간격 조정 */
}

.research-section label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

.research-options {
    display: flex;
    gap: 30px; /* 각 연구 옵션 간 간격 */
    flex-wrap: wrap;
}

.research-option {
    display: flex;
    align-items: center;
}

.research-option input[type="checkbox"] {
    margin-right: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.research-option label {
    font-size: 1em;
    color: #555;
    cursor: pointer;
}


/* ============================
   콘텐츠 섹션 스타일
============================ */
.content-section,
.login-section,
.join-section,
.signup-section {
    flex: 1;
    max-width: 800px;
    margin: 30px auto;
    padding: 20px;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.survey-section {
    flex: 1;
    max-width: 850px;
    margin: 0px auto;
    padding: 0px;
    border-radius: 5px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.join-section {
    flex: 1;
    max-width: 800px;
    margin: 60px auto;
    padding: 20px;
    border-radius: 10px;
    background-color: #f0f8ff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.login-section,
.join-section,
.signup-section {
    background-color: #ffffff;
    text-align: left;
    max-width: 400px;
}

/* 섹션 제목 스타일 */
.content-section h2,
.login-section h2,
.signup-section h2 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
    text-align: left;
}

/* 입력 필드 스타일 */
input[type="text"],
input[type="password"],
input[type="email"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: border-color 0.3s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
    border-color: #007bff;
    outline: none;
}

/* 버튼 스타일 */
button,
.start-btn,
.admin-btn,
.btn-primary {
    padding: 10px 10px;
    background-color: #464646;
    color: #ffffff;
    font-size: 14px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.signup-btn,
.login-btn {
	margin-top: 30px; /* 버튼과 연구 섹션 간 간격 조정 */
    width: 100%; /* 부모 요소의 전체 너비 차지 */
    padding: 15px 0;
    background-color: #464646;
    color: #ffffff;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover,
.signup-btn:hover,
.login-btn:hover,
.btn-primary:hover {
    background-color: #4169e1;
	color: #fff 
}

/* 로그인 버튼 스타일 */
.login-button {
    display: inline-block;
    padding: 8px 16px;
    background-color: #464646; /* 버튼 배경색 */
    color: #fff;               /* 글자색 */
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;     /* 링크 밑줄 제거 */
    border-radius: 5px;        /* 모서리 둥글게 */
    transition: background-color 0.3s ease;
}

.login-button:hover {
    background-color: #4169e1; /* 호버 시 색상 변경 */
}

/* 연구 배경 내용 스타일 */
.content-section p {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* ============================
   이미지 그리드 스타일(3*2)
============================ */
.image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 웹 화면에서는 3열 */
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.image-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative; /* 이미지 아이템의 상대 위치 설정 */
    padding-bottom: 20px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.5); /* 반투명 점선 */
}

.image-wrapper {
    position: relative;
    width: 100%;
	background-color: #ffffff;
    padding-top: 66.66%; /* 3:2 비율 유지 */
    overflow: hidden;
    margin-bottom: 20px;
}

.image-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    /* 외곽선 추가 */
    border: 1px solid #cccccc; /* 기본 외곽선 색상 */
    transition: border-color 0.3s ease; /* 외곽선 색상 전환 효과 */
}

/* 각 이미지별 id 값 */
.id-box {
    position: absolute;
    top: 10px; /* 상단 여백 */
    left: 10px; /* 좌측 여백 */
    background-color: rgba(0, 0, 0, 0.5); /* 검은색 배경, 50% 투명도 */
    color: white; /* 글씨 색상 흰색 */
    padding: 5px 10px; /* 패딩 */
    border-radius: 8px; /* 둥근 모서리 */
    font-size: 14px; /* 글씨 크기 */
    font-weight: bold; /* 글씨 두껍게 */
}

/* 이미지 호버 시 외곽선 색상 변경 */
.image-item img:hover {
    border-color: #007BFF; /* 호버 시 외곽선 색상 변경 */
}

/* 이미지 포커스 시 외곽선 색상 변경 (접근성) */
.image-item img:focus {
    outline: 2px solid #28a745; /* 포커스 시 외곽선 설정 */
    outline-offset: 4px; /* 외곽선 간격 */
}


/* ============================
   모달 창 스타일
============================ */
.modal {
    max-width: 100%;
    max-height: 100%;
    display: none; /* 기본적으로 숨김 */
    position: fixed;
    z-index: 1000; /* 화면의 가장 앞에 표시 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* 반투명 검은 배경 */
    justify-content: center; /* 수평 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
}

/* 모달 안에 있는 이미지 */
.modal-content {
    max-width: 70%;
    max-height: 70%;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    object-fit: contain; /* 이미지 크기가 제한을 넘을 때에도 비율 유지 */
    position: relative;
    top: 50%;            /* 중앙으로 이동 */
    left: 50%;
    transform: translate(-50%, -50%);  /* 수평 및 수직 중앙으로 이동 */
}

/* 모달 닫기 버튼 */
.close {
    position: absolute;
    top: 10px;
    right: 25px;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
}

/* 모달 닫기 버튼에 마우스 올렸을 때 */
.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* ============================
   평가 버튼 스타일
============================ */
.rating-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 400px;
}

.rating-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 10px;

}

.rating-item label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    padding: 10px;
    box-sizing: border-box;
    background-color: #ffffff;
    color: #464646;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    text-align: center;
    
    /* 외곽선 추가 */
    border: 0.5px solid #cccccc; /* 원하는 색상으로 변경 가능 */
    
    /* 부드러운 전환 효과 추가 (선택 사항) */
    transition: border-color 0.3s ease;
}

/* 라디오 버튼 숨기기 */
.rating-item input[type="radio"] {
    display: none;
}

/* 선택된 라디오 버튼의 레이블 스타일 */
.rating-item input[type="radio"]:checked + label {
    background-color: #4A4A4A;
	color: #ffffff;
}

/* 호버 효과 */
.rating-item label:hover {
    background-color: #787676;
	color: #ffffff;
}

/* 포커스 효과 */
.rating-item input[type="radio"]:focus + label {
    outline: 2px solid #787676;
}

/* ============================
   버튼 그룹 및 링크 버튼 스타일
============================ */
.button-group {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    gap: 10px;
}

.button-group a,
.button-group form button {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 10px 20px;
    background-color: #464646;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}


.button-group a:hover,
.button-group form button:hover {
    background-color: #4169e1;
}

/* ============================
   평가하지 않은 항목 강 스타일
============================ */

/* Error Outline Animation */
@keyframes fadeInOut {
    0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
    50% { box-shadow: 0 0 0 5px rgba(255, 0, 0, 0.8); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}

/* 평가되지 않은 이미지와 평가 버튼을 강조 */
.image-item.error-outline {
    animation: fadeInOut 1.5s forwards;
    border-radius: 5px; /* 경계선 둥글게 */
}

/* 평가되지 않은 이미지 자체에도 외곽선 적용 */
.image-item img.error-outline {
    animation: fadeInOut 1.5s forwards;
    border-radius: 5px; /* 이미지 경계선 둥글게 */
}
/* ============================
   업로드 섹션 스타일
============================ */
.dropzone {
    border: 2px dashed #007bff; /* 점선 테두리 */
    border-radius: 10px;
    padding: 40px;
    cursor: pointer;
    text-align: center;
    background-color: #f0f8ff;
    transition: background-color 0.3s ease;
    margin-bottom: 20px;
}

.dropzone p {
    font-size: 18px;
    color: #666;
}

.dropzone.active {
    background-color: #e0f0ff;
}

/* 기본 프로그레스바 스타일 */
#progress-container {
    width: 100%;
    background-color: #f3f3f3;
    height: 25px;
	margin-top: 20px; 
    margin-bottom: 20px; /* 푸터와의 간격 */
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
    display: none; /* 기본적으로 숨김 */
}
#progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #81c784);
    transition: width 0.4s ease;
}
#progress-text {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #333;
    margin-bottom: 20px; /* 푸터와의 간격 */
    display: none; /* 기본적으로 숨김 */
}

/* 파일 리스트 스타일 */
.file-list {
	max-height: 150px; /* 원하는 높이로 설정 */
    overflow-y: auto;   /* 세로 스크롤 가능 */
    list-style: none;
    padding: 0;
    margin: 0;
	margin-bottom: 20px;
}

.file-item {
    display: flex;
    align-items: center;
    background-color: #f1f3f5;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    transition: background-color 0.3s ease;
}

.file-item:hover {
    background-color: #e2e6ea;
}

.file-icon {
    margin-right: 10px;
    font-size: 24px;
    color: #007bff;
}

.file-name {
    flex-grow: 1;
    word-break: break-all;
}

.file-item.invalid {
    color: #dc3545;
    background-color: #f8d7da;
}

/* ============================
   플래시 메시지 스타일
============================ */
.flashes {
    position: fixed; /* 화면에 고정된 위치 */
    top: 120px;      /* 화면 상단에서 120px 아래 */
    left: 50%;       /* 화면 너비의 50% 지점 */
    transform: translateX(-50%); /* 수평 중앙 정렬 */
    list-style-type: none;
    padding: 0;
    margin: 0;
    z-index: 1001; /* 다른 요소보다 앞에 표시 */
}

.flashes li {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    min-width: 300px; /* 최소 너비 설정 */
    text-align: center;
    opacity: 0; /* 초기 상태: 투명 */
    animation: fadeInUp 1.5s ease-out forwards, fadeOut 1.0s ease-in forwards;
    animation-delay: 0s, 1.0s; /* fadeInUp은 즉시 시작, fadeOut은 3초 후 시작 */
}

.flashes .success {
    background-color: #d4edda;
    color: #155724;
}

.flashes .info {
    background-color: #F8D7F5;
    color: #721B71;
}

.flashes .warning {
    background-color: #fff3cd;
    color: #856404;
}

.flashes .danger {
    background-color: #f8d7da;
    color: #721c24;
}

/* 애니메이션 정의 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px); /* 아래에서 위로 올라오는 효과 */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* 원래 위치 */
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px); /* 위로 올라가면서 사라지는 효과 */
    }
}

/* ============================
   비밀번호 변경하기 스타일
============================ */

/* 전체 컨테이너 */
.change-password-container {
    width: 100%;
    max-width: 400px; /* 비밀번호 찾기 폼의 최대 너비 */
    margin: 50px auto; /* 중앙에 배치하고 위아래 여백을 줌 */
    padding: 20px; /* 내부 여백 */
    background-color: #f7f7f7; /* 배경색 설정 */
    border: 1px solid #ddd; /* 테두리 */
    border-radius: 8px; /* 모서리를 둥글게 처리 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 약간의 그림자 추가 */
}

/* 제목 스타일 */
.change-password-container h2 {
    text-align: center; /* 제목을 중앙 정렬 */
    font-size: 22px; /* 폰트 크기 */
    margin-bottom: 20px; /* 아래쪽 여백 */
    color: #333; /* 제목 색상 */
}

/* 입력 필드 스타일 */
.email-input {
    width: 100%; /* 입력 필드가 전체 너비를 차지하게 */
    padding: 10px; /* 내부 여백 */
    margin-bottom: 20px; /* 필드 간 간격 */
    border: 1px solid #ccc; /* 테두리 색상 */
    border-radius: 4px; /* 모서리를 약간 둥글게 */
    font-size: 16px; /* 글자 크기 */
    box-sizing: border-box; /* 여백을 포함한 박스 크기 설정 */
}

/* 버튼 스타일 */
.reset-btn {
    width: 100%; /* 버튼이 전체 너비를 차지하게 */
    padding: 10px; /* 내부 여백 */
    background-color: #464646; /* 버튼 배경색 */
    color: #fff; /* 버튼 텍스트 색상 */
    border: none; /* 테두리 제거 */
    border-radius: 4px; /* 버튼 모서리 둥글게 */
    font-size: 16px; /* 글자 크기 */
    cursor: pointer; /* 커서 모양 변경 */
    transition: background-color 0.3s ease; /* 배경색 변화 효과 */
}

/* 버튼 호버 시 색상 변경 */
.reset-btn:hover {
    background-color: #4169e1; /* 마우스를 올렸을 때 배경색 */
}


/* ============================
   푸터 스타일
============================ */
footer {
    background-color: #343338;
    padding: 10px 0;
	margin: 0px;
    text-align: center;
    color: #ffffff;
    font-size: 14px;
    width: 100%;
    position: fixed;
    bottom: 0;
}

/* ============================
   페이지네이션 버튼 스타일
============================ */
.pagination-button {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background-color: #464646;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    opacity: 0.4;
    z-index: 1000;
    padding: 0;
    box-sizing: border-box;
}

.pagination-button:hover {
    background-color: #464646;
    transform: translateY(-50%) scale(1.1);
    opacity: 1;
}

.prev-button {
    left: 20px;
}

.next-button {
    right: 20px;
}

/* 비활성화된 페이지네이션 버튼 스타일 */
.pagination-button.disabled {
    background-color: rgba(70, 130, 180, 0.2);
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.2;
}

/* 페이지 정보 스타일 */
.page-info-container {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.page-info {
    font-size: 18px;
    color: #333;
}

/* 종료 버튼을 우측으로 이동하는 스타일 */
.end-button {
    right: 20px;
}

/* ============================
   그래프 스타일
============================ */
.graph-container {
    width: 100%;
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
}

.graph {
    width: 100%;
    height: 400px;
}
.bottom-section canvas {
    width: 100% !important;  /* 강제 설정된 크기 */
    max-width: 800px;
    height: auto !important; /* 자동으로 설정된 높이 */
    margin-bottom: 40px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 탭 네비게이션 스타일 */
.tabs {
    display: flex;
    gap: 10px;
	margin-top: 30px;
    margin-bottom: 20px;
    background-color: #f1f1f1; /* 탭 컨테이너 배경색 */
    padding: 10px;
    border-radius: 5px;
}

.tab {
    padding: 10px 20px;
    background-color: #4682b4;
    color: #ffffff;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    user-select: none;
    flex: 1; /* 탭 버튼들이 동일한 너비를 가지도록 함 */
    text-align: center;
}

.tab:hover {
    background-color: #4169e1;
}

.tab.active {
    background-color: #4169e1;
}
.content-section.data-layout  {
    flex: 1;
    display: flex;
    padding: 10px;
    gap: 10px;
    flex-wrap: wrap; /* 화면이 작아질 때 섹션이 세로로 쌓이도록 */
}
/* 좌측 섹션: 그래프 */
.left-section {
    flex: 1 1 40%; /* 좌측 섹션의 너비 설정 */
    display: flex;
    flex-direction: column;
    gap: 20px;
	max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 10px;
    background-color: #f0f8ff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 우측 섹션: 탭과 테이블 */
.right-section {
    flex: 1 1 60%; /* 우측 섹션의 너비 설정 */
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 10px;
    background-color: #f0f8ff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* ============================
   탭 네비게이션 스타일 (책갈피 형태, 좌측 정렬, 겹침)
============================ */

/* Tab CSS */
.tabnav {
    font-size: 0; /* inline-block 요소의 간격 제거 */
    width: auto; /* 고정 너비 제거 */
    border: 1px solid #ddd;
    border-bottom: none; /* 콘텐츠와의 연결을 위해 하단 테두리 제거 */
    background-color: #f1f1f1;
    display: flex;
    align-items: center;
    padding: 0;
}

.tabnav li {
    height: 46px;
    text-align: center;
    border-right: 1px solid #ddd;
    position: relative;
}

.tabnav li:last-child {
    border-right: none; /* 마지막 탭은 오른쪽 테두리 제거 */
}

.tabnav li a {
    position: relative;
    display: block;
    background: #f8f8f8;
    color: #000;
    padding: 0 30px;
    line-height: 46px;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.3s, color 0.3s;
}

.tabnav li a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0px;
    width: 100%;
    height: 3px;
    background: transparent; /* 기본 배경 투명 */
    transition: background 0.3s;
}

.tabnav li a.active:before {
    background: #7ea21e;
}

.tabnav li a.active {
    border-bottom: 1px solid #fff; /* 활성 탭 아래 흰색 선 */
    background: #fff;
    color: #7ea21e;
}

.tabnav li a:hover,
.tabnav li a.active {
    background: #fff;
    color: #7ea21e;
}

/* 탭 콘텐츠 스타일 */
.tabcontent {
    display: none; /* 기본적으로 숨김 */
    padding: 20px;
    height: auto; /* 고정 높이가 아닌 자동 조정 */
    border: 1px solid #ddd;
    border-top: none;
    max-height: calc(100vh - 160px - 50px - 200px); /* 헤더, 푸터, 탭 영역 제외 */
    overflow-y: auto; /* 내부 스크롤 가능 */
}

.tabcontent.active {
    display: block; /* 활성 탭 콘텐츠만 표시 */
}

/* 테이블 스타일 개선 */
.table-container {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    text-align: center;
}

th {
    background-color: #4682b4;
    color: #ffffff;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}


/* 하단 섹션: 시각화 차트 스타일 */
.bottom-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.bottom-section h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
}

.bottom-section canvas {
    width: 800px; /* 원하는 너비로 설정 */
    height: 400px; /* 명시적인 높이 설정 */
    margin-bottom: 40px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ============================
   하단 섹션: 시각화 차트 스타일
============================ */
.bottom-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.bottom-section h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
}

.bottom-section canvas {
    width: 800px; /* 원하는 너비로 설정 */
    height: 400px; /* 명시적인 높이 설정 */
    margin-bottom: 40px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/* ============================
   반응형 디자인
============================ */

/* === 반응형 디자인 === */

/* 반응형 디자인: 태블릿 및 모바일 장치 */
@media (max-width: 768px) {
    /* 헤더 제목 및 버튼 크기 조정 */
    header h1 {
        font-size: 20px;
    }

    /* 헤더 높이 변수 업데이트 */
    :root {
        --header-height: 60px;
    }

    /* 헤더 레이아웃 변경 */
    .header-container {
        display: flex;
        flex-direction: row; /* 로고와 타이틀, 버튼들을 수평으로 배치 */
        justify-content: space-between;
        width: 100%;
    }
    .logo {
		max-width: 45px;
        margin-right: 3px; /* 로고와 타이틀 사이 간격 */
    }
    .user-info {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }

    .title {
        text-align: center;S
        margin-bottom: 10px;
    }
    .username,
    .session-timer,
    .header-buttons {
        display: flex;
        flex-direction: column; /* 버튼들을 상하로 배치 */
        align-items: flex-start; /* 버튼들이 왼쪽 정렬되도록 설정 */
		font-size: 12px;
		gap: 10px;
    }
    /* 버튼 스타일 조정 */
    .header-buttons a,
    .header-buttons button {
        text-align: right;
        margin-bottom: 5px;
        font-size: 16px;
        padding: 8px 16px;
    }
    /* 메인 컨테이너 마진 조정 */
    .main-container {
        margin-top: var(--header-height);
        margin-bottom: 70px;
		margin-top: 10px; /* 원하는 만큼 음수 마진 적용 */
    }

    /* 푸터의 고정 위치 해제 */
    footer {
        position: fixed;
    }
	
    /* 모달 창의 이미지 크기 조정 */
    .modal-content {
        max-width: 100%; 
        max-height: 100%; 
		top: 55%;
        left: 50%;
    }
    
    /* 모달 닫기 버튼 크기 조정 */
    .close {
        font-size: 28px;
        top: 5px;
        right: 15px;
    }

    /* 드롭존 및 버튼 크기 조정 */
    .dropzone {
        padding: 20px;
    }

    .dropzone p {
        font-size: 16px;
    }

    .btn-primary {
        font-size: 16px;
        padding: 12px 24px;
    }
    .research-options {
        flex-direction: column;
        gap: 20px; /* 모바일에서 버튼 간 세로 간격을 20px로 증가 */
    }

    .signup-btn {
        width: 100%;
        padding: 15px 0;
    }
    /* 이미지 그리드 열 수 조정 */
    .image-grid {
        grid-template-columns: 1fr; /* 단일 열로 변경 */
        gap: 20px;
    }

    /* Pagination Buttons 모바일 스타일 */
    .pagination-button {
        width: 50px; /* 기존 크기로 유지 */
        height: 50px; /* 기존 크기로 유지 */
        font-size: 20px; /* 기존 폰트 크기로 유지 */
		border-radius: 50%; /* 정원 형태 유지 */
		display: flex;
   	 	justify-content: center;
    	align-items: center;
    	text-align: center;
    	padding: 0; /* 패딩으로 인해 타원이 되는 것을 방지 */
    	box-sizing: border-box; /* 패딩과 보더가 너비/높이에 영향을 주지 않도록 */
    }

    /* Page Info 스타일 조정 */
    .page-info-container {
        bottom: 50px;
        padding: 8px 16px;
    }

    .page-info {
        font-size: 16px;
    }

    /* 추가: 이미지 평가 버튼 크기 조정 */
    .rating-buttons label {
        width: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 10px;
    }

    /* 추가: Pagination Buttons 위치 조정 */
    .prev-button {
        left: 10px;
    }

    .next-button {
        right: 10px;
    }
    /* 마지막 이미지를 제외한 모든 이미지에 점선 추가 */
    .image-item:not(:last-child) {
        border-bottom: 1px dashed rgba(0, 0, 0, 0.5); /* 반투명 점선 */
        padding-bottom: 20px;
    }
    /* 마지막 이미지는 점선 제거 */
    .image-item:last-child {
        border-bottom: none;
    }
	.bottom-section h2 {
        font-size: 20px;
    }

    .bottom-section canvas {
        max-width: 100%;
        margin-bottom: 60px;
    }
    .branch-container {
        flex-direction: column;
        gap: 20px;
    }
    .branch-button {
        width: 250px;
        height: 250px;
    }
}

/* 반응형 디자인: 작은 모바일 장치 */
@media (max-width: 480px) {
    /* 헤더 제목 크기 조정 */
    header h1 {
        font-size: 16px;
    }

    /* 헤더 높이 변수 업데이트 */
    :root {
        --header-height: 50px;
    }

    /* 헤더 버튼 폰트 크기 조정 */
    .header-buttons a,
    .header-buttons button {
        font-size: 12px;
        padding: 6px 12px;
    }
    .title {
        text-align: center;
		font-size: 10px;
        margin-bottom: 10px;
    }
    /* 메인 컨테이너 마진 조정 */
    .main-container {
        margin-top: var(--header-height);
        margin-bottom: 70px;
    }
	
    /* 드롭존 텍스트 크기 조정 */
    .dropzone p {
        font-size: 14px;
    }

    /* Pagination Buttons 작은 모바일 장치 스타일 */
    .pagination-button {
        width: 40px; /* 정원 유지 */
        height: 40px; /* 정원 유지 */
        font-size: 18px;
		border-radius: 50%; /* 정원 형태 유지 */
		display: flex;
   	 	justify-content: center;
    	align-items: center;
    	text-align: center;
    	padding: 0; /* 패딩으로 인해 타원이 되는 것을 방지 */
    	box-sizing: border-box; /* 패딩과 보더가 너비/높이에 영향을 주지 않도록 */
    }

    /* Page Info 스타일 조정 */
    .page-info-container {
        bottom: 50px;
        padding: 6px 12px;
    }

    .page-info {
        font-size: 14px;
    }

    /* 추가: 이미지 평가 버튼 크기 조정 */
    .rating-buttons label {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 8px;
    }

    /* 추가: Pagination Buttons 위치 조정 */
    .prev-button {
        left: 5px;
    }

    .next-button {
        right: 5px;
    }
	/* 마지막 이미지를 제외한 모든 이미지에 점선 추가 */
    .image-item:not(:last-child) {
        border-bottom: 1px dashed rgba(0, 0, 0, 0.5); /* 반투명 점선 */
        padding-bottom: 20px;
    }
    /* 마지막 이미지는 점선 제거 */
    .image-item:last-child {
        border-bottom: none;
    }
	.bottom-section h2 {
        font-size: 18px;
    }

    .bottom-section canvas {
        max-width: 100%;
        margin-bottom: 20px;
    }
    .branch-container {
		margin-top: -20px;
        flex-direction: column;
        gap: 20px;
    }
    .branch-button {
        width: 230px;
        height: 230px;
    }
}

/* ============================
   추가: 드래그 앤 드롭 활성화 시 스타일
============================ */
.dropzone.active {
    border-color: #0056b3;
    background-color: #d0e7ff;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* ============================
   추가: 그래프 섹션 스타일 개선
============================ */
.bottom-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bottom-section canvas {
    width: 100% !important;
    max-width: 800px;
    height: auto !important;
    margin-bottom: 40px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ============================
   추가: 테이블 스타일
============================ */
.table-container {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    text-align: center;
}

th {
    background-color: #4682b4;
    color: #ffffff;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}