/* styles.css */

/* 기본 스타일 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;    
    background-size: cover; /* 배경 이미지가 화면을 꽉 채우도록 설정 */
    background-position: center; /* 배경 이미지 중앙 정렬 */
    background-repeat: no-repeat; /* 배경 이미지 반복하지 않음 */
    background-attachment: fixed; /* 스크롤 시 배경 고정 */
    color: #fff; /* 기본 텍스트 색상을 흰색으로 설정하여 배경과 대비 */
    
    /* 반투명 오버레이 적용 */
    position: relative;
}

 
 body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 검정색 반투명 오버레이 */
    z-index: -5; /* 텍스트보다 뒤에 오도록 설정 */
}



/* 헤더 스타일 */
.header {
    background-color: transparent; /* 녹색 배경 제거 */
    color: white;
    padding: 120px 20px 20px 20px; /* 네비게이션 바 높이에 맞춰 패딩 상단 조정 */
    text-align: center;
    position: relative; /* 오버레이나 다른 요소를 위한 상대 위치 지정 */
}

.header h1 {
    font-size: 6vw; /* 디스플레이 크기에 따라 유동적으로 변경 */
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* 텍스트 그림자 추가 */
}

.header-description {
    font-size: 1.2em; /* 상대 단위를 사용하여 반응형 설정 */
    line-height: 1.6;
    color: #f0f0f0; /* 약간의 대비를 주기 위해 밝은 회색 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* 텍스트 그림자 추가 */
}

/* 컨테이너 스타일 */
.subcon {
    max-width: 800px;
    margin: 40px auto;
    background: rgba(255, 255, 255, 0.9); /* 퀴즈 및 댓글 섹션의 반투명 배경 */
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    color: #333; /* 텍스트 색상 복원 */
}

/* 버튼 스타일 */
.start-button,
.next-button,
.grade-button,
.submit-button {
    padding: 12px 24px; /* 패딩을 늘려 버튼 크기 확대 */
    background-color: #5cb85c; /* 기본 배경색 */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 18px; /* 폰트 크기를 키워 버튼 내 텍스트 가독성 향상 */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.start-button:hover,
.next-button:hover,
.grade-button:hover,
.submit-button:hover {
    background-color: #4cae4c;
    transform: scale(1.05); /* 호버 시 버튼 크기 약간 확대 */
}

/* "채점하기" 버튼 스타일 */
.grade-button {
    background-color: #0275d8;
    width: 140px; /* 폭을 더 길게 지정 */
    padding: 12px 24px; /* 패딩 조정 */
}

.grade-button:hover {
    background-color: #025aa5;
}

/* "다음 문제" 버튼 스타일 */
.next-button {
    background-color: #5cb85c;
    width: 160px; /* 폭을 더 길게 지정 */
    padding: 12px 24px; /* 패딩 조정 */
}

.next-button:hover {
    background-color: #4cae4c;
}

/* "시작하기" 버튼 중앙 배치 및 스타일 조정 */
.start-button {
    display: block; /* 버튼을 블록 요소로 변경 */
    margin: 50px auto; /* 중앙 정렬 및 상단/하단 마진 추가 */
    width: 40%; /* 부모 컨테이너보다 더 작게 설정 */
    background-color: #5cb85c; /* 배경색을 녹색으로 설정 */
    color: white; /* 텍스트 색상을 흰색으로 설정 */
    border: none; /* 테두리 제거 */
    border-radius: 5px; /* 모서리 둥글게 설정 */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.start-button:hover {
    background-color: #4cae4c; /* 호버 시 배경색을 약간 어둡게 변경 */
    transform: scale(1.05); /* 호버 시 버튼 크기 약간 확대 */
}

/* 퀴즈 질문 및 선택지 스타일 */
.question {
    font-size: 20px;
    padding-top: 19px;
    margin-bottom: 15px;
}

.options label {
    display: block;
    margin-bottom: 10px;
    font-size: 18px;
    cursor: pointer;
}

.options input[type="radio"] {
    margin-right: 10px;
}

/* 결과 표시 스타일 */
.result {
    font-size: 22px;
    text-align: center;
    margin-top: 20px;
    color: #333;
}

/* 진행 바 스타일 */
.progress-bar {
    background-color: #ddd;
    border-radius: 5px;
    overflow: hidden;
    height: 20px;
    margin-bottom: 20px;
    position: relative;
}

#progress-bar-fill {
    height: 100%;
    width: 0%;
    background-color: #5cb85c;
    transition: width 0.3s ease;
}

#progress-bar-text {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 0;
    left: 0;
    font-size: 12px;
    color: white;
    line-height: 20px;
}

/* 퀴즈 버튼 그룹 스타일 */
.quiz-buttons {
    display: flex;
    justify-content: flex-start; /* 왼쪽 정렬 유지 */
    align-items: center; /* 수직 정렬 */
    gap: 20px; /* 버튼 간의 간격을 늘려줌 */
    margin-top: 30px;
}

/* 최종 점수 표시 스타일 */
.final-score {
    font-size: 20px;
    text-align: center;
    margin-top: 20px;
    color: #333;
}

/* 댓글 섹션 스타일 */
.comments-section {
    margin-top: 40px;
}

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

#comment-form {
    margin-bottom: 20px;
}

.comment-user-info {
    display: flex;
    gap: 10px; /* 입력란 간의 간격 */
    margin-bottom: 10px; /* 아래 요소와의 간격 */
}

.comment-user-info input[type="text"],
.comment-user-info input[type="password"] {
    flex: 1; /* 동일한 비율로 공간을 차지 */
    padding: 10px;
    border-radius: 3px;
    border: 1px solid #ccc;
    font-size: 16px;
}

#comment-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 3px;
    border: 1px solid #ccc;
    font-size: 16px;
    resize: vertical;
}

#comment-form .warning {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
}

.comment {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    position: relative;
}

.comment .username {
    font-weight: bold;
    font-size: 16px;
}

.comment .created_at {
    font-size: 12px;
    color: #777;
}

.comment .content {
    margin-top: 5px;
    font-size: 16px;
}

.comment .delete-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #888;
    transition: color 0.3s ease;
}

/* 🗑️ 아이콘 추가 */
.comment .delete-button::before {
    content: '🗑️';
}

.comment .delete-button:hover::before {
    color: red;
}

/* 댓글 개수 표시 */
#comments p {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
}

/* 페이징 컨트롤 스타일 */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.pagination button {
    padding: 8px 16px;
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.pagination button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.pagination button:hover:not(:disabled) {
    background-color: #4cae4c;
}

.pagination span {
    font-size: 16px;
    color: #333;
}

#quiz-container{
    background-color: transparent;
}

/* 모바일 네비게이션 바 스타일 */
@media (max-width: 600px) {
    .comment-user-info {
        flex-direction: column; /* 화면이 작아지면 세로로 배치 */
    }

    .comment-user-info input[type="text"],
    .comment-user-info input[type="password"] {
        width: 100%;
    }

    .question {
        font-size: 18px;
    }

    .options label {
        font-size: 16px;
    }

    .start-button,
    .next-button,
    .grade-button,
    .submit-button {
        font-size: 16px;
        padding: 10px;
    }

    .result {
        font-size: 20px;
    }

    .comment .delete-button {
        font-size: 14px;
    }

    /* 진행 바 텍스트 크기 조정 */
    #progress-bar-text {
        font-size: 10px;
    }

    
  
    /* 타이틀 글자 크기 조정 */
    .header h1 {
        font-size: 8vw; /* 모바일에서 더 크게 표시 */
    }

    .header-description {
        font-size: 1em; /* 모바일에서도 읽기 쉽게 */
    }

    /* "시작하기" 버튼 폭 조정 */
    .start-button {
        width: 70%; /* 모바일에서는 더 넓게 설정 */
    }
}