/*
파일 : /css/weakness.css
설명 : 문제 유형별 학습 분석 및 학습 가이드 팝업
Version : 3.0
*/
#weaknessBoard,
#weaknessBoard *{
box-sizing:border-box;
}
.weakness-board{
width:100%;
max-width:1280px;
margin:0 auto;
padding:24px;
color:#1d2939;
}
.weakness-board>h2{
margin:0;
font-size:30px;
font-weight:900;
line-height:1.35;
color:#172033;
}
.weakness-guide{
margin:8px 0 22px;
font-size:15px;
line-height:1.6;
color:#667085;
}
.weakness-message{
padding:20px;
border:1px solid #d7e0ec;
border-radius:14px;
font-size:15px;
font-weight:700;
text-align:center;
color:#475467;
background:#f8fafc;
}
.weakness-message.notice{
color:#8a5b00;
border-color:#efd784;
background:#fff8dc;
}
.weakness-message.error{
color:#a73939;
border-color:#eab0b0;
background:#fff0f0;
}
.weakness-message[hidden],
.weakness-content[hidden]{
display:none!important;
}
.weakness-content{
display:flex;
flex-direction:column;
gap:28px;
}
.weakness-summary,
.weakness-chart-section,
.weakness-tag-section{
padding:24px;
border:1px solid #e0e7f0;
border-radius:20px;
background:#ffffff;
box-shadow:0 7px 22px rgba(16,24,40,0.07);
}
.weakness-summary>h3{
margin:0 0 18px;
font-size:22px;
font-weight:900;
color:#1d2939;
}
.weakness-summary-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:16px;
}
.weakness-summary-card{
display:flex;
flex-wrap:wrap;
align-items:flex-end;
justify-content:center;
gap:5px;
min-height:130px;
padding:20px 12px;
border:1px solid #dce5f1;
border-radius:17px;
text-align:center;
background:linear-gradient(145deg,#ffffff,#f5f8fd);
}
.weakness-summary-card:nth-child(1){
border-top:5px solid #4776e6;
}
.weakness-summary-card:nth-child(2){
border-top:5px solid #48a868;
}
.weakness-summary-card:nth-child(3){
border-top:5px solid #db6060;
}
.weakness-summary-card:nth-child(4){
border-top:5px solid #d39a20;
}
.summary-label{
flex:0 0 100%;
font-size:14px;
font-weight:700;
color:#667085;
}
.summary-value{
font-size:36px;
font-weight:900;
line-height:1;
color:#1d2939;
}
.summary-unit{
font-size:14px;
font-weight:700;
color:#667085;
}
.weakness-section-title{
margin-bottom:20px;
}
.weakness-section-title h3{
margin:0;
font-size:22px;
font-weight:900;
color:#1d2939;
}
.weakness-section-title p{
margin:6px 0 0;
font-size:14px;
line-height:1.6;
color:#667085;
}
.weakness-chart-layout{
display:grid;
grid-template-columns:minmax(420px,1fr) 290px;
align-items:center;
gap:28px;
}
.weakness-chart-box{
display:flex;
align-items:center;
justify-content:center;
min-width:0;
padding:14px;
border:1px solid #e4e9f1;
border-radius:18px;
background:#fbfcfe;
}
#weaknessRadarCanvas{
display:block;
width:100%;
max-width:680px;
height:auto;
}
.weakness-level-guide{
padding:20px;
border:1px solid #e0e6ef;
border-radius:17px;
background:#f8fafc;
}
.weakness-level-guide>h4{
margin:0 0 15px;
font-size:18px;
font-weight:900;
color:#344054;
}
.level-guide-item{
display:flex;
align-items:flex-start;
gap:12px;
padding:14px 0;
border-bottom:1px solid #e6eaf0;
}
.level-guide-item:last-child{
border-bottom:0;
}
.level-guide-item>div{
min-width:0;
}
.level-guide-item strong{
display:block;
margin-bottom:4px;
font-size:15px;
font-weight:900;
}
.level-guide-item p{
margin:0;
font-size:13px;
line-height:1.55;
color:#667085;
}
.level-pattern{
flex:0 0 auto;
width:30px;
height:30px;
border-radius:9px;
}
.level-good .level-pattern{
background:repeating-linear-gradient(45deg,#61b47d 0,#61b47d 5px,#89c99e 5px,#89c99e 10px);
}
.level-caution .level-pattern{
background:repeating-linear-gradient(135deg,#e1a62c 0,#e1a62c 5px,#f0c76f 5px,#f0c76f 10px);
}
.level-weak .level-pattern{
background:radial-gradient(#ffffff 1.5px,transparent 1.5px),#d86161;
background-size:7px 7px;
}
.level-good strong{
color:#287546;
}
.level-caution strong{
color:#936200;
}
.level-weak strong{
color:#aa3b3b;
}
.weakness-tag-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
}
.weakness-tag-card{
position:relative;
min-width:0;
padding:20px;
border:1px solid #dfe6ef;
border-radius:17px;
background:#ffffff;
box-shadow:0 4px 14px rgba(16,24,40,0.06);
cursor:pointer;
transition:transform 0.2s ease,box-shadow 0.2s ease,border-color 0.2s ease;
}
.weakness-tag-card:hover{
transform:translateY(-3px);
border-color:#b9c9e5;
box-shadow:0 12px 28px rgba(16,24,40,0.12);
}
.weakness-tag-card:focus{
outline:3px solid rgba(64,112,244,0.25);
outline-offset:3px;
}
.weakness-tag-card.selected{
border-color:#4070f4;
box-shadow:0 0 0 3px rgba(64,112,244,0.16),0 12px 28px rgba(16,24,40,0.13);
}
.weakness-tag-card.selected .weakness-card-title{
color:#2457c5;
}
.weakness-card-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.weakness-card-title{
margin:0;
font-size:19px;
font-weight:900;
color:#1d2939;
}
.weakness-level-badge{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:58px;
padding:5px 10px;
border-radius:999px;
font-size:12px;
font-weight:900;
white-space:nowrap;
}
.weakness-level-badge.good{
color:#247444;
border:1px solid #9dd8b2;
background:#e5f6eb;
}
.weakness-level-badge.caution{
color:#8a5b00;
border:1px solid #edcc71;
background:#fff2cc;
}
.weakness-level-badge.weak{
color:#a73939;
border:1px solid #eab0b0;
background:#ffe4e4;
}
.weakness-level-badge.unlearned{
color:#667085;
border:1px solid #d0d5dd;
background:#f2f4f7;
}
.weakness-tag-pattern{
height:8px;
margin:14px 0;
border-radius:999px;
}
.weakness-tag-pattern.good{
background-color:#55aa72;
}
.weakness-tag-pattern.caution{
background-color:#dda126;
}
.weakness-tag-pattern.weak{
background-color:#d95c5c;
}
.weakness-tag-pattern.unlearned{
background-color:#98a2b3;
opacity:0.65;
}
.weakness-card-description{
min-height:48px;
margin:0 0 14px;
font-size:14px;
line-height:1.65;
color:#667085;
}
.weakness-card-stats{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:7px;
}
.weakness-stat{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-width:0;
padding:9px 3px;
border:1px solid #e4e7ec;
border-radius:10px;
text-align:center;
background:#f9fafb;
}
.weakness-stat span{
margin-bottom:4px;
font-size:11px;
color:#667085;
}
.weakness-stat strong{
font-size:13px;
font-weight:900;
color:#1d2939;
white-space:nowrap;
}
.weakness-progress{
height:8px;
margin-top:13px;
overflow:hidden;
border-radius:999px;
background:#e9edf3;
}
.weakness-progress-bar{
height:100%;
border-radius:999px;
transition:width 0.35s ease;
}
.weakness-progress-bar.good{
background:#55aa72;
}
.weakness-progress-bar.caution{
background:#dda126;
}
.weakness-progress-bar.weak{
background:#d95c5c;
}
.weakness-tag-unlearned{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:58px;
margin-top:12px;
padding:14px;
border:1px dashed #cfd4dc;
border-radius:12px;
color:#667085;
background:#f8f9fb;
}
.weakness-tag-unlearned span{
font-size:20px;
color:#98a2b3;
}
.weakness-tag-unlearned strong{
font-size:14px;
font-weight:700;
}
.weakness-popup-overlay{
position:fixed;
inset:0;
z-index:1090;
background:rgba(15,23,42,0.42);
backdrop-filter:blur(2px);
}
.weakness-popup-overlay[hidden]{
display:none!important;
}
.weakness-guide-popup{
position:fixed;
z-index:1100;
width:min(470px,calc(100vw - 24px));
max-height:calc(100vh - 24px);
overflow-y:auto;
padding:20px;
border:1px solid #cbd8ec;
border-radius:18px;
background:#ffffff;
box-shadow:0 22px 60px rgba(15,23,42,0.25);
animation:weaknessPopupOpen 0.18s ease-out;
}
.weakness-guide-popup[hidden]{
display:none!important;
}
@keyframes weaknessPopupOpen{
from{
opacity:0;
transform:translateY(6px) scale(0.98);
}
to{
opacity:1;
transform:translateY(0) scale(1);
}
}
.weakness-popup-arrow{
position:absolute;
width:16px;
height:16px;
background:#ffffff;
transform:rotate(45deg);
}
.weakness-guide-popup.placement-right .weakness-popup-arrow{
top:calc(var(--popup-arrow-offset,40px) - 8px);
left:-9px;
border-left:1px solid #cbd8ec;
border-bottom:1px solid #cbd8ec;
}
.weakness-guide-popup.placement-left .weakness-popup-arrow{
top:calc(var(--popup-arrow-offset,40px) - 8px);
right:-9px;
border-top:1px solid #cbd8ec;
border-right:1px solid #cbd8ec;
}
.weakness-guide-popup.placement-bottom .weakness-popup-arrow{
top:-9px;
left:calc(var(--popup-arrow-offset,40px) - 8px);
border-top:1px solid #cbd8ec;
border-left:1px solid #cbd8ec;
}
.weakness-guide-popup.placement-top .weakness-popup-arrow{
bottom:-9px;
left:calc(var(--popup-arrow-offset,40px) - 8px);
border-right:1px solid #cbd8ec;
border-bottom:1px solid #cbd8ec;
}
.weakness-popup-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:14px;
}
.weakness-popup-header>div{
min-width:0;
flex:1;
}
.weakness-popup-title-row{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
padding-right:4px;
}
.weakness-popup-title-row h3{
margin:0;
font-size:20px;
font-weight:900;
line-height:1.45;
color:#1d2939;
}
.weakness-popup-title-row h3 span{
color:#2457c5;
}
#weaknessPopupDescription{
margin:9px 0 0;
font-size:14px;
line-height:1.65;
color:#667085;
}
.weakness-popup-close{
display:flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
width:34px;
height:34px;
padding:0;
border:0;
border-radius:50%;
font-size:25px;
line-height:1;
color:#667085;
background:#f2f4f7;
cursor:pointer;
}
.weakness-popup-close:hover{
color:#1d2939;
background:#e4e7ec;
}
.weakness-guide-status{
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
min-width:62px;
padding:5px 10px;
border-radius:999px;
font-size:12px;
font-weight:900;
white-space:nowrap;
}
.weakness-guide-status-good{
color:#247444;
border:1px solid #9dd8b2;
background:#e5f6eb;
}
.weakness-guide-status-caution{
color:#8a5b00;
border:1px solid #edcc71;
background:#fff2cc;
}
.weakness-guide-status-weak{
color:#a73939;
border:1px solid #eab0b0;
background:#ffe4e4;
}
.weakness-guide-status-unlearned{
color:#667085;
border:1px solid #d0d5dd;
background:#f2f4f7;
}
.weakness-popup-stats{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
margin-top:18px;
}
.weakness-popup-stat{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-width:0;
min-height:68px;
padding:9px 5px;
border:1px solid #e4e7ec;
border-radius:11px;
text-align:center;
background:#f9fafb;
}
.weakness-popup-stat span{
margin-bottom:5px;
font-size:12px;
color:#667085;
}
.weakness-popup-stat strong{
max-width:100%;
font-size:15px;
font-weight:900;
color:#1d2939;
white-space:nowrap;
}
.weakness-popup-message{
margin:12px 0 0;
padding:11px 13px;
border-radius:10px;
font-size:13px;
font-weight:600;
line-height:1.6;
color:#344054;
background:#eef4ff;
}
.weakness-popup-tabs{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:5px;
margin-top:16px;
padding:4px;
border-radius:12px;
background:#f2f4f7;
}
.weakness-popup-tab{
min-width:0;
padding:9px 5px;
border:0;
border-radius:9px;
font-size:12px;
font-weight:700;
line-height:1.35;
color:#667085;
background:transparent;
cursor:pointer;
}
.weakness-popup-tab:hover{
color:#344054;
background:#e9edf3;
}
.weakness-popup-tab.active{
color:#2457c5;
background:#ffffff;
box-shadow:0 2px 8px rgba(16,24,40,0.10);
}
.weakness-popup-panel{
margin-top:14px;
padding:16px;
border:1px solid #e1e7f0;
border-radius:14px;
background:#fbfcfe;
}
.weakness-popup-panel h4{
margin:0 0 10px;
font-size:16px;
font-weight:900;
color:#1d2939;
}
.weakness-popup-panel ul{
margin:0;
padding:0;
list-style:none;
}
.weakness-popup-panel li{
position:relative;
padding:8px 0 8px 19px;
border-bottom:1px solid #edf0f4;
font-size:14px;
line-height:1.55;
color:#475467;
}
.weakness-popup-panel li:last-child{
border-bottom:0;
}
.weakness-popup-panel li::before{
content:"";
position:absolute;
top:15px;
left:2px;
width:7px;
height:7px;
border-radius:50%;
background:#5d82e5;
}
@media(max-width:1000px){
.weakness-chart-layout{
grid-template-columns:1fr;
}
.weakness-level-guide{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}
.weakness-level-guide>h4{
grid-column:1/-1;
}
.level-guide-item{
border-bottom:0;
padding:10px;
border:1px solid #e4e7ec;
border-radius:12px;
background:#ffffff;
}
}
@media(max-width:760px){
.weakness-board{
padding:16px;
}
.weakness-board>h2{
font-size:25px;
}
.weakness-summary,
.weakness-chart-section,
.weakness-tag-section{
padding:17px;
border-radius:16px;
}
.weakness-summary-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.weakness-summary-card{
min-height:105px;
padding:15px 8px;
}
.summary-value{
font-size:29px;
}
.weakness-tag-list{
grid-template-columns:1fr;
}
.weakness-level-guide{
grid-template-columns:1fr;
}
.weakness-level-guide>h4{
grid-column:auto;
}
.weakness-guide-popup.mobile{
position:fixed;
left:0!important;
right:0!important;
top:auto!important;
bottom:0;
width:100%;
max-width:none;
max-height:82vh;
padding:18px 16px calc(18px + env(safe-area-inset-bottom));
border:0;
border-radius:20px 20px 0 0;
box-shadow:0 -16px 40px rgba(15,23,42,0.25);
animation:weaknessPopupMobileOpen 0.22s ease-out;
}
.weakness-guide-popup.mobile .weakness-popup-arrow{
display:none;
}
.weakness-popup-title-row{
display:block;
padding-right:0;
}
.weakness-popup-title-row h3{
font-size:18px;
}
.weakness-guide-status{
margin-top:7px;
}
.weakness-popup-stats{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.weakness-popup-stat{
min-height:61px;
}
.weakness-popup-tabs{
position:sticky;
top:-18px;
z-index:2;
background:#eef1f5;
}
.weakness-popup-tab{
font-size:11px;
}
.weakness-tag-card:hover{
transform:none;
}
}
@keyframes weaknessPopupMobileOpen{
from{
opacity:0;
transform:translateY(100%);
}
to{
opacity:1;
transform:translateY(0);
}
}
@media(max-width:420px){
.weakness-board{
padding:12px;
}
.weakness-summary-grid{
gap:8px;
}
.weakness-summary-card{
min-height:96px;
}
.summary-value{
font-size:25px;
}
.weakness-card-stats{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.weakness-guide-popup.mobile{
max-height:86vh;
padding-left:13px;
padding-right:13px;
}
.weakness-popup-header{
gap:8px;
}
.weakness-popup-title-row h3{
font-size:17px;
}
#weaknessPopupDescription{
font-size:13px;
}
.weakness-popup-panel{
padding:13px;
}
.weakness-popup-panel li{
font-size:13px;
}
}