/*
파일 : /css/wrong_retry.css
설명 : 오답문제 재시험 화면
Version : 1.0
*/
.wrong-retry-page{
width:100%;
max-width:1000px;
margin:0 auto;
padding:28px;
box-sizing:border-box;
background:linear-gradient(145deg,#fffdf6,#eef9ff);
border:3px solid #d8efff;
border-radius:30px;
box-shadow:0 14px 30px rgba(74,130,170,0.15);
}
.wrong-retry-header{
margin-bottom:20px;
text-align:center;
}
.wrong-retry-header h2{
margin:0 0 10px;
font-size:32px;
font-weight:900;
color:#345c7d;
}
.wrong-retry-guide{
margin:0;
font-size:17px;
font-weight:700;
color:#62798b;
}
.wrong-retry-message{
margin:18px 0;
padding:13px 18px;
box-sizing:border-box;
text-align:center;
font-size:16px;
font-weight:800;
line-height:1.5;
border-radius:15px;
}
.wrong-retry-message:empty{
display:none;
}
.wrong-retry-message.loading{
color:#315f80;
background:#e5f5ff;
border:2px solid #9ddcff;
}
.wrong-retry-message.success{
color:#377743;
background:#e8f9e9;
border:2px solid #9bd4a1;
}
.wrong-retry-message.error{
color:#a94442;
background:#fff0ef;
border:2px solid #f2aaa5;
}
.wrong-retry-area{
display:flex;
flex-direction:column;
gap:20px;
}
.wrong-retry-question{
position:relative;
padding:24px 22px;
box-sizing:border-box;
background:#ffffff;
border:3px solid #cbe8f8;
border-radius:22px;
box-shadow:0 8px 18px rgba(65,115,150,0.1);
}
.wrong-retry-question-number{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:62px;
height:36px;
margin-bottom:15px;
padding:0 14px;
box-sizing:border-box;
font-size:17px;
font-weight:900;
color:#ffffff;
background:linear-gradient(135deg,#5bc7ff,#408fe8);
border-radius:999px;
box-shadow:0 4px 10px rgba(50,134,205,0.22);
}
.wrong-retry-question-text{
font-size:20px;
font-weight:800;
line-height:1.8;
color:#344f63;
white-space:pre-wrap;
word-break:keep-all;
}
.wrong-retry-image{
margin:18px 0;
text-align:center;
}
.wrong-retry-image img{
max-width:100%;
height:auto;
border-radius:14px;
}
.wrong-retry-choices{
display:flex;
flex-direction:column;
gap:10px;
margin-top:20px;
}
.wrong-retry-choice{
display:flex;
align-items:center;
gap:12px;
padding:13px 15px;
box-sizing:border-box;
font-size:17px;
font-weight:700;
color:#405b70;
background:#f7fbff;
border:2px solid #d8ebf7;
border-radius:14px;
cursor:pointer;
transition:background 0.18s ease,border-color 0.18s ease,transform 0.18s ease;
}
.wrong-retry-choice:hover{
background:#eaf7ff;
border-color:#8ed4f4;
transform:translateX(3px);
}
.wrong-retry-choice input{
width:20px;
height:20px;
margin:0;
cursor:pointer;
accent-color:#408fe8;
}
.wrong-retry-choice-number{
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
flex-shrink:0;
font-size:15px;
font-weight:900;
color:#ffffff;
background:#72baf0;
border-radius:50%;
}
.wrong-retry-choice-text{
line-height:1.5;
word-break:keep-all;
}
.wrong-retry-subjective{
margin-top:20px;
}
.wrong-retry-answer{
display:block;
width:100%;
min-height:120px;
padding:16px;
box-sizing:border-box;
font-size:17px;
font-family:inherit;
line-height:1.7;
color:#344f63;
background:#ffffff;
border:3px solid #cfe6f4;
border-radius:16px;
resize:vertical;
outline:none;
transition:border-color 0.18s ease,box-shadow 0.18s ease;
}
.wrong-retry-answer:focus{
border-color:#58afe9;
box-shadow:0 0 0 4px rgba(88,175,233,0.14);
}
.wrong-retry-button-area{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:12px;
margin-top:26px;
}
.wrong-retry-submit-button,
.wrong-retry-back-button{
min-width:190px;
padding:13px 22px;
box-sizing:border-box;
font-size:17px;
font-weight:900;
font-family:inherit;
border:0;
border-radius:15px;
cursor:pointer;
transition:transform 0.18s ease,box-shadow 0.18s ease,opacity 0.18s ease;
}
.wrong-retry-submit-button{
color:#ffffff;
background:linear-gradient(135deg,#ff9b42,#f47731);
box-shadow:0 6px 14px rgba(223,106,35,0.24);
}
.wrong-retry-back-button{
color:#315f80;
background:linear-gradient(135deg,#dff3ff,#abdfff);
box-shadow:0 6px 14px rgba(50,134,205,0.18);
}
.wrong-retry-submit-button:hover,
.wrong-retry-back-button:hover{
transform:translateY(-3px);
}
.wrong-retry-submit-button:disabled{
opacity:0.45;
cursor:default;
transform:none;
box-shadow:none;
}
.wrong-retry-result{
margin-top:24px;
}
.wrong-retry-result:empty{
display:none;
}
.wrong-retry-result-summary{
padding:22px;
text-align:center;
background:linear-gradient(145deg,#fff6df,#ffe7b2);
border:3px solid #ffc66d;
border-radius:22px;
box-shadow:0 8px 18px rgba(227,151,44,0.16);
}
.wrong-retry-result-summary h3{
margin:0 0 18px;
font-size:27px;
font-weight:900;
color:#80571f;
}
.wrong-retry-result-counts{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}
.wrong-retry-result-count{
padding:16px;
background:#ffffff;
border-radius:17px;
}
.wrong-retry-result-count span{
display:block;
margin-bottom:7px;
font-size:15px;
font-weight:800;
color:#667987;
}
.wrong-retry-result-count strong{
display:block;
font-size:28px;
font-weight:900;
}
.wrong-retry-result-count.correct strong{
color:#43a153;
}
.wrong-retry-result-count.wrong strong{
color:#e57832;
}
.wrong-retry-result-list{
display:flex;
flex-direction:column;
gap:14px;
margin-top:18px;
}
.wrong-retry-result-item{
padding:18px;
box-sizing:border-box;
background:#ffffff;
border-radius:18px;
box-shadow:0 6px 14px rgba(60,100,140,0.09);
}
.wrong-retry-result-item.correct{
border:3px solid #9bd4a1;
}
.wrong-retry-result-item.wrong{
border:3px solid #ffc08c;
}
.wrong-retry-result-title{
display:flex;
align-items:center;
gap:10px;
font-size:18px;
color:#3e596d;
}
.wrong-retry-result-title span{
font-size:25px;
}
.wrong-retry-result-answer{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin-top:14px;
}
.wrong-retry-result-answer p{
margin:0;
padding:12px;
line-height:1.6;
background:#f7fbff;
border-radius:13px;
word-break:break-word;
}
.wrong-retry-result-answer p span{
display:block;
margin-bottom:4px;
font-size:14px;
font-weight:900;
color:#678096;
}
.wrong-retry-explanation{
margin-top:13px;
padding:12px 14px;
background:#fffdf5;
border:2px solid #f2dfaa;
border-radius:13px;
}
.wrong-retry-explanation summary{
font-size:15px;
font-weight:900;
color:#795c29;
cursor:pointer;
}
.wrong-retry-explanation div{
margin-top:10px;
font-size:15px;
line-height:1.7;
color:#566b7a;
}
.wrong-retry-empty{
padding:45px 20px;
text-align:center;
background:#ffffff;
border:3px dashed #99d7a1;
border-radius:22px;
}
.wrong-retry-empty-icon{
font-size:52px;
}
.wrong-retry-empty h3{
margin:12px 0 8px;
font-size:25px;
color:#43814b;
}
.wrong-retry-empty p{
margin:0;
font-size:17px;
font-weight:700;
color:#687b6b;
}
@media(max-width:700px){
.wrong-retry-page{
padding:20px 13px;
border-width:2px;
border-radius:22px;
}
.wrong-retry-header h2{
font-size:26px;
}
.wrong-retry-guide{
font-size:15px;
}
.wrong-retry-question{
padding:19px 15px;
border-radius:18px;
}
.wrong-retry-question-text{
font-size:18px;
line-height:1.7;
}
.wrong-retry-choice{
padding:12px;
font-size:16px;
}
.wrong-retry-answer{
min-height:105px;
font-size:16px;
}
.wrong-retry-button-area{
flex-direction:column;
}
.wrong-retry-submit-button,
.wrong-retry-back-button{
width:100%;
min-width:0;
}
.wrong-retry-result-counts{
grid-template-columns:1fr;
}
.wrong-retry-result-answer{
grid-template-columns:1fr;
}

}