/*
파일 : /css/unit_analysis.css
설명 : concept 기준 단원별 스킬 학습분석 화면
Version : 2.0
*/
.unit-analysis-page{
width:100%;
max-width:1500px;
margin:0 auto;
padding:24px;
box-sizing:border-box;
color:#1d2939;
}
.unit-analysis-page *{
box-sizing:border-box;
}
.unit-analysis-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:24px;
padding:26px 30px;
border:1px solid #dbe4f3;
border-radius:22px;
background:linear-gradient(135deg,#f4f7ff 0%,#eef4ff 100%);
box-shadow:0 10px 30px rgba(16,24,40,0.07);
}
.unit-analysis-title{
margin:0 0 8px;
font-size:30px;
font-weight:900;
color:#1d3b75;
}
.unit-analysis-description{
margin:0;
font-size:15px;
line-height:1.7;
color:#667085;
}
.unit-analysis-grade{
flex-shrink:0;
padding:11px 20px;
border-radius:999px;
background:#4070f4;
color:#ffffff;
font-size:17px;
font-weight:900;
box-shadow:0 8px 18px rgba(64,112,244,0.25);
}
.unit-analysis-loading{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-height:360px;
padding:40px;
border:1px solid #e4e7ec;
border-radius:20px;
background:#ffffff;
color:#667085;
box-shadow:0 8px 24px rgba(16,24,40,0.05);
}
.unit-analysis-loading p{
margin:18px 0 0;
font-size:16px;
font-weight:700;
}
.unit-analysis-spinner{
width:48px;
height:48px;
border:5px solid #e4e7ec;
border-top-color:#4070f4;
border-radius:50%;
animation:unitAnalysisSpin 0.85s linear infinite;
}
@keyframes unitAnalysisSpin{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
.unit-analysis-message{
margin:20px 0;
padding:24px;
border:1px solid #f6c66c;
border-radius:16px;
background:#fff9e8;
color:#8a5a00;
font-size:16px;
font-weight:800;
line-height:1.7;
text-align:center;
}
.unit-analysis-message.error{
border-color:#f5a3a3;
background:#fff1f1;
color:#b42318;
}
.unit-analysis-message.guest{
border-color:#f6c66c;
background:#fff9e8;
color:#8a5a00;
}
.unit-analysis-content{
display:flex;
flex-direction:column;
gap:28px;
}
.unit-overview-section,
.unit-semester-section{
padding:26px;
border:1px solid #e4e7ec;
border-radius:20px;
background:#ffffff;
box-shadow:0 10px 30px rgba(16,24,40,0.06);
}
.unit-section-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:20px;
}
.unit-section-title{
margin:0;
font-size:23px;
font-weight:900;
color:#1d2939;
}
.unit-section-description{
margin:8px 0 0;
font-size:14px;
line-height:1.6;
color:#667085;
}
.analysis-standard-badge{
flex-shrink:0;
padding:8px 14px;
border-radius:999px;
background:#eef4ff;
color:#2457c5;
font-size:13px;
font-weight:900;
}
.unit-overview-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
margin-top:22px;
}
.unit-overview-card{
position:relative;
min-height:132px;
padding:20px;
overflow:hidden;
border:1px solid #e4e7ec;
border-radius:17px;
background:#f9fafb;
transition:transform 0.2s ease,box-shadow 0.2s ease,border-color 0.2s ease;
}
.unit-overview-card:hover{
transform:translateY(-3px);
border-color:#b8c9f8;
box-shadow:0 12px 24px rgba(16,24,40,0.09);
}
.unit-overview-card.warning{
border-color:#f6d18a;
background:#fffaf0;
}
.unit-overview-card.success{
border-color:#9dd9b2;
background:#f0fff5;
}
.unit-overview-icon{
margin-bottom:12px;
font-size:28px;
}
.unit-overview-label{
margin-bottom:6px;
font-size:14px;
font-weight:800;
color:#667085;
}
.unit-overview-value{
font-size:26px;
font-weight:900;
color:#1d2939;
}
.unit-overview-card.warning .unit-overview-value{
color:#b54708;
}
.unit-overview-card.success .unit-overview-value{
color:#027a48;
}
.unit-total-progress-group{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
margin-top:22px;
}
.unit-total-progress{
padding:20px;
border:1px solid #e4e7ec;
border-radius:16px;
background:#f9fafb;
}
.unit-total-progress-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:12px;
font-size:15px;
font-weight:800;
color:#475467;
}
.unit-total-progress-header strong{
font-size:18px;
color:#2457c5;
}
.unit-total-progress-track{
width:100%;
height:15px;
overflow:hidden;
border-radius:999px;
background:#e4e7ec;
}
.unit-total-progress-bar{
width:0;
height:100%;
border-radius:999px;
transition:width 0.7s ease;
}
.unit-total-progress-bar.experience{
background:linear-gradient(90deg,#4070f4,#7c9df8);
}
.unit-total-progress-bar.mastery{
background:linear-gradient(90deg,#12b76a,#51cf88);
}
.unit-progress-description{
margin:10px 0 0;
font-size:12px;
line-height:1.6;
color:#667085;
}
.unit-semester-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:20px;
margin-bottom:22px;
}
.unit-semester-header p{
margin:7px 0 0;
font-size:14px;
line-height:1.6;
color:#667085;
}
.semester-summary{
flex-shrink:0;
padding:8px 14px;
border-radius:999px;
background:#eef4ff;
color:#2457c5;
font-size:13px;
font-weight:900;
}
.unit-card-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:20px;
}
.unit-analysis-card{
position:relative;
display:flex;
flex-direction:column;
min-width:0;
padding:21px;
border:1px solid #e4e7ec;
border-top-width:5px;
border-radius:18px;
background:#ffffff;
box-shadow:0 7px 20px rgba(16,24,40,0.06);
transition:transform 0.2s ease,box-shadow 0.2s ease,border-color 0.2s ease;
}
.unit-analysis-card:hover{
transform:translateY(-3px);
box-shadow:0 14px 30px rgba(16,24,40,0.1);
}
.unit-analysis-card.status-empty{
border-top-color:#d0d5dd;
}
.unit-analysis-card.status-unlearned{
border-top-color:#98a2b3;
}
.unit-analysis-card.status-learning{
border-top-color:#4070f4;
}
.unit-analysis-card.status-review{
border-top-color:#f79009;
}
.unit-analysis-card.status-complete{
border-top-color:#12b76a;
}
.unit-card-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:18px;
}
.unit-card-title-box{
min-width:0;
}
.unit-card-number{
margin-bottom:5px;
font-size:13px;
font-weight:900;
color:#4070f4;
}
.unit-card-title{
margin:0;
overflow:hidden;
font-size:20px;
font-weight:900;
line-height:1.4;
color:#1d2939;
text-overflow:ellipsis;
white-space:nowrap;
}
.unit-status-badge{
flex-shrink:0;
padding:6px 11px;
border-radius:999px;
font-size:12px;
font-weight:900;
white-space:nowrap;
}
.unit-status-badge.empty{
background:#f2f4f7;
color:#98a2b3;
}
.unit-status-badge.unlearned{
background:#f2f4f7;
color:#667085;
}
.unit-status-badge.learning{
background:#eef4ff;
color:#2457c5;
}
.unit-status-badge.review{
background:#fff4e5;
color:#b54708;
}
.unit-status-badge.complete{
background:#ecfdf3;
color:#027a48;
}
.unit-skill-summary-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
margin-bottom:17px;
}
.unit-stat-box{
min-width:0;
padding:13px 9px;
border-radius:12px;
background:#f9fafb;
text-align:center;
}
.unit-stat-label{
display:block;
margin-bottom:5px;
font-size:11px;
font-weight:800;
color:#667085;
}
.unit-stat-value{
display:block;
font-size:17px;
font-weight:900;
color:#1d2939;
}
.unit-stat-value.progress{
color:#2457c5;
}
.unit-stat-value.accuracy{
color:#027a48;
}
.unit-stat-value.wrong{
color:#b42318;
}
.unit-skill-progress-group{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
margin-bottom:17px;
}
.unit-progress-block{
min-width:0;
}
.unit-progress-info{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:8px;
font-size:12px;
font-weight:800;
color:#475467;
}
.unit-progress-info strong{
color:#2457c5;
}
.unit-progress-track{
width:100%;
height:10px;
overflow:hidden;
border-radius:999px;
background:#eaecf0;
}
.unit-progress-bar{
height:100%;
border-radius:999px;
transition:width 0.65s ease;
}
.unit-progress-bar.experience{
background:linear-gradient(90deg,#4070f4,#7b9bf8);
}
.unit-progress-bar.mastery{
background:linear-gradient(90deg,#12b76a,#51cf88);
}
.unit-skill-toggle{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
width:100%;
padding:11px 14px;
border:1px solid #c7d5fa;
border-radius:12px;
background:#f4f7ff;
color:#2457c5;
font-size:13px;
font-weight:900;
cursor:pointer;
transition:background 0.2s ease,border-color 0.2s ease,transform 0.2s ease;
}
.unit-skill-toggle:hover{
transform:translateY(-1px);
border-color:#4070f4;
background:#eef4ff;
}
.unit-skill-toggle[aria-expanded="true"]{
border-color:#4070f4;
background:#4070f4;
color:#ffffff;
}
.unit-toggle-icon{
font-size:11px;
}
.unit-skill-panel{
margin-top:16px;
padding-top:16px;
border-top:1px solid #eaecf0;
}
.unit-skill-panel-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:12px;
}
.unit-skill-panel-header strong{
font-size:15px;
color:#1d2939;
}
.unit-skill-panel-header span{
padding:5px 9px;
border-radius:999px;
background:#f2f4f7;
color:#667085;
font-size:11px;
font-weight:800;
}
.unit-skill-list{
display:flex;
flex-direction:column;
gap:10px;
}
.unit-skill-row{
padding:14px;
border:1px solid #e4e7ec;
border-left-width:5px;
border-radius:13px;
background:#ffffff;
}
.unit-skill-row.skill-unlearned{
border-left-color:#98a2b3;
background:#f9fafb;
}
.unit-skill-row.skill-start{
border-left-color:#7f56d9;
background:#faf8ff;
}
.unit-skill-row.skill-learning{
border-left-color:#4070f4;
background:#f7f9ff;
}
.unit-skill-row.skill-review{
border-left-color:#f79009;
background:#fffaf2;
}
.unit-skill-row.skill-mastered{
border-left-color:#12b76a;
background:#f3fff7;
}
.unit-skill-main{
display:flex;
align-items:center;
gap:10px;
margin-bottom:12px;
}
.unit-skill-status{
flex-shrink:0;
padding:5px 9px;
border-radius:999px;
font-size:11px;
font-weight:900;
white-space:nowrap;
}
.unit-skill-status.unlearned{
background:#eaecf0;
color:#667085;
}
.unit-skill-status.start{
background:#f4f0ff;
color:#6941c6;
}
.unit-skill-status.learning{
background:#eef4ff;
color:#2457c5;
}
.unit-skill-status.review{
background:#fff4e5;
color:#b54708;
}
.unit-skill-status.mastered{
background:#ecfdf3;
color:#027a48;
}
.unit-skill-name{
min-width:0;
font-size:14px;
line-height:1.5;
color:#1d2939;
word-break:keep-all;
}
.unit-skill-metrics{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
}
.unit-skill-metric{
min-width:0;
padding:9px 7px;
border-radius:9px;
background:rgba(255,255,255,0.8);
text-align:center;
}
.unit-skill-metric span{
display:block;
margin-bottom:4px;
font-size:10px;
font-weight:800;
color:#667085;
}
.unit-skill-metric strong{
display:block;
overflow:hidden;
font-size:13px;
font-weight:900;
color:#344054;
text-overflow:ellipsis;
white-space:nowrap;
}
.unit-skill-metric.wrong strong{
color:#b42318;
}
.unit-skill-empty{
padding:22px;
border:1px dashed #d0d5dd;
border-radius:12px;
background:#f9fafb;
color:#667085;
font-size:13px;
font-weight:700;
line-height:1.6;
text-align:center;
}
.page-load-error{
margin:24px;
padding:30px;
border:1px solid #f5a3a3;
border-radius:16px;
background:#fff1f1;
color:#b42318;
text-align:center;
}
.page-load-error h2{
margin:0 0 10px;
font-size:22px;
}
.page-load-error p{
margin:0;
font-size:15px;
}
.hidden{
display:none!important;
}
@media(max-width:1200px){
.unit-overview-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.unit-card-grid{
grid-template-columns:1fr;
}
}
@media(max-width:900px){
.unit-skill-summary-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.unit-skill-metrics{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:700px){
.unit-analysis-page{
padding:14px;
}
.unit-analysis-header{
align-items:flex-start;
padding:20px;
}
.unit-analysis-title{
font-size:24px;
}
.unit-analysis-description{
font-size:14px;
}
.unit-analysis-grade{
padding:8px 13px;
font-size:14px;
}
.unit-overview-section,
.unit-semester-section{
padding:18px;
}
.unit-section-header{
flex-direction:column;
}
.analysis-standard-badge{
align-self:flex-start;
}
.unit-overview-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.unit-overview-card{
min-height:115px;
padding:14px;
}
.unit-overview-icon{
font-size:23px;
}
.unit-overview-value{
font-size:21px;
}
.unit-total-progress-group{
grid-template-columns:1fr;
}
.unit-semester-header{
flex-direction:column;
}
.semester-summary{
align-self:flex-start;
}
.unit-card-title{
font-size:18px;
}
.unit-skill-progress-group{
grid-template-columns:1fr;
}
}
@media(max-width:480px){
.unit-analysis-header{
flex-direction:column;
}
.unit-analysis-grade{
align-self:flex-start;
}
.unit-overview-grid{
grid-template-columns:1fr;
}
.unit-skill-summary-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.unit-card-header{
flex-direction:column;
}
.unit-status-badge{
align-self:flex-start;
}
.unit-skill-main{
align-items:flex-start;
flex-direction:column;
}
.unit-skill-metrics{
grid-template-columns:1fr 1fr;
}
.unit-skill-panel-header{
align-items:flex-start;
flex-direction:column;
}
}