@charset "UTF-8";

.close {position: absolute; top: 24px; right: 50px; width: 30px; height: 30px;}
.close::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 2px; height: 20px; background: var(--highlight); border-radius: 999px;}
.close::after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); width: 2px; height: 20px; background: var(--highlight); border-radius: 999px;}


.top {padding-top: 236px;}

.top .title {text-align: center;}

.top .title .tit {position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; font-family: 'Gmarket Sans', sans-serif; font-weight: 700; font-size: 1.75rem; color: var(--darkgray);}
.top .title .tit span {margin-right: 14px;}
.top .title .tit span:last-child {margin-right: 0;}
.top .title .tit .bubble {position: relative; width: 64px; margin-right: 20px; font-size: 1.75rem;}
.top .title .tit .bubble img {display: block; width: 100%; height: 100%; object-fit: contain;}
.top .title .tit .bubble span {position: absolute; top: 8px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff;}


.section {margin-bottom: 100px;}


.info {position: relative; padding-top: 4.75rem;}
.info .btn-area {display: -webkit-flex; display: flex; justify-content: end; align-items: center; gap: 16px; margin-top: -1.35rem; margin-bottom: 10px;}
.info .btn {display: -webkit-flex; display: flex; justify-content: start; align-items: center; gap: 10px; font-weight: 400; font-size: 1.125rem; color: #666666; letter-spacing: -0.5px;}
.info .btn i {font-size: 0.875rem;}
.icon-email {height: 14px;}
.icon-email img {display: block; width: 100%; height: 100%; object-fit: contain;}

/* .info .ul-table {display: grid; grid-template-columns: 1fr 1fr 2fr 2fr;} */
/* .info .ul-table {display: grid; grid-template-columns: 20fr 16fr 38fr 8fr 38fr;} */
.info .ul-table {display: grid; grid-template-columns: 5fr 4fr 9.5fr minmax(66px, 2fr) 9.5fr;}
.info .ul-table .item {padding: 13px 0.5rem; text-align: center; display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
.info .ul-table .th {background: #F1F9F9; font-weight: 700;}
/* .info .ul-table .th-textbook {grid-column: 3 / span 2;} */
.info .ul-table .th-textbook {grid-column: 3 / span 3;}
.info .ul-table .td {border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);}
.info .ul-table .td:last-child {border-right: 0;}
.info .ul-table .td-grade, .info .ul-table .td-name {word-break: normal;}


.sub-tit {width: 100%; border-bottom: 1px solid var(--border);}
.sub-tit span {display: -webkit-flex; display: flex; justify-content: center; align-items: center; width: -webkit-fit-content; width: fit-content; padding: 8px 2.25rem; background: var(--tiffanyblue); border-radius: 4px 4px 0 0; font-weight: 800; font-size: 1.25rem; color: #fff; text-align: center; margin-bottom: -1px;}

.review-area {display: grid; grid-template-columns: auto 12%; gap: 60px; align-items: end;}
.review-area .box {padding: 40px 78px; background: #fff; border: 1px solid var(--border); font-size: 1.063rem; line-height: 1.8;}
.review-area .box .level {font-family: "Gmarket Sans"; font-weight: 700; font-size: 2.5rem; color: #2A9185;}
.review-area .character img {display: block; width: 100%; height: 100%; object-fit: contain;}
.review-area .comment {white-space: pre-line;}

.sub-tit2 {display: -webkit-flex; display: flex; justify-content: start; align-items: center; column-gap: 10px; padding-left: 14px; position: relative; font-weight: 800; font-size: 1.125rem; color: var(--darkgray);}
.sub-tit2::before {position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: inline-block; content: ''; width: 4px; height: 100%; background: var(--tiffanyblue); border-radius: 999px;}

.graph .chart-area {display: grid; grid-template-columns: repeat(2, calc(50% - 12px)); align-items: stretch; gap: 24px;}
.graph .canvas-area {position: relative; height: 412px; padding: 20px 24px 60px; border: 1px solid var(--border);}
.graph .con:nth-child(2) .canvas-area {padding: 20px 0px 60px;}
.graph .radar-chart-area {padding: 20px 0px 60px;}
.graph .canvas-area canvas {width: 100%; height: 100%; max-height: 330px; object-fit: contain;}

.legend-container {position: absolute; bottom: 20px; left: 24px;}
.ul-legend {display: -webkit-flex; display: flex; justify-content: start; align-items: center; gap: 16px;}
.legend {display: -webkit-flex; display: flex; justify-content: start; align-items: center; gap: 6px; cursor: pointer;}
.icon-legend1 {display: inline-block; width: 14px; height: 14px; background: rgba(243, 135, 172, 0.2); border: 1px solid rgb(243, 135, 172);}
.ul-legend .name {font-size: 0.875rem;}
.icon-legend2 {display: inline-block; width: 14px; height: 14px; background: rgba(0, 174, 168, 0.2); border: 1px solid rgb(0, 174, 168);}

.graph .chart-area .comment {padding: 30px 40px; background: #fff; border: 1px solid var(--border); font-size: 1.063rem; line-height: 1.8; grid-column: 1 / span 2;}
.graph .chart-area .comment>.item {display: -webkit-flex; display: flex; justify-content: start; align-items: start; gap: 8px;}


.criterion-area {display: grid; grid-template-columns: 282px 1fr; gap: 24px;}
.criterion .ul-level {height: calc(100% - (1.35rem + 22px)); display: grid;}
.criterion .ul-level .item {display: -webkit-flex; display: flex; justify-content: start; align-items: center; background: #F1F9F9; border-bottom: 1px solid #fff; padding: 13px 1.25rem;}
.criterion .ul-level .item:last-child {border-bottom: 0;}
.criterion .ul-level .item:nth-last-child(5) {background: #aadada;}
.criterion .ul-level .item:nth-last-child(4) {background: #bbe2e2;}
.criterion .ul-level .item:nth-last-child(3) {background: #cdeaea;}
.criterion .ul-level .item:nth-last-child(2) {background: #dff1f1;}
.criterion .ul-level .item:last-child {background: #F1F9F9;}

.criterion .ul-table {display: grid; grid-template-columns: 4rem 6rem 10rem auto 3.375rem;}
.criterion .ul-table .item {padding: 13px 0.5rem; text-align: center; display: -webkit-flex; display: flex; justify-content: center; align-items: center; word-break: break-all;}
.criterion .ul-table .th {background: #F1F9F9; font-weight: 700;}
.criterion .ul-table .th-sortation {grid-column: 1 / span 3;}
.criterion .ul-table .td {border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);}
.criterion .ul-table .td-point {border-right: 0;}
.criterion .ul-table .td-criterion {padding: 13px 1.25rem; text-align: left; word-break: keep-all; justify-content: start;}
.criterion .ul-table .td-fluency {grid-row: 3 / span 4;}
.criterion .ul-table .td-total {grid-column: 1 / span 4;}


.script {height: calc(11.25rem + 62px); padding: 25px 35px; border: 1px solid var(--border); font-size: 1.25rem; line-height: 1.8;}
.script .scroll {width: 100%; height: 100%; padding: 5px; overflow-y: auto;}
.script .normal {color: #FF8200;}
.script .bad {color: #FF2442; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;}


.pronounce-area {display: -webkit-flex; display: none; justify-content: start; align-items: start; flex-wrap: wrap; gap: 20px; margin-top: 30px;}
.pronounce-area .word-pronounce {border-right: 1px solid var(--border); padding-right: 20px;}
.pronounce-area .word-pronounce:last-child {border-right: 0;}
.word-pronounce .word {font-weight: 700; font-size: 1.125rem; color: var(--darkgray1); margin-bottom: 6px; padding-left: 2px;}
.ul-phoneme {display: -webkit-flex; display: flex; justify-content: start; align-items: start; gap: 6px;}
.phoneme {text-align: center;}
.box-phoneme {width: 36px; height: 38px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; background: #ffffff; border-width: 2px; border-style: solid; border-radius: 4px; font-weight: 700; font-size: 1.125rem;}
.box-phoneme.excellent {border-color: #15B58F; color: #15B58F;}
.box-phoneme.good {border-color: #FFC149; color: #FFC149;}
.box-phoneme.fail {border-color: #FE5F75; color: #FE5F75;}

.score-phoneme {font-size: 0.75rem;}

.phonics>.script {margin-bottom: 24px;}
.phonics .comment-phonics {padding: 30px 40px; background: #fff; border: 1px solid var(--border); font-size: 1.063rem; line-height: 1.8; margin-bottom: 24px;}
.thead, .tbody {display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px;}
.thead>.item, .tbody>.item {display: grid; grid-template-columns: auto 6.25rem 7.5rem; align-items: center; justify-items: center;}
.thead>.item {background: #F1F9F9; font-weight: 700;}
.tbody>.item {background: #fff; border-bottom: 1px solid var(--border);}
.thead .th {padding: 13px 0.5rem; text-align: center;}
.tbody .td {width: 100%; height: 100%; padding: 13px 0.5rem; position: relative; text-align: center; border-right: 1px solid var(--border);}
.tbody .td:last-child {border-right: 0;}
.btn-pronounce {padding: 5px 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 4px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; column-gap: 8px; border: 1px solid var(--border); line-height: 1;}
.btn-pronounce.wrong {border: 2px solid #FF2442; color: #FF2442;}
.btn-pronounce.good {border: 2px solid #FF8200; color: #FF8200;}
.btn-pronounce.excellent {border: 2px solid #15B58F; color: #15B58F;}
.btn-pronounce i {font-size: 0.75rem; color: var(--gray);}



/* 리포트 목록 */
.top>.btn-area {display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; margin-bottom: 5.125rem; column-gap: 24px;}
.top>.btn-area .name {font-weight: 700; margin-left: auto;}
.btn-login {padding: 0.75rem 1.875rem;}
.btn-home {width: 48px; height: 48px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; background: #fff; border: 1px solid var(--highlight); border-radius: 50%;}
.btn-home i {font-size: 0.875rem; color: var(--highlight);}
.report-list {padding-top: 4.75rem;}
.report-list .ul-report .td-empty{grid-column: 1 / span 5; padding: 40px 16px; font-weight: 400; color: var(--primary, #555);}
.report-list .ul-report .btn{padding: 8px 14px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; border-radius: 999px; font-size: 1rem; color: #fff; line-height: 1;}
.report-list .ul-report .btn-next{background: var(--highlight, #5390C8);}
.report-list .ul-report .btn-next:disabled{background: #888; cursor: auto;}
.report-list .ul-report .btn-first{background: var(--darkblue, #336);}
.report-list .ul-report .btn-view {background: var(--darkblue, #336);}
.report-list .ul-report .btn-view.none{color: var(--primary,#555); background: none;}
/* //리포트 목록 */







/* Safari 14.1 이전 버전 */
@supports not (inset: 0){
	.info .btn i {margin-left: 10px;}

	.graph .chart-area .comment>.item b {margin-right: 8px;}

	.pronounce-area>* {margin-bottom: 20px; margin-right: 20px;}
    .pronounce-area>*:nth-last-child(-n+3) {margin-bottom: 0;}
    .pronounce-area>*:last-child {margin-right: 0;}
    .ul-phoneme {gap: 6px;}
    .ul-phoneme>* {margin-right: 6px;}
    .ul-phoneme>*:last-child {margin-right: 0;}

	.btn-pronounce i {margin-left: 8px;}
}



@media print {
	* {-webkit-print-color-adjust: exact; print-color-adjust: exact;} /* 배경색 보이게 설정 */
	.page-break {break-inside: avoid; break-after: auto;}

	html,body,th,td,input,select,textarea,button {font-size: 10px;}

	.close {display: none;}

	.top .title .tit .bubble {width: 46px; margin-right: 10px;}

	.top {padding-top: 0;}
	.top .logo-area {margin-bottom: 2.5rem;}
	.top .title .txt {margin-bottom: 6px;}

	.info {padding-top: 2rem;}
	.info .btn-area {display: none;}
	.info .ul-table .item {padding: 6px 0.5rem;}

	.section {margin-bottom: 22px;}

	.sub-tit {margin-bottom: 12px;}
	.sub-tit span {padding: 6px 14px;}

	.review-area {grid-template-columns: auto 10%; gap: 12px;}
	.review-area .box {padding: 10px 22px; line-height: 1.6;}

	.sub-tit2 {margin-bottom: 10px;}

	.graph .chart-area {gap: 12px;}
	.graph .canvas-area {height: 200px; padding: 10px 20px 32px;}
	.graph .canvas-area canvas {width: 100% !important; max-height: 150px;}
	.legend-container {bottom: 8px; left: 12px;}
	.icon-legend1 {width: 10px; height: 10px;}
	.icon-legend2 {width: 10px; height: 10px;}
	.graph .chart-area .comment {height: auto; padding: 10px 22px; line-height: 1.6;}

	.criterion-area {grid-template-columns: 90px 1fr; gap: 12px;}
	.criterion .ul-level {height: calc(100% - (1.35rem + 8px));}
	.criterion .ul-level .item {padding: 6px 10px;}

	.criterion .ul-table {grid-template-columns: 56px 11% 18% auto 40px;}
	.criterion .ul-table .item {padding: 6px 0.5rem;}
	.criterion .ul-table .td-criterion {padding: 6px 10px;}

	.phonics {padding-top: 1px;}

	.script {height: auto; padding: 5px 17px; line-height: 1.6;}

	.pronounce-area {margin-top: 14px;}
	.box-phoneme {width: 28px; height: 30px; margin-bottom: 5px;}

	.phonics .comment-phonics {padding: 10px 22px;}
	.thead .th, .tbody .td {padding: 6px 0.5rem;}
	.btn-pronounce {width: auto !important; min-width: 50px; padding: 3px 6px;}
}



@media screen and (max-width:1200px){
	section:not(.report-list) {padding-left: 50px; padding-right: 50px;}

	.graph .canvas-area {height: 320px;}
	.graph .canvas-area canvas {max-height: 240px;}
}

@media screen and (min-width:993px){
	.sub-tit {margin-bottom: 24px;}
	.sub-tit2 {margin-bottom: 16px;}

	.report-list .ul-report .item {padding: 13px 0.5rem;}
	.report-list .ul-report .td-empty{padding: 40px 16px;}
}

@media screen and (max-width:992px){
	section:not(.report-list) {padding-left: 40px; padding-right: 40px;}

	.close {top: 22px; right: 40px;}
	
	.top .logo-area {margin-bottom: 4rem;}
	.top .title .tit .bubble {width: 60px; margin-right: 16px;}

	.section {margin-bottom: 60px;}

	.info {padding-top: 3rem;}
	.info .ul-table .item {padding: 11px 0.5rem;}

	.sub-tit {margin-bottom: 20px;}

	.review-area {gap: 20px;}
	.review-area .box {padding: 20px 30px;}

	.sub-tit2 {margin-bottom: 14px;}

	.graph .chart-area {gap: 20px;}
	.graph .canvas-area {height: 246px; padding: 16px 20px 50px;}
	.graph .con:nth-child(2) .canvas-area {padding: 16px 0px 50px;}
	.graph .radar-chart-area {padding: 16px 0px 50px;}
	.graph .canvas-area canvas {max-height: 180px;}
	.legend-container {bottom: 10px; left: 20px;}
	.icon-legend1 {width: 12px; height: 12px;}
	.icon-legend2 {width: 12px; height: 12px;}
	.graph .chart-area .comment {padding: 20px 30px;}

	.criterion-area {grid-template-columns: 120px 1fr; gap: 20px;}
	.criterion .ul-level .item {padding: 11px 1.25rem;}
	.criterion .ul-table .item {padding: 11px 0.5rem;}
	.criterion .ul-table .td-criterion {padding: 11px 1.25rem;}

	.script {height: calc(9rem + 42px); padding: 15px 25px;}

	.pronounce-area {margin-top: 20px;}

	.phonics .comment-phonics {padding: 20px 30px;}
	.thead .th, .tbody .td {padding: 11px 0.5rem;}

	.top>.btn-area {margin-bottom: 4rem; column-gap: 16px;}
	.btn-home {width: 42px; height: 42px;}
	.report-list {padding-top: 3rem;}
	/* 새로한 반응형 */
	.top{
		padding-top: 170px;
	}
	/* 새로한 반응형 */

}

@media screen and (min-width:769px){
	.tbody {grid-auto-flow: column dense;}
	.tbody>.item:nth-child(-n+5) {grid-column: 1 / span 1}
	.tbody>.item:nth-last-child(-n+5) {grid-column: 2 / span 1}
}

@media screen and (max-width:768px){ 
	section:not(.report-list) {padding-left: 30px; padding-right: 30px;}

	.close {top: 20px; right: 30px;}

	.graph .chart-area {grid-template-columns: 1fr;}
	.graph .canvas-area {height: 266px;}
	.graph .canvas-area canvas {max-height: 200px;}
	.graph .chart-area .comment {grid-column: unset;}

	.criterion-area {grid-template-columns: 1fr;}

	.thead, .tbody {grid-template-columns: 1fr;}
	.thead>.item:last-child {display: none;}
	/* 새로한 반응형 */
	.top{
		padding-top: 150px;
	}
	/* 새로한 반응형 */
}
@media screen and (max-width:625px){
	.report-list .ul-report {position: relative; display: flex; flex-wrap: wrap;}
	.report-list .ul-report .th {display: none;}
	.report-list .ul-report .item {padding: 6px 16px;}
	.report-list .ul-report .td{font-weight: 600;width: 50%;}
	.report-list .ul-report .td:not(.td-score, .td.td-rating) {width: 100%;}

	.report-list .ul-report .td-date {padding-top: 13px; border-bottom: 1px solid var(--border);}
	.report-list .ul-report .td-series-lv {}
	.report-list .ul-report .td-textbook-name {}
	.report-list .ul-report .td-date {}
	.report-list .ul-report .td-score {}
	.report-list .ul-report .td-empty {border-top: 1px solid var(--border); text-align: center; padding: 30px 0;}
	.report-list .ul-report .td-learn{display: flex; gap: 16px; padding: 13px 16px; grid-column: 1 / span 1;}
	.report-list .ul-report .td-progress{color: var(--darkblue, #333366);}
	.report-list .ul-report .td-progress.on{color: var(--highlight, #5390C8);}
	.report-list .ul-report .td-report {padding: 13px 16px; grid-column: 1 / span 2; display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
	/* .report-list .ul-report .td-report:last-child {border-bottom: 1px solid var(--border);} */
	.report-list .ul-report .td-report:last-child::after {width: 100%; height: 1px; content: ''; display: block; background: var(--border); position: absolute; bottom: 0; right: 0;}
}
@media screen and (min-width:481px) and (max-width:992px){
	.report-list .ul-report .item {padding: 11px 0.5rem;}
	.report-list .ul-report .td-empty{padding: 30px 0;}
}

@media screen and (min-width:626px){
	/* .report-list .ul-report {display: grid; grid-template-columns: 332fr 80fr 332fr 216fr 60fr 180fr;} */
	/* .report-list .ul-report {display: grid; grid-template-columns: minmax(64px, 7fr) minmax(64px, 13fr) minmax(64px, 5fr) 28fr minmax(142px, 13fr);} */
	.report-list .ul-report {display: grid; grid-template-columns: minmax(200px, 10fr) minmax(64px, 10fr) minmax(64px, 3fr) minmax(64px, 3fr) minmax(64px, 4fr);}
	.report-list .ul-report .item {text-align: center; display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
	.report-list .ul-report .th {background: #E4E8F3; font-weight: 600;}
	/* .report-list .ul-report .th-textbook {grid-column: 1;} */
	.report-list .ul-report .td-grade, .report-list .ul-report .td-name {word-break: normal;}
	.report-list .ul-report .td{border-bottom: 1px solid var(--border, #DFDFDF); font-weight: 600;}
	.report-list .ul-report .td-progress{color: var(--darkblue, #333366);}
	.report-list .ul-report .td-progress.on{color: var(--highlight, #5390C8);}
	.report-list .ul-report .td-learn{display: flex; gap: 16px;}
}

@media screen and (max-width:480px){
	section:not(.report-list) {padding-left: 16px; padding-right: 16px;}

	.close {top: 4px; right: 10px;}
    
	.top .title .tit .bubble {width: 54px; margin-right: 10px;}

	.section {margin-bottom: 44px;}

	.info .ul-table .item {padding: 9px 0.5rem;}

	.sub-tit {margin-bottom: 16px;}

	.review-area {gap: 10px;}
	.review-area .box {padding: 10px 16px; line-height: 1.7;}

	.sub-tit2 {margin-bottom: 12px;}

	.graph .canvas-area {height: 240px; padding: 10px 10px 40px;}
	.graph .con:nth-child(2) .canvas-area {padding: 10px 0px 40px;}
	.graph .radar-chart-area {padding: 10px 0px 40px;}
	.graph .canvas-area canvas {max-height: 190px;}
	.legend-container {bottom: 8px; left: 10px;}
	.icon-legend1 {width: 10px; height: 10px;}
	.icon-legend2 {width: 10px; height: 10px;}
	.graph .chart-area .comment {padding: 10px 12px;}

	.criterion .ul-level .item {padding: 7px 1.25rem;}
	.criterion .ul-table .item {padding: 9px 0.5rem;}
	.criterion .ul-table .td-criterion {padding: 9px 1.25rem;}

	.script {height: calc(9rem + 22px); padding: 5px 7px;}

    .pronounce-area {gap: 16px;}
    .pronounce-area::before {margin-top: 16px;}
    .pronounce-area .word-pronounce {padding-right: 16px;}
    .box-phoneme {width: 32px; height: 34px;}

	.phonics .comment-phonics {padding: 10px 12px;}
	.thead .th, .tbody .td {padding: 9px 0.5rem;}
	.btn-pronounce {padding: 4px 8px; column-gap: 6px;}

	.top>.btn-area {column-gap: 12px;}
    .btn-home {width: 36px; height: 36px;}

	.top .title .tit .bubble span{top: 7px;}
	


    /* Safari 14.1 이전 버전 */
    @supports not (inset: 0){
        .pronounce-area>* {margin-bottom: 16px; margin-right: 16px;}
        .pronounce-area>*:nth-last-child(-n+3) {margin-bottom: 0;}
        .pronounce-area>*:last-child {margin-right: 0;}

		.btn-pronounce i {margin-left: 6px;}
    }
	/* 새로한 반응형 */
	.top{
		padding-top: 120px;
	}
	/* 새로한 반응형 */
}