@charset "utf-8";

/*--------------------------------login*/
.loginWrap { display: flex; align-items: center; justify-content: center; width:100%; height:100%; }
.loginBox { padding: 56px 120px;display: flex;border-radius: 20px; gap: 48px; flex-direction: column;}
.loginCon { display: flex; align-items: center; gap:120px; }
.loginRight { display: flex; flex-direction: column; gap: 40px; }
.loginRight .ipt {height: 48px; }
.loginFooter { display: flex; align-items: center; justify-content: space-between; color:var(--gray500); border-top:1px solid var(--gray200); padding-top:16px; }

/*--------------------------------알림*/
.p_alarm .popBox { padding:20px; }
.alarmList { display: flex; flex-direction: column; gap:12px; flex:1; overflow: hidden; overflow-y: auto;}
.alarmList a { padding: 12px; display: flex; flex-direction: column; gap:12px; border-bottom: 1px solid var(--gray300); }
.alarmList a.new dt::before { content: ''; display: inline-block; width:4px; height:4px; background: var(--red500); border-radius: 50px; margin-right: 8px; margin-top:6px; }
.alarmList a.new { background: var(--gray100);}
.alarmList a dl { display: flex; flex-direction: column; gap:8px; }
.alarmList a dt { font-size: var(--ft16); font-weight: var(--fwM); display: flex; align-items: start;}
.alarmList a dt span { flex:1; }
.alarmList a dd { color:var(--gray600); font-size: var(--ft13);}


/*--------------------------------대시보드*/
.dashTranieeStatus { display: flex; gap: 8px;}
.dashTranieeStatus dl { flex:1; gap:8px; background: var(--gray100); padding:32px 24px; border-radius: 16px; display: flex; flex-direction: column; align-items: center;}
.dashTranieeStatus dl dt { color:var(--gray600); display: flex; align-items: center; gap: 4px; }
.dashTranieeStatus dl dd { font-size: var(--ft24); font-weight: var(--fwSB);}
.dashTranieeStatus dl dd span { color:var(--gray500); font-size: var(--ft16); font-weight: var(--fwM);}
.img-cr-chk { width: 240px; height: 240px; mask:none; background-image: url(../images/img/img-cr-chk.png); background-color: transparent;}
.img-cr-login3 { width:140px; height: 140px; mask:none; background-image: url(../images/img/img-cr-login3.png); background-color: transparent;}
.dashBox { border:1px solid var(--gray300); border-radius: 16px; padding:24px; display: flex; flex-direction: column; gap: 20px; height:100%; }
.dashBoxHd { display: flex; justify-content: space-between;}
.dashLabel { display: flex; align-items: center; gap:12px; }
.dashLabel li { font-size: var(--ft12); color:var(--gray600); display: flex; align-items: center; gap:6px; line-height: initial;}
.dashLabel li::before { content: ''; display: inline-block; width:8px; height:8px; background: #8979FF; }
.dashLabel li.beforeGray400::before { background: var(--gray400) !important; }
.dashLabel li:nth-child(2)::before { background:#FF928A ;}
.dashLabel li:nth-child(3)::before { background: #3CC3DF;}
.dashNotStart { display: flex; flex-direction: column; gap: 16px; }
.dashNotStart li a { display: flex; justify-content: space-between; gap:8px; border-bottom: 1px solid var(--gray200); padding-bottom: 8px; align-items: center;}
.dashNotStart li:last-child a { border-bottom:none; }
.dashNotStart dl { display: flex; flex-direction: column; gap:8px; }
.dashNotStart dl dt { display: flex; align-items: center; gap:8px; font-weight: var(--fwM);}
.dashNotStart dl dt span { color:var(--gray500); font-size: var(--ft13);}
.dashBody { flex:1; overflow: hidden; overflow-y: auto;}
.dashBody canvas { width:100%; height:100%; }

.dashMenualInfo { display: flex; flex-direction: column; gap:12px; width: 840px; }
.dashMenualInfo li { background: var(--gray100); padding: 20px; gap:40px; border-radius: 20px; display: flex; gap:20px; }
.dashMenualImg { width: 356px; height:200px; background: var(--gray200);}
.dashMenualImg1 { background-image: url(../images/menual/menual1.png);}
.dashMenualImg2 { background-image: url(../images/menual/menual2.png);}
.dashMenualImg3 { background-image: url(../images/menual/menual3.png);}
.dashMenualCon { display: flex; flex-direction: column; gap:16px; padding-top: 20px; flex:1; }
.dashMenualCon dl { display: flex; flex-direction: column; gap: 12px;}
.dashMenualCon dl dt { font-size: var(--ft20);display: flex; align-items: center; gap:8px; }
.dashMenualCon dl dd { color:var(--gray600); }
.dashMenualCon button { height:40px;}
.dashMenualNum { width: 20px;height:20px; border-radius: 50px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--ft12); color:var(--white); background: var(--gray800);}

/*--------------------------------스크립트관리*/
.scriptSetWrap { border-radius: 12px; background: var(--gray100); position: relative; background-image: url(../images/icon/bgSciprt.svg); box-shadow: var(--shadow3); border:1px solid var(--gray200); margin-right:20px; }
.scriptSetArea { flex:1; padding:20px; width:100%; height:100%; }

.zoomControls {display: flex;flex-direction: column;gap:8px;position: absolute;right: 28px;bottom: 52px;}
.zoomControls button { padding: 0; width:40px;height:40px; border-radius: 50px; border:1px solid var(--gray300);background: var(--white);}
.zoomControls button i { width:16px;height:16px; background-color: var(--black);}

.scWrap { display: flex; justify-content: center; flex-direction: column; align-items: center;}
.scWrap::after, .caseWrap + .scWrap::before  { content: ''; display: inline-block; width:1px; height:24px; background: var(--gray700);}
.scWrap:last-of-type::after { display: none;}

.scBox { width: 400px; gap:12px; border:1px solid var(--gray300); border-radius: 8px; background: var(--white); padding: 16px 12px 12px 16px; display: flex; align-items: center;}
.scBox .scBoxCon { flex:1;  display: flex; flex-direction: column; gap:8px; }
.scBox .scBoxCon textarea { text-align:left; border:none; padding: 0; width:100%; min-height:40px;}
.scBoxHd { border-bottom:1px solid var(--gray300); display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; ;}
.scBoxHd button:has(.ico-close), .caseBox button:has(.ico-close) { width:24px;height:24px; padding: 0;}
.scBoxHd select[disabled] { background: none; color:var(--blue500); opacity: 1;}
.scBoxDrag .ico-drag { width:14px;height:14px; background-color:var(--gray500);}
.scBoxHd select { border:none; padding: 0 34px 0 0; height:auto; }
.scBox .btnArea { gap:8px; }
.scBox .btnArea button { height: 28px; padding: 0 8px; }
.scBox:has(.ico-drag) .scBoxCon { border-left:1px solid var(--gray200); padding-left:12px;  }
.scBox:has(textarea:focus), .scBox:has(select:focus) { border-color:var(--primary500); box-shadow: var(--shadow1);}

/*케이스*/
.caseWrap { display: flex; justify-content: center; gap:20px; padding:24px 0 0 0; margin-bottom: 24px; position: relative; flex-direction: column; margin-left:2px; }
.caseList { display: flex; gap:20px; justify-content: center;}
.caseWrap.only .caseBox::before, .caseWrap.only .caseBox::after { display: none; }
.caseWrap.only { padding-top:0; margin-bottom:0; }
.caseBox { position: relative; border-radius: 12px; display: inline-flex;background: var(--white); flex-direction: column; padding: 20px;}
.caseBox .caseHd + .scWrap .scBoxHd button {visibility: hidden;}
.caseHd { display: flex;align-items: center;justify-content: space-between; margin-bottom: 8px; gap: 12px; }
.caseHd .ipt { flex:1; border-color:transparent; background: var(--blue100); height:32px;}
.caseHd .ipt input { background-color: transparent; color:var(--blue500); }
.caseBox:nth-of-type(2) .caseHd .ipt { background-color: var(--purple100);}
.caseBox:nth-of-type(2) .caseHd .ipt input {color:var(--purple500)}
.caseBox:nth-of-type(3) .caseHd .ipt { background-color: var(--green100);}
.caseBox:nth-of-type(3) .caseHd .ipt input {color:var(--green500)}
.caseBox:nth-of-type(4) .caseHd .ipt { background-color: var(--orange200);}
.caseBox:nth-of-type(4) .caseHd .ipt input {color:var(--orange500)}

.caseBox::before, .caseBox::after {top: -24px; position: absolute;content: '';display: inline-block;height:24px; background: url(../images/icon/orgLine1.svg); width:460px; left: -10px; background-position: right;}
.caseBox::after { top:auto; bottom:-24px; transform: scaleY(-1); }
.caseBox:nth-child(1)::before, .caseBox:last-of-type::before, .caseBox:nth-child(1)::after, .caseBox:last-of-type::after { left: -20px; width: 231px;}
.caseBox:nth-child(1)::before, .caseBox:nth-child(1)::after {left: auto; right: -20px;  }
.caseBox:last-of-type::before, .caseBox:last-of-type::after { left:-10px; transform: scaleX(-1);}
.caseBox:last-of-type::after { transform: scaleX(-1) scaleY(-1); }
.caseWrap #btnCaseAdd { display: none;}

.viewScript .scBoxHd button { visibility: hidden}
.viewScript .scBox .btnArea, .viewScript .caseHd button { display: none;}


/*--------------------------------계정관리*/
.accessLimitPrice { display: flex; align-items: center; gap:40px; }
.accessLimitPrice dl { display: flex; flex-direction: column; align-items: center; gap:8px; padding:20px 24px; border-radius: 16px; background: var(--gray100); flex:1; }
.accessLimitPrice dd { font-size: var(--ft24); font-weight: var(--fwSB);}
/*--------------------------------교육관리*/
/*-----리스트*/
.eduList { display: flex; flex-direction: column; gap:8px; }
.eduList>a { border: 1px solid var(--gray300); border-radius: 12px; padding: 20px; gap:8px; display: flex; flex-direction: column;}
.eduList>a:hover, .eduList>a.active { border-color:var(--gray400); box-shadow: var(--shadow1);}
.eduInfo { display: flex; flex-direction: column; gap:8px;}
.eduInfo>dl { display: flex; align-items: center;gap:8px; }
.eduInfo>dl>dd { color:var(--gray800)}
.eduInfo>dl>dt { display: inline-flex; align-items: center; justify-content: center;}
.eduInfo>dl>dt>i { background-color: var(--gray400); width:16px;height:16px;}
.eduBoxTarget { display: flex; align-items: center; gap:8px; }
.eduBoxTarget dl { display: flex; align-items: center; gap: 4px; color:var(--gray700)}
.eduBoxTarget dl::after { content: ''; display: inline-block; width:1px; height:12px; background: var(--gray300); margin-left:4px; }
.eduBoxTarget dl:last-child::after { display: none;}
.eduBoxTarget dl dd { font-weight: var(--fwSB);}
.eduBoxGraph { display: flex; align-items: center; gap:24px; }
.eduBoxGraph strong { color:var(--primary500); font-size: var(--ft16);}
.eduBoxGraphBar { overflow: hidden;; flex:1; height: 8px; border-radius: 50px; background: var(--gray100); position: relative; }
.eduBoxGraphBar span { position: absolute; background: var(--primary500); left:0; top:0; bottom:0; width:50%; }

.eduGroupStateList {display: flex;flex-wrap: wrap;gap:8px;overflow: hidden;overflow-y: auto;}
.eduBox { border: 1px solid var(--gray300); width: 311px; padding:20px; display: flex; flex-direction: column; gap:16px; border-radius: 12px; cursor: pointer;background: var(--white);}
.eduBox:hover { border-color:var(--gray500)}
.eduListDetail { background: var(--gray100); padding:20px 32px 32px; border-radius: 12px;}
.eduListDetailHd { border-bottom: 1px solid var(--gray300); padding-bottom: 20px; }

/*-----스크립트 설정*/
.chatCon { flex:1; padding:20px; display: flex; flex-direction: column; gap:12px;overflow: hidden; overflow-y: auto;}
.chatCon li { display: flex; }
.chatCon li>div { background: var(--green100); display: inline-flex; max-width:500px;padding:12px; border-radius: 12px;flex-direction: column; gap:4px;}
.chatCon li.user { justify-content: end;}
.chatCon li.chkEva .chk + span { color:var(--primary500)}
.chatCon li.user>div { background: var(--gray800); color:var(--white); }
.characterSet { width:300px; display: flex; flex-direction: column; gap:20px; overflow: hidden; overflow-y: auto;}
.characterList { display: flex;flex-direction: column; gap:24px; }
.characterList>div { display: flex; flex-direction: column; gap:12px; }
.characterList h4 { color:var(--gray800)}
.characterList ul { display: flex; flex-direction: column; gap:8px; }
.characterList ul li { display: flex; gap:12px; align-items: center;}
.characterList ul li:last-child { padding-bottom: 0;}
.characterList ul li button { margin-left: auto; border:1px solid var(--gray300); width:32px; height:32px; padding:0; }

.chatCon li>div:has(textarea) { width:80%}
.chatCon li>div textarea { background: transparent; border:none; width:100%; }
.chatCon li.user textarea { color: var(--white)}


/*-----통계*/
.statisChartBox { width : 455px; }
.chartDl { display: flex; align-items: center; justify-content: space-around; }
.chartDl dl { display: flex; flex-direction: column; gap:4px; text-align: center;}
.chartDl dt { color:var(--gray600); }
.chartDl dd { font-size: var(--ft20); font-weight: var(--fwSB);}
.statisChartBox { display: flex; flex-direction: column; gap:4px;}
.statisChartHd { display: flex; align-items: center; justify-content: space-between;}
.statisChartHd h3 { color:var(--gray800); font-weight: var(--fwR); font-size: var(--ft14);}

/*자주틀리는문장*/
.frequentMistakesList { display: flex; gap:8px; flex-direction: column; }
.frequentMistakesList dl { display: flex; align-items: center; }
.frequentMistakesList dt { border-radius: 8px 0 0; padding:12px 20px; background: var(--primary500); color:var(--white); }
.frequentMistakesList dd { padding: 11px 20px; border:1px solid var(--gray300); display: flex; align-items: center; gap:8px; border-radius: 0 8px 0 0; gap:12px; }
.frequentMistakesList dd div { display: flex; align-items:center;}
.frequentMistakesList dd div
.frequentMistakesList dd span { flex:1;}
.frequentMistakesDetail { flex:1; }
.frequentMistakesDetail::after { content: ''; display: inline-block; width:1px; height:12px; background: var(--gray300); margin-left:12px; }
.frequentMistakesDetail span { -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word;  display: -webkit-box; }
.frequentMistakesDetail strong { color:var(--red500)}
.frequentMistakesEV { display: flex; align-items: center; gap: 4px; }

.score { display: flex; align-items: center; flex-direction: column; gap: 8px; }
.score dt { font-weight: var(--fwSB);}
.score dd { display: flex; align-items: center;justify-content: center;color:var(--gray600); gap:8px; }
.score dd span { display: flex; align-items: center; gap:8px; font-size: var(--ft12);}
.score dd span::before { content: ''; width:8px; height:8px; -webkit-mask: no-repeat center / cover; mask-image: url(../images/icon/ico-arw-fill.svg); -webkit-mask-image: url(../images/icon/ico-arw-fill.svg); display: inline-block; }
.score dd span.row::before { background:var(--red500); }
.score dd span.high::before { background: var(--blue500); transform: rotate(180deg);}

/*교육생별 통계*/
.statisRankCon { padding:20px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; background: var(--blue100);}
.statisRankConLeft { display: flex; align-items: center; gap: 20px; }

.statisRankConRight { display: flex; align-items: center; gap:20px; }
.statisRankConRight > dl { display: flex; align-items: center; gap: 16px; }
.statisRankConRight > dl dt { color:var(--gray600)}
.utteranceCompar { display: flex; flex-direction: column; gap:8px; }
.utteranceCompar>li { padding:12px; background: var(--gray100); border-radius: 0 8px 8px; max-width: 70%; }
.utteranceCompar>li:last-child { background: var(--blue100);}
.utteranceCompar>li.err:last-child { background: var(--red100);}
.utteranceComparCmt { margin-top: 8px; border-top:1px dashed var(--gray300); padding-top: 8px; font-size: var(--ft13); }
.utteranceComparCmt::before { content: ''; margin-right:8px; display: inline-block; width:20px;height:20px; background-image: url(../images/icon/ico-cmt.svg); mask-image: none; background-size: cover; vertical-align: bottom;}

.statTraineeSel { display: flex; flex-direction: column; gap:8px; flex:1; overflow: hidden; overflow-y: auto;}
.statTraineeSel a  { border-radius: 12px; padding: 12px 20px 12px 16px; border:1px solid var(--gray200); display: flex; align-items: center; justify-content: space-between; gap:24px; }
.statTraineeSel a.active { border-color:var(--gray400); box-shadow: var(--shadow2);}
.statTraineeSel a strong { width: 64px; }
.statTraineeSel a>* { display: flex; align-items: center;}
.statTraineeSel a .line { width:1px; height:12px; background: var(--gray300);}

.statSelScript select { font-size: var(--ft18); font-weight: var(--fwSB); border: none; padding-left:0; width:auto; }

.bar { height:8px; display: flex; background: var(--gray200); border-radius: 50px; flex:1; position: relative; overflow: hidden; min-width:72px; }
.bar span { top:0; left:0; bottom:0; width: 50%; background: var(--primary500);}

/*---교육대상*/
.eduGroupList { flex:1; overflow: hidden; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;}
.eduGroupList a { display: flex; flex-direction: column; border:1px solid var(--gray300); border-radius: 12px; background: var(--white); padding: 16px 20px; gap:16px;}
.eduGroupList a:hover, .eduGroupList a.active { border-color:var(--gray400); box-shadow: var(--shadow1);}

/*---교육대상>통계*/
/*지도 필요 교육생*/
.needGuidList { display: flex; flex-wrap: wrap; gap:8px; }
.needGuidList a { border: 1px solid var(--gray200); border-radius: 12px; padding:12px; gap:24px; align-items: center;}

/*---교육 내 통계*/
.groupStatCon .tbl { height: 240px; flex : initial }
.groupStatChartArea>div{ width:calc( 50% - 8px ); border:1px solid var(--gray300); padding:20px; border-radius: 12px;}
.statInEdu { border:1px solid var(--gray300); padding:20px; border-radius: 16px; display: flex; justify-content: space-between;}
.statInEdu dl { display: flex; align-items: center; justify-content: space-between;}
.statInEdu dl dt{ color:var(--gray600)}
.statInEduScore { display: flex; flex-wrap: wrap; gap:12px;}
.statInEduScore>div { display: flex; flex-direction: column; gap:8px; }
.statInEduScore dl { width:230px; background: var(--gray100); padding: 12px 24px; border-radius: 16px; }
.statInEduScore dl dd { font-weight: var(--fwSB); font-size: var(--ft18);}
.statInEduScore .exem { background: var(--green100);}
.statInEduInfo { display: flex; flex-wrap: wrap; flex:1; gap: 20px; align-items: center;}
.statInEduInfo>div { display: flex; flex-direction: column; gap:12px; border-right:1px solid var(--gray300); width: 300px; padding-right:20px; }
.statInEduInfo>div:last-child { border-right:0; }
.statInEduInfo dl { display: flex; align-items: center; gap:8px;}
.statInEduInfo dl dt { width: 130px; }
.statInEduInfo dl dd { flex:1; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; text-align: right;}

/*---교육생별 지도 필요 문장*/
.needGuidTraineeScriptList { display: flex; flex-direction: column; gap: 8px;}
.needGuidTraineeScriptList>div { border:1px solid var(--gray300); padding:20px; display: flex; flex-direction: column; gap:12px; border-radius: 16px; background: var(--white); }
.needGuidTraineeScriptList>div>a { display: flex; align-items: center; justify-content: space-between;}
.needGuidTraineeScriptList>div>a::after { content: ''; display: inline-block; width:14px; height:14px; background: url(../images/icon/ico-arw-gray.svg) no-repeat; transition: .2s ease-in-out; }
.needGuidTraineeScriptList>div>a.active::after { transform: rotate(180deg);}
.needGuidTraineeScriptList>div>a+div { display:none; border-top:1px solid var(--gray300); padding-top:20px; }
.needGuidTraineeScriptList>div>a.active+div { display: flex; }
.needGuidTraineeScriptList>div:has(.active) { box-shadow: var(--shadow1);}

/*--------------------------------통계*/
.statScriptScore th { padding-bottom: 16px; }
.statScriptScore td { padding-bottom: 12px;}
.statScriptScore td:has(.tag) { padding-left: 28px;}
.statScriptScore th i { width:20px; height:20px; }
.statScriptScore tr td:nth-child(1) { color:var(--gray600) }

/*---스크립트별*/
.statScriptCmt { background: var(--blue100); padding:16px; border-radius: 16px; padding: 16px; line-height: 160%;}

/*---교육생별*/
.statTraineeTotal{ display: flex; gap: 12px;}
.statTraineeTotal>dl { border:1px solid transparent; flex:1; padding: 16px; border-radius: 16px; display: flex; flex-direction: column; gap:8px; background: var(--blue100);}
.statTraineeTotal>dl:nth-child(2) { background: var(--red100);}
.statTraineeTotal>dl:nth-child(3) { background: var(--white); border-color:var(--gray300); }
.statTraineeTotal>dl:nth-child(4) { background: var(--white); border-color:var(--gray300);}
.statTraineeTotal>dl dt { font-size: var(--ft16); font-weight: var(--fwSB);}
.statTraineeTotal>dl dd { color: var(--gray700); }

.statTraineeSet { border-radius: 16px; padding:20px; border: 1px solid var(--gray300); display: flex; flex-direction: column; gap:20px; }
.statTraineeSetHd { display: flex; align-items: center;}
.statTraineeSetHd>div { flex:1; }