/*
파일 : /css/wrong.css
설명 : 초등학생용 오답 현황판
Version : 4.1
*/
.wrong-board{
width:100%;
max-width:1100px;
margin:0 auto;
padding:28px;
box-sizing:border-box;
background:linear-gradient(145deg,#fffdf5,#eef9ff);
border:3px solid #d8efff;
border-radius:32px;
box-shadow:0 14px 32px rgba(74,130,170,0.16);
}
.wrong-board h2{
margin:0 0 12px;
text-align:center;
font-size:34px;
font-weight:900;
color:#345c7d;
letter-spacing:-1px;
}
.grade-title{
width:max-content;
min-width:110px;
margin:0 auto 26px;
padding:9px 26px;
box-sizing:border-box;
text-align:center;
font-size:24px;
font-weight:900;
color:#ffffff;
background:linear-gradient(135deg,#5bc7ff,#408fe8);
border:4px solid #ffffff;
border-radius:999px;
box-shadow:0 6px 14px rgba(50,134,205,0.25);
}
#wrongBoard{
display:flex;
flex-direction:column;
gap:28px;
}
.wrong-semester{
padding:20px;
box-sizing:border-box;
background:rgba(255,255,255,0.86);
border-radius:25px;
box-shadow:0 8px 20px rgba(60,100,140,0.1);
}
.semester-1{
border:3px solid #ffe09a;
}
.semester-2{
border:3px solid #bce5ff;
}
.semester-title{
margin:0 0 18px;
padding:11px;
text-align:center;
font-size:25px;
font-weight:900;
border:0;
border-radius:17px;
}
.semester-1 .semester-title{
color:#7a5720;
background:linear-gradient(135deg,#fff0a8,#ffd06e);
}
.semester-2 .semester-title{
color:#315f80;
background:linear-gradient(135deg,#d9f2ff,#9ddcff);
}
.wrong-card-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}
.wrong-unit-card{
position:relative;
display:flex;
flex-direction:column;
min-width:0;
min-height:170px;
padding:22px 18px 17px;
box-sizing:border-box;
border-radius:22px;
transition:transform 0.2s ease,box-shadow 0.2s ease;
overflow:visible;
}
.wrong-unit-card:hover{
transform:translateY(-5px);
}
.wrong-unit-card.has-wrong{
background:linear-gradient(145deg,#fff8e5,#ffe2ad);
border:4px solid #ff8a00;
box-shadow:0 9px 20px rgba(255,138,0,0.28);
}
.wrong-unit-card.no-wrong{
background:linear-gradient(145deg,#f2fff3,#d9f7dd);
border:3px solid #79c984;
box-shadow:0 8px 18px rgba(76,160,83,0.18);
}
.wrong-unit-card.not-started{
background:linear-gradient(145deg,#faf7ff,#ebe3ff);
border:3px solid #c9b8f2;
box-shadow:0 8px 16px rgba(125,98,183,0.12);
}
.wrong-unit-number{
position:absolute;
top:12px;
left:12px;
display:flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
box-sizing:border-box;
font-size:21px;
font-weight:900;
color:#ffffff;
background:#53a9ed;
border:3px solid #ffffff;
border-radius:50%;
box-shadow:0 3px 8px rgba(47,119,174,0.24);
}
.has-wrong .wrong-unit-number{
background:#ff9b42;
}
.no-wrong .wrong-unit-number{
background:#64bd70;
}
.not-started .wrong-unit-number{
background:#9b82d0;
}
.wrong-unit-name{
display:block;
height:42px;
padding:0 0 0 45px;
box-sizing:border-box;
font-size:19px;
font-weight:900;
line-height:42px;
color:#3b5367;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.wrong-unit-result{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:10px;
padding:10px 14px;
box-sizing:border-box;
background:rgba(255,255,255,0.82);
border-radius:15px;
}
.wrong-label{
font-size:17px;
font-weight:900;
color:#647787;
white-space:nowrap;
word-break:keep-all;
}
.wrong-count{
display:inline-flex;
align-items:baseline;
justify-content:center;
width:76px;
min-width:76px;
height:52px;
padding:0 8px;
box-sizing:border-box;
font-size:30px;
font-weight:900;
font-family:inherit;
color:#ffffff;
background:linear-gradient(145deg,#ff9b42,#f47731);
border:3px solid #ffffff;
border-radius:18px;
box-shadow:0 5px 10px rgba(223,106,35,0.24);
cursor:pointer;
user-select:none;
transition:transform 0.18s ease,box-shadow 0.18s ease;
}
.no-wrong .wrong-count{
background:linear-gradient(145deg,#78cc80,#4dae5a);
box-shadow:0 5px 10px rgba(65,146,75,0.2);
cursor:default;
}
.wrong-count small{
margin-left:2px;
font-size:15px;
font-weight:800;
}
.has-wrong .wrong-count:hover{
transform:scale(1.08) rotate(-2deg);
box-shadow:0 8px 14px rgba(223,106,35,0.3);
}
.no-wrong .wrong-count:hover{
transform:none;
}
.wrong-unit-message{
margin-top:auto;
padding-top:10px;
text-align:center;
font-size:15px;
font-weight:900;
line-height:1.4;
color:#8b6b40;
white-space:nowrap;
word-break:keep-all;
}
.no-wrong .wrong-unit-message{
color:#4c8a54;
}
.not-started .wrong-unit-message{
color:#78649b;
}
.wrong-message{
max-width:620px;
margin:28px auto 4px;
padding:30px 20px;
box-sizing:border-box;
text-align:center;
font-size:20px;
font-weight:800;
line-height:1.8;
color:#49677e;
background:#ffffff;
border:3px dashed #8ed4f4;
border-radius:24px;
box-shadow:0 9px 18px rgba(70,140,180,0.12);
}
.wrong-message::before{
content:"🔐";
display:block;
font-size:45px;
}
.wrong-message p{
margin:5px 0;
}
@media(max-width:900px){
.wrong-card-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:600px){
.wrong-board{
padding:18px 12px;
border-width:2px;
border-radius:22px;
}
.wrong-board h2{
font-size:27px;
}
.grade-title{
margin-bottom:18px;
padding:8px 20px;
font-size:21px;
}
#wrongBoard{
gap:20px;
}
.wrong-semester{
padding:13px;
border-radius:20px;
}
.semester-title{
margin-bottom:13px;
padding:9px;
font-size:22px;
}
.wrong-card-grid{
grid-template-columns:1fr;
gap:12px;
}
.wrong-unit-card{
min-height:150px;
padding:18px 15px 14px;
}
.wrong-unit-name{
height:40px;
padding-left:45px;
font-size:18px;
line-height:40px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.wrong-unit-result{
margin-top:6px;
padding:9px 12px;
}
.wrong-label{
font-size:16px;
}
.wrong-count{
width:68px;
min-width:68px;
height:48px;
font-size:27px;
}
.wrong-count small{
font-size:14px;
}
.wrong-unit-message{
padding-top:8px;
font-size:14px;
white-space:nowrap;
}
.wrong-message{
margin-top:20px;
padding:24px 14px;
font-size:17px;
}
}