/* skin/exam/style.css - 최종 디자인 완료 (나눔스퀘어 폰트, 전체 디자인 개선) */

/* ---------- 폰트 설정 및 공통 스타일 ---------- */

@font-face {
    font-family: 'NanumSquare';
    font-style: normal;
    font-weight: 400;
    src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumSquareL.eot');
    src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumSquareL.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumSquareL.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumSquareL.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'NanumSquare';
    font-style: normal;
    font-weight: 700;
    src: url('//cdn.jsdelivr.net/font-nanumsquare/1.0/NanumSquareB.eot');
    src: url('//cdn.jsdelivr.net/font-nanumsquare/1.0/NanumSquareB.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumsquare/1.0/NanumSquareB.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumsquare/1.0/NanumSquareB.ttf') format('truetype');
    font-display: swap;
}

.exam-list-container,
.exam-info-container,
.exam-take-container,
.result-container {
    max-width: 840px;
    margin: 30px auto;
    padding: 35px 40px;
    border: 1px solid #c0c0c0;
    border-radius: 10px;
    font-family: 'NanumSquare', sans-serif;
    line-height: 1.6;
    color: #3a3a3a;
    background-color: #fdfdfd;
    font-size: 16px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.06);
}

.exam-list-container h1,
.exam-info-container h1,
.exam-take-container h1.exam-title,
.result-container h1 {
    font-size: 2.2em;
    margin-bottom: 10px;
    text-align: center;
    color: #1e1e1e;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.exam-list-container h1 i.fa,
.result-container h1 i.fa {
    margin-right: 12px;
    color: #ffc107;
    opacity: 0.85;
}

/* ---------- exam-list.skin.php ---------- */

.exam-list-container .exam-list {
    list-style: none; /* ●, ●●●, 숫자 등 없애기 */
    padding: 0;
    margin: 0;
}
.exam-list-container .exam-info-wrap {
    flex-grow: 1; /* 남는 공간 차지 */
	padding: 0px 30px;
    margin-right: 15px; /* 버튼과의 간격 */
}
.exam-list-container .exam-list li {
    margin-bottom: 25px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0px;
	color: #333;
    position: relative; /* 버튼 절대 위치 지정을 위한 기준점 */
}

/* 마지막 li 요소 밑줄 제거 */
.exam-list-container .exam-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}


.exam-list-container .exam-list li a {
    display: block;
    padding: 15px 0; /* 상하 패딩 유지, 좌우 제거 */
    text-decoration: none;
    color: #333; /* 기본 링크 색상 */
    transition: color 0.2s ease-in-out;
    position: relative; /* 내부 요소 배치 기준 */
    padding-right: 140px; /* 결과보기 버튼 공간 확보 */
}

.exam-list-container .exam-list li a:hover,
.exam-list-container .exam-list li a:focus {
    color: #007bff; /* hover 시 기본 색상 변경 유지 */
    /* 배경색 변경 제거 (버튼과 겹치지 않도록) */
    /* background-color: #f9f9f9; */
    /* padding-left 제거 */
    /* border-radius 제거 */
}

/* ▼▼▼ 결과 보기 버튼 스타일 추가 ▼▼▼ */
.exam-list-container .exam-list li a .result-button {
    position: absolute; /* li 내에서 절대 위치 */
    right: 0; /* 오른쪽 끝에 배치 */
    top: 50%; /* 세로 중앙 정렬 시작점 */
    transform: translateY(-50%); /* 세로 중앙 정렬 완료 */
    display: inline-block;
    padding: 8px 16px; /* 버튼 패딩 */
    font-size: 1.2em; /* 버튼 폰트 크기 */
    font-weight: bold;
    background-color: #0056b3; /* .exam-subject 와 동일한 배경색 */
    color: white; /* 흰색 글자 */
    border: none;
    border-radius: 5px;
    text-align: center;
    white-space: nowrap; /* 줄바꿈 방지 */
    transition: background-color 0.2s ease-in-out, transform 0.1s ease; /* hover 효과 */
}

.exam-list-container .exam-list li a:hover .result-button,
.exam-list-container .exam-list li a:focus .result-button {
    background-color: #004494; /* hover 시 배경색 약간 어둡게 */
    transform: translateY(-50%) scale(1.03); /* hover 시 약간 커지는 효과 */
}
/* ▲▲▲ 결과 보기 버튼 스타일 추가 완료 ▲▲▲ */


.exam-list-container .exam-list .exam-subject {
    font-size: 1.3em;
    display: block;
    margin-bottom: 10px;
    color: #0056b3; /* 이 색상을 버튼 배경색으로 사용 */
    font-weight: bold;
    padding-right: 10px; /* 버튼과 겹치지 않도록 오른쪽 여백 */
}

/* 응시 상태 텍스트 스타일 */
.exam-list-container .exam-list .exam-subject span {
    font-size: 0.8em;
    font-weight: normal;
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 3px;
}
.exam-list-container .exam-list .exam-subject span.text-info { background-color: #cfe2ff; color: #084298; border: 1px solid #9ec5fe;}
.exam-list-container .exam-list .exam-subject span.text-warning { background-color: #fff3cd; color: #664d03; border: 1px solid #ffecb5;}
.exam-list-container .exam-list .exam-subject span.text-success { background-color: #d1e7dd; color: #0f5132; border: 1px solid #a3cfbb;}
.exam-list-container .exam-list .exam-subject span.text-danger { background-color: #f8d7da; color: #58151c; border: 1px solid #f1aeb5;}


.exam-list-container .exam-list .exam-meta {
    font-size: 0.95em;
    color: #777;
    margin-bottom: 12px;
    padding-right: 10px; /* 버튼과 겹치지 않도록 오른쪽 여백 */
}

.exam-list-container .exam-meta span {
    margin-right: 15px;
}

.exam-list-container .exam-description {
    font-size: 1.05em;
    color: #555;
    line-height: 1.6;
}

.exam-list-container .no-exam {
    text-align: center;
    padding: 40px 0;
    color: #888;
    font-size: 1.1em;
}

/* ---------- exam-info.skin.php ---------- */

.exam-info-container {
    margin: 30px auto; /* margin 값 조정 */
    padding: 35px 40px; /* padding 값 조정 */
    border: 1px solid #c0c0c0;
    border-radius: 10px;
    background-color: #fdfdfd;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.06); /* box-shadow 유지 */
}

.exam-info-container h1 {
    font-size: 2.2em; /* 제목 크기 유지 */
    margin-bottom: 30px; /* margin-bottom 값 유지 */
    text-align: center;
    color: #1e1e1e;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.exam-info-container .exam-info-details {
    margin-top: 25px; /* margin-top 값 조정 */
    padding: 20px; /* padding 추가 */
    border: 1px solid #ddd; /* 테두리 추가 */
    border-radius: 8px; /* border-radius 값 추가 */
    background-color: #f9f9f9; /* 배경색 추가 */
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.02); /* 내부 그림자 효과 */
}

.exam-info-container .exam-info-details dt {
    font-weight: bold;
    color: #495057;
    margin-bottom: 8px;
    font-size: 1.05em; /* dt 폰트 크기 약간 확대 */
}

.exam-info-container .exam-info-details dd {
    margin-left: 0;
    margin-bottom: 18px;
    color: #6c757d;
    line-height: 1.6;
    font-size: 1em; /* dd 폰트 크기 약간 확대 */
}

.exam-info-container .exam-start-button {
    display: inline-block;
    padding: 14px 35px;
    font-size: 1.2em; /* button font-size 유지 */
    font-weight: bold;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 8px; /* button border-radius 값 조정 */
    cursor: pointer;
    text-decoration: none;
    margin-top: 30px;
    transition: background-color 0.2s ease-in-out;
}

.exam-info-container .exam-start-button:hover,
.exam-info-container .exam-start-button:focus {
    background-color: #0056b3;
}

.exam-info-container .cannot-take-msg {
    color: #dc3545;
    font-weight: bold;
    margin-top: 25px;
    text-align: center;
    font-size: 1.1em; /* 폰트 크기 약간 확대 */
}

.exam-info-container .btn_cancel { /* 목록으로 버튼 스타일 (기존 btn_cancel 클래스 활용) */
    display: inline-block;
    padding: 10px 20px;
    font-size: 1em;
    border-radius: 5px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #555;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.exam-info-container .btn_cancel:hover,
.exam-info-container .btn_cancel:focus {
    background-color: #f0f0f0;
    color: #333;
    border-color: #bbb;
}

/* ---------- exam-header & result-summary ---------- */

.exam-take-container .exam-header,
.result-container .result-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 35px;
    border: 1px solid #d0d0d0;
    border-radius: 10px;
    background-color: #f9f9f9;
    margin-bottom: 40px;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.04);
}

.exam-take-container .exam-title,
.result-container .result-summary h2.sr-only {
    font-size: 1.8em;
    margin: 0;
    color: #2a2a2a;
    font-weight: 700;
}

.exam-timer,
.result-summary .final-score {
    font-size: 1.3em;
    font-weight: bold;
}

.exam-timer {
    color: #e05651;
    padding: 10px 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.04);
}

.result-summary dd {
    color: #5a5a5a;
}

.result-summary .final-score {
    color: #007bff;
}

/* ---------- question-item ---------- */

.exam-take-container .question-item,
.result-container .result-question-item {
    margin-bottom: 35px;
    padding: 25px 30px;
    border-bottom: 1px solid #ddd;
}

.exam-take-container .question-number,
.result-container .result-q-num {
    font-size: 1.25em;
    font-weight: bold;
    color: #333;
    margin-bottom: 18px;
}

.exam-take-container .question-content,
.result-container .result-q-content {
    font-size: 1.1em;
    margin-bottom: 22px;
    padding: 15px 20px;
    background-color: #fdfdfd;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.02);
}

/* ---------- option list ---------- */

/* ---------- option list ---------- */

.exam-take-container .question-options ul,
.result-container .result-options ul {
    list-style: none; /* ●, ●●●, 숫자 등 없애기 */
    padding: 0;
    margin: 0;
}

.exam-take-container .question-options li,
.result-container .result-options li {
    margin-bottom: 5px; /* 간격 약간 더 좁힘 */
    font-size: 1.1em;
    padding: 6px 12px; /* padding 세로/가로 값 모두 줄임 */
    border: 1px solid #d0d0d0;
    border-radius: 6px; /* border-radius 값 약간 줄임 */
    background: #fff;
    transition: all 0.15s ease-in-out;
}

.exam-take-container .question-options li label,
.result-container .result-options li label {
    display: block;
    cursor: pointer;
   /* padding: 6px 8px;  label padding 값 줄임 */
    border-radius: 4px; /* label border-radius 값 줄임 */
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    border: 2px solid transparent;
}

.exam-take-container .question-options label:hover,
.exam-take-container .question-options label:focus-within,
.result-container .result-options li.user-selected {
    background-color: #f2f2f2;
    border-color: #b0b0b0;
}

.exam-take-container .question-options input[type="radio"],
.exam-take-container .question-options input[type="checkbox"],
.result-container .result-options li .opt-num {
    display: inline-block;
    width: 20px;
    font-weight: bold;
    color: #6c757d;
    margin-right: 10px;
    vertical-align: middle;
}

/* ---------- 주관식 답변 영역 ---------- */

.exam-take-container .answer-input-s,
.result-container .result-q-answer dd.user-answer {
    width: calc(100% - 22px);
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    line-height: 1.5;
    resize: vertical;
    font-family: inherit;
}

/* ---------- 결과 상태 표시 (result.skin.php) ---------- */

.result-container .result-status {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #eee;
    font-weight: bold;
    font-size: 1em;
}

.result-container .result-status.correct { color: #198754; }
.result-container .result-status.incorrect { color: #dc3545; }
.result-container .result-status.pending-grade { color: #fd7e14; }

/* ---------- 해설 (result.skin.php) ---------- */

.result-container .result-explanation {
    margin-top: 15px;
    padding: 15px;
    background-color: #e7f3ff;
    border: 1px solid #b8daff;
    color: #004085;
    border-radius: 4px;
    line-height: 1.5;
    font-size: 0.95em;
}

.result-container .result-explanation dt {
    font-weight: bold;
    margin-bottom: 5px;
    color: #004085;
}

/* ---------- 버튼 영역 ---------- */

.exam-take-container .exam-submit-area,
.result-container .result-buttons {
    text-align: center;
    margin-top: 40px;
    padding-top: 25px;
    border-top: 1px solid #eee;
}

.exam-take-container .exam-submit-area .exam-submit-button,
.result-container .result-buttons a,
.result-container .result-buttons button {
    margin: 0 10px;
    padding: 12px 28px;
    font-size: 1.1em;
    border-radius: 8px;
    border: 2px solid #c0c0c0;
    background-color: #fff;
    color: #555;
    font-weight: bold;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.04);
}

.exam-take-container .exam-submit-area .exam-submit-button:hover,
.exam-take-container .exam-submit-area .exam-submit-button:focus,
.result-container .result-buttons a:hover,
.result-container .result-buttons button:hover,
.result-container .result-buttons a:focus,
.result-container .result-buttons button:focus {
    opacity: 0.95;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

/* ---------- list.skin.php ---------- */

.exam-list-container .exam-list li {
	
    box-shadow: 0 3px 7px rgba(0,0,0,0.05); /* exam-list hover box-shadow 와 유사하게 */
    border: 1px solid #d8d8d8; /* exam-list border color 약간 진하게 */
}

.exam-list-container .exam-list li:hover {
    box-shadow: 0 5px 10px rgba(0,0,0,0.1); /* exam-list hover box-shadow 더 진하게 */
    background-color: #fafafa; /* exam-list hover background color 변경 */
}

.exam-list-container .exam-list li a {
    padding: 22px 25px; /* exam-list padding 값 조정 */
}

.exam-list-container .exam-list .exam-subject {
    font-size: 1.4em; /* exam-list 제목 폰트 크기 확대 */
}

.exam-list-container .exam-list .exam-meta {
    font-size: 1em; /* exam-list meta 폰트 크기 확대 */
}

.exam-list-container .exam-description {
    font-size: 1.05em; /* exam-list description 폰트 크기 유지 */
    color: #666; /* exam-list description color 약간 더 연하게 */
}

.exam-list-container .no-exam {
    padding: 45px 0; /* no-exam padding 값 조정 */
    font-size: 1.2em; /* no-exam 폰트 크기 확대 */
    color: #999; /* no-exam color 더 연하게 */
}


.result-q-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 8px;}
.result-q-num { font-weight: bold; font-size: 1.15em; color:#343a40; }
.result-q-score { font-size: 0.9em; color: #6c757d; white-space: nowrap; background: #f1f3f5; padding: 3px 8px; border-radius: 4px; }
.result-q-content { margin-bottom: 18px; padding: 15px; background: #f8f9fa; border-radius: 4px; border-left: 4px solid #ced4da; line-height: 1.6; }


.result-status { margin-top: 15px; padding-top:15px; border-top: 1px dashed #eee; font-weight: bold; font-size: 1em;}
.result-status.correct { color: #198754; }
.result-status.incorrect { color: #dc3545; }
.result-status.pending-grade { color: #fd7e14; } /* 주황색 */

.result-explanation { margin-top: 15px; padding: 15px; background-color: #e7f3ff; border: 1px solid #b8daff; color: #004085; border-radius: 4px; line-height: 1.5; font-size:0.95em; }
.result-explanation dt { font-weight: bold; margin-bottom: 5px; color: #004085; }


.result-options li .fa-check { color: green; }
.result-options li .fa-times { color: red; }
.result-options li .fa-minus { color: #adb5bd; }

.result-buttons { text-align: center; margin-top: 40px; padding-top: 25px; border-top: 1px solid #eee; }
.result-buttons a, .result-buttons button { margin: 0 8px; }
	

/* ---------- 모바일 화면 대응 (예: 768px 이하) ---------- */

@media (max-width: 768px) {

    /* 공통 컨테이너 padding 축소 */
    .exam-list-container,
    .exam-info-container,
    .exam-take-container,
    .result-container {
        margin: 10px auto; /* 상하 여백 줄임 */
        padding: 10px 10px; /* 좌우 padding 대폭 축소, 상하도 약간 축소 */
        border-radius: 8px; /* border-radius 약간 줄임 */
        font-size: 14px; /* 기본 폰트 크기 약간 줄임 */
    }

    /* 제목 폰트 크기 축소 */
    .exam-list-container h1,
    .exam-info-container h1,
    .exam-take-container h1.exam-title,
    .result-container h1 {
        font-size: 1.8em; /* 모바일 제목 폰트 크기 */
        margin-bottom: 20px;
    }
    
	.exam-list-container .exam-info-wrap {
    flex-grow: 1; /* 남는 공간 차지 */
	padding: 0 20px 20px 20px;
    margin-right: 15px; /* 버튼과의 간격 */
}
	
    /* 헤더 / 요약 정보 padding 축소 */
    .exam-take-container .exam-header,
    .result-container .result-summary {
        padding: 15px 20px; /* padding 줄임 */
        margin-bottom: 25px;
        flex-direction: column; /* 헤더 내용을 세로로 쌓음 (선택 사항) */
        align-items: flex-start; /* 세로 정렬 시작점 */
        gap: 10px; /* 세로 요소 간 간격 */
    }

    .exam-take-container .exam-title,
    .result-container .result-summary h2.sr-only {
        font-size: 1.3em; /* 모바일 헤더 제목 */
    }

    .exam-timer,
    .result-summary .final-score {
        font-size: 1.1em; /* 모바일 타이머/점수 */
    }

    /* 문제 아이템 padding 축소 */
    .exam-take-container .question-item,
    .result-container .result-question-item {
        padding: 10px 10px; /* padding 좌우 축소 */
        margin-bottom: 25px;
    }

    .exam-take-container .question-number,
    .result-container .result-q-num {
        font-size: 1.1em; /* 모바일 문제 번호 */
        margin-bottom: 12px;
    }

    .exam-take-container .question-content,
    .result-container .result-q-content {
        font-size: 1em; /* 모바일 문제 내용 */
        padding: 10px 10px;
        margin-bottom: 15px;
    }

    /* 보기 항목 padding 축소 */
    .exam-take-container .question-options li,
    .result-container .result-options li {
        font-size: 1em; /* 모바일 보기 항목 */
        padding: 6px 10px;
    }

    .exam-take-container .question-options li label,
    .result-container .result-options li label {
        padding: 5px 8px; /* 모바일 label padding */
    }

    /* 주관식 입력 영역 너비 조정 */
    .exam-take-container .answer-input-s,
    .result-container .result-q-answer dd.user-answer {
        width: calc(100% - 0px); /* padding 고려 */
        padding: 10px;
    }

    /* 버튼 영역 및 버튼 크기 조정 */
    .exam-take-container .exam-submit-area,
    .result-container .result-buttons {
        margin-top: 30px;
        padding-top: 20px;
    }

    .exam-take-container .exam-submit-area .exam-submit-button,
    .result-container .result-buttons a,
    .result-container .result-buttons button {
        padding: 10px 10px; /* 모바일 버튼 padding */
        font-size: 1em; /* 모바일 버튼 폰트 크기 */
    }

    /* 목록 페이지 링크 padding 조정 */
    .exam-list-container .exam-list li a {
        padding-right: 15px; /* 모바일에서는 버튼 공간 덜 필요 */
        padding-left: 10px; /* 기본 좌측 패딩 추가 */
    }
	.exam-list-container .exam-list li a .result-button {
        position: static; /* 모바일에서는 일반 흐름으로 변경 */
        transform: none;
        display: block; /* 버튼을 블록 요소로 변경 */
        margin-top: 10px; /* 위 요소와 간격 */
        width: 100%; /* 너비 100% */
        box-sizing: border-box; /* padding 포함하여 너비 계산 */
    }
	
	.exam-list-container .exam-list .exam-subject,
    .exam-list-container .exam-list .exam-meta {
         padding-right: 0; /* 모바일에서는 오른쪽 여백 제거 */
    }

    .exam-list-container .exam-list li a:hover,
    .exam-list-container .exam-list li a:focus {
        padding-left: 10px; /* hover 시 padding-left 유지 */
    }

    .exam-list-container .exam-list .exam-subject {
        font-size: 1.2em; /* 모바일 목록 제목 */
    }

    .exam-list-container .exam-list .exam-meta {
        font-size: 0.9em; /* 모바일 목록 메타 정보 */
    }

    .exam-list-container .exam-description {
        font-size: 0.95em; /* 모바일 목록 설명 */
    }

    /* 정보 페이지 디테일 */
    .exam-info-container .exam-info-details {
        padding: 14px;
    }

    .exam-info-container .exam-info-details dt,
    .exam-info-container .exam-info-details dd {
        font-size: 0.95em; /* 모바일 정보 폰트 */
    }

    .exam-info-container .exam-start-button {
        font-size: 1.1em; /* 모바일 시작 버튼 */
        padding: 12px 25px;
    }
}