@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");
@import url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy.css');

:root {
    --essay-primary: #1E3A8A;
    --essay-bg: #EFF6FF;
    --essay-border: #D6E0EB;
    --essay-color: #475569;
    --essay-border-primary: #E6EEFF;

    --ubt-primary: #2563EB;
    --ubt-gray-50: #F8FAFC;
    --ubt-gray-100: #F1F5F9;
    --ubt-gray-200: #E2E8F0;
    --ubt-gray-th: #F5F8FD;
    --ubt-white: #FFFFFF;

    --black-opacity-8: rgba(0, 0, 0, 0.08);
    --black-opacity-12: rgba(0, 0, 0, 0.12);
    --black-opacity-20: rgba(0, 0, 0, 0.2);    
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  word-break: break-all;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: 0;
}
img { vertical-align: top;  max-width: 100%;}

h1,h2,h3,h4,h5,dl,dd,ul {
  margin: 0;
  padding: 0;
  user-select: none;
}

body { 
    background-color: var(--ubt-white); 
    color: var(--essay-color);
    line-height: 1.5;
    font-size: 0.938rem;
}

@media (max-width:1240px){html, body {font-size: 12px;}}
@media (max-width:768px) {html, body {font-size: 10px;}}
@media (max-width:500px) {html, body {font-size: 8px;}}

.v-container { width: 100%; margin: 0 auto; }
.v-container .contents { position: relative; max-width: 960px; margin: 3rem auto 5rem; }
li { list-style: none; }

::-webkit-scrollbar { width: 10px;  height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 10px;
  background-color: var(--black-opacity-8);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--black-opacity-12);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

 canvas { width: 100% !important; height: 100% !important; }

.contents-title { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0 1rem ; margin: 0 1.5rem; border-bottom: 1px solid var(--essay-border); }
.contents-title h2 { color: var(--essay-primary); font-weight: 700; margin: 0; }

/* button */
.btn-wrap { display: flex; gap: .5rem; }
.ui-button { padding: 0 1rem; border-radius: .5rem; border: none; cursor: pointer; font-size: 1.063rem; line-height: 1; }
.ui-button.lg { height: 3rem; }
.ui-button:not(.outlined) { background-color: var(--ubt-primary); color: #fff; }
.ui-button.outlined { background-color: transparent; border: 1px solid var(--ubt-primary); color: var(--ubt-primary); }

/* tab */
.ui-tabs { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.tab-btn { padding: 0.75rem 1.5rem; border: none; cursor: pointer; font-weight: 700; background: var(--ubt-gray-100); border-radius: 3.75rem; min-width: 3.5rem; height: 2.5rem; color: #64748B; font-size: 1rem; line-height: 1; }
.tab-btn.active { color: var(--ubt-white); background-color: var(--ubt-primary); }

/* table */
.ui-table {
    border: 1px solid var(--essay-border-primary);
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    overflow: hidden;      
    background-color: var(--ubt-white);
}
.ui-table.bordered { border-radius: 0.5rem; }
.ui-table.bordered tr:last-child th {border-bottom: 0;}

.ui-table table { width: 100%; border-collapse: collapse; table-layout: fixed; border-style: hidden; }

.ui-table th {background-color: var(--ubt-gray-50);}
.ui-table th, .ui-table td { border: 1px solid var(--essay-border); padding: 0.75rem 1rem; }

.ui-table tr:last-child td { border-bottom: 0; }
.ui-table td:first-child, .ui-table th:first-child { border-left: 0; }
.ui-table td:last-child, .ui-table th:last-child { border-right: 0; }
.ui-table tr:first-child th, .ui-table tr:first-child td  { border-top: 0;}

.bg-row { background-color: var(--ubt-gray-50); text-align: center; font-weight: bold; border-bottom: 0; }
.sum-row { background-color: var(--ubt-gray-50); font-weight: bold; text-align: center; }
.feedback-cell { text-align: left; vertical-align: middle; line-height: 1.5; }
.score { color: #94A3B8; }
.point-text { color: #3B82F6; background-color: var(--essay-bg); padding: 0.2rem 0.6rem; font-weight: 700; border-radius: 0.25rem; }
.divider { width: 1px; height: 0.75rem; background: #cbd5e1; }

ul li.dot { position: relative; padding-left: 1rem; margin-left: .5rem; }
ul li.dot:before { content: ""; width: 0.188rem; height: 0.188rem; min-width: 2px; border-radius: 50%; background-color: var(--essay-color); position: absolute; display: inline-block; top: .625rem; left: 0; }

/* section */
.report-box { display: flex; flex-direction: column; gap: 2.5rem; padding: 1.5rem 0; }
article { padding: 0 1.5rem; }

.section-header { background: var(--essay-bg); text-align: center; border-radius: 0.75rem 0.75rem 0 0; font-size: 1.188rem; font-weight: 700; color: var(--essay-primary); padding: 0.75rem 0; border: 1px solid var(--essay-border-primary); border-bottom: 0; }

.info-section h2 { color: #0F172A; } 
.info-section p { font-size: 1.188rem; padding-top: 0.75rem; display: flex; align-items: center; gap: 0.5rem; padding-bottom: 1.5rem;}
.info-section .dot-icon { width: 0.313rem; height: 0.313rem; background: var(--black-opacity-20); border-radius: 3.75rem; }

/* 기본 사항 */
.info-section table tr:nth-child(1) td {font-size: 1.063rem; font-weight: 700;}
.info-section table th { color: var( --essay-primary); background-color: var(--ubt-gray-50) }

/* 총점과 피드백 */
.feedback-section .feedback-container { display: flex; border: 1px solid var(--essay-border-primary); border-bottom-left-radius: 0.5rem;  border-bottom-right-radius: 0.5rem;}
.feedback-section .chart-side { width: 50%; display: flex; flex-direction: column; align-items: center; border-right: 1px solid var(--essay-border); padding: 2.5rem 1.5rem 1rem; justify-content: space-evenly; }
.feedback-section .chart-wrapper { position: relative; width: 16.5rem; height: 16.5rem; width: 100%; }

.feedback-section .grade { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.feedback-section .grade h1 { font-size: 4.25rem; color: var(--ubt-primary); font-weight: 800; margin: 0; }
.feedback-section .score-label { font-size: 1.188rem; font-weight: 700; padding: 0.5rem 1.5rem; background-color: var(--ubt-gray-100); border-radius: 2.125rem; line-height: 1; margin-top: 1rem ;}

.feedback-section .legend-box { margin-top: 1.5rem; padding: 0.5rem 1rem; background: var(--ubt-gray-50); border-radius: 0.375rem; display: flex; align-items: center; gap: 0.625rem; font-size: 0.75rem; }
.feedback-section .text-side { width: 50%; position: relative; padding: 1.5rem; }
.feedback-section .feedback-box { padding: 1rem; border-radius: .5rem; background-color: var(--ubt-gray-50); width: 100%; height: 100%; position: relative; }

/* 평가별 성취율 */
.achievement-section td:not(td:nth-child(2)) {text-align: center;}

/* progress */
.progress-container { width: 100%; display: flex; align-items: center; }
.custom-progress-bg { width: 100%; height: 1rem; background: var(--ubt-gray-200); border-radius: 1.625rem; position: relative; overflow: hidden; }
.custom-progress-fill { height: 100%; border-radius: 1.625rem; background: linear-gradient(90deg, #c97bff 0%, #157bff 50%, #25d9ce); }
.progress-label-text { position: absolute; top: 50%; transform: translate(-50%, -50%); color: var(--ubt-white); font-size: 0.688rem; }

/* ai 피드백 */
.ai-feedback-section { background: #F8F9FE; padding: 3rem 1.5rem; display: flex; flex-direction: column; gap: 2rem; font-family: sans-serif; }
.ai-section-header { text-align: center; }
.ai-section-header h1 { color: #6C63FF; font-weight: 800; font-size: 2rem; display: flex; align-items: center; justify-content: center; gap: 0.625rem; }
.ai-section-header p  { color: #8E8EA8; padding-top: 0.938rem;} 

.ai-section-title { font-size: 1.188rem; font-weight: 700; color: #3F4FE0; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.625rem; }
.ai-section-title::before { content: ''; position: relative; width: .25rem; height: 1.125rem; background: linear-gradient(180deg, #B388FF 0%, #667EFF 50%, #4ADEDE 100%); border-radius: 1rem; display: inline-block; }

.ai-feedback-card .row-flex { display: flex; border: 1px solid var(--essay-border); background: var(--ubt-white); border-radius: 0.5rem; }
.ai-feedback-card .col-left { width: 48.5%; padding: 1rem; display: flex; flex-direction: column; justify-content: space-between; }
.ai-feedback-card .col-right { width: 51.5%; padding: 1rem; border-left: 1px solid #E4E7FF;}

.ai-feedback-card .custom-label { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.ai-feedback-card .custom-label.label-top { padding-bottom: .5rem; }
.ai-feedback-card .custom-label p { font-weight: 700; color: #334155; line-height: 1; }
.ai-feedback-card .custom-label span { font-size: 0.688rem; color: #64748B; }

.ai-feedback-list { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.ai-feedback-item { background: #F9FAFF; border-left: 3px solid #8B84FF; border-radius: 0.375rem; padding: 0.75rem 1.25rem; width: 100%;     min-height: 7.5rem; }
.ai-feedback-item .item-label { color: #3E4DB8; font-weight: 700;     padding-bottom: .25rem; }

/* ai피드백 어휘/문장 분석 */
.ai-feedback-card.vocab .col-left,
.ai-feedback-card.vocab .col-right { width: 50%; }
.ai-feedback-card.vocab .col-left { padding-top: 4rem; }

.ai-feedback-card .vocab-grid { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; }

.ai-feedback-card .stat-card { display: flex; align-items: center; justify-content: space-between; background: #F7F9FF; gap: 0.75rem;    border: 1px solid #E6EAF7; border-radius: 0.375rem; padding: 0.75rem 1.5rem 0.75rem 1rem; }
.ai-feedback-card .stat-card:last-child { background: #F5F4FF; border: 1px solid #D6DAFF; }

.ai-feedback-card .stat-card .stat-label-group { display: flex; align-items: center; gap: 0.75rem; }
.ai-feedback-card .stat-card .item-text { color: #111827; font-weight: 700;}
.ai-feedback-card .stat-card .img-wrap { background-color: var(--ubt-white); border-radius: 0.25rem; width: 2.5rem; height: 2.5rem;    display: flex; align-items: center; justify-content: center; }

.ai-feedback-card .stat-card .stat-value { color: #4E5CBA; font-size: 1.625rem; font-weight: 700; font-family: 'Paperlogy', sans-serif !important; }
.ai-feedback-card .stat-card .stat-value.isLevel { color: #5D6DFF; }

/* ai피드백 문법 제안 */
.ai-feedback-card .grammar-list { display: flex; flex-direction: column; gap: 0.75rem; }
.ai-feedback-card .grammar-list .grammar-card { background: var(--ubt-white); border: 1px solid #E3E8FF; border-radius: 0.75rem; padding: 1rem; display: flex;}

.ai-feedback-card .grammar-card .grammar-grid { display: flex; flex-direction: column; gap: .5rem; }
.ai-feedback-card .grammar-card .grammar-num { width: 1.5rem; height: 1.5rem; background: #6473FA; border: 1px solid #EEF2FF; border-radius: 5.625rem; display: flex; align-items: center; justify-content: center; color: var(--ubt-white); font-weight: 600; aspect-ratio: 1 / 1; }
.ai-feedback-card .grammar-card .grammar-row { display: flex; gap: 0.5rem; padding-left: 1rem; }

.ai-feedback-card .grammar-card .grammar-badge { width: 3.5rem; height: 1.5rem; border-radius: 5.625rem; display: flex; align-items: center; justify-content: center; font-size: 0.813rem; border: 1px solid var(--essay-border); font-weight: 500; }
.ai-feedback-card .grammar-card .grammar-badge.badge-red { color: #D24B5A; background: #FFEDEE; border-color: #FFCAD0;}
.ai-feedback-card .grammar-card .grammar-badge.badge-blue { color: #4F5FD6; background: #EEF0FF; border-color: #C9CEFF;}

.target-text { text-decoration: underline; text-underline-offset: 2px; }
.result-text { color: #6A6CFF; font-weight: 700; }

/* 차트 */
.custom-chart-wrapper { padding-top: 2rem; } 
.chart-container { position: relative; height: 14.375rem; display: flex; align-items: flex-start; max-width: 22.5rem; margin: 0 auto; }
.chart-desc { font-size: 0.75rem; color: var(--essay-color); background: #F8F9FB; padding: .5rem 0; text-align: center; border-radius: .5rem; }

.chart-container .custom-label { height: 100%; position: absolute; justify-content: flex-end; }
.chart-container .custom-label.label-left {left: 0;}
.chart-container .custom-label.label-right {right: 0;}

/* 레이더 차트 */
.radar-chart-wrapper { position: relative; width: 100%; max-height: 16.25rem; margin: 0 auto; height: auto; aspect-ratio: 1 / 1; }

/* 도넛 차트  */
.donut-chart { position: relative; width: 14.875rem; height: 14.875rem; margin: 0 auto; }
.donut-chart .donut-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem;}
.donut-chart .total-label { font-size: 0.75rem; color: #737373; }
.donut-chart .total-score { font-size: 1.75rem; font-weight: 800; color: #0A0A0A; letter-spacing: -1px; }

.report-footer { display: flex; flex-direction: column; align-items: center; text-align: center; color: #64748B; font-size: 0.875rem; padding: .5rem 0 1.5rem; font-weight: 500; }
.report-footer .footer-info { display: flex; align-items: center; gap: 0.75rem; color: #94A3B8; font-size: 0.75rem; padding-top: 1.25rem; font-weight: 400; }

.type-summary :is(
    .achievement-section,
    .question-section,
    .ai-feedback-section,
    .detail-score,
    .score-label
) { display: none !important; }

@media (max-width: 500px) {
    .info-section .ui-table colgroup col:nth-child(1n),
    .set-detail-section .ui-table colgroup col:nth-child(1n) { width: 8rem !important; }
    .achievement-section .ui-table colgroup col:nth-child(2) { width: 12rem !important; }
    .question-section .ui-table colgroup col:nth-child(2),
    .question-section .ui-table colgroup col:nth-child(3) { width: 5rem !important; }

    .ai-feedback-card .row-flex { flex-direction: column; align-items: center; }
    .ai-feedback-card .col-left,
    .ai-feedback-card .col-right { width: 100% !important; }
    .ai-feedback-card .col-right { border-top: 1px solid #E4E7FF; border-left: 0; }

    .chart-desc { margin-top: 3rem; }
}