/* 폴더블8 TEST 팝업. 기존 페이지의 스타일과 겹치지 않도록 범위를 한정합니다. */
.quiz-overlay{
    position:fixed;
    inset:0;
    z-index:2200;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--spacing-layout-x-20);
    background:var(--color-container-overlay);
}
.quiz-overlay[hidden],
.quiz-overlay [hidden]{ display:none !important; }
.quiz-panel{
    position:relative;
    width:min(100%, calc(var(--spacing-gap-40) * 23 + var(--spacing-gap-20)));
    max-height:95vh;
    overflow-y:auto;
    overscroll-behavior:contain;
    border-radius:var(--radius-medium);
    background:var(--color-container-base-primary);
}
.quiz-close {
    position: absolute;
    top: var(--spacing-component-y-14);
    right: var(--spacing-component-x-16);
    z-index: 1;
    width: var(--spacing-gap-32);
    height: var(--spacing-gap-32);
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: var(--radius-small);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quiz-close img {
    width: calc(var(--spacing-gap-16) + var(--spacing-gap-2));
    height: calc(var(--spacing-gap-16) + var(--spacing-gap-2));
}
.quiz-close:hover {
    background: var(--color-container-base-low);
}
.quiz-close:active {
    background: var(--color-state-light-pressed);
}

.quiz-overlay button:focus-visible{
    outline:var(--border-width-focus) solid var(--color-border-brand-primary);
    outline-offset:var(--border-width-focus);
}

/* TEST 시작 안내 */
.quiz-intro{
    min-height:min(75vh, calc(var(--spacing-gap-40) * 15 + var(--spacing-gap-20)));
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:var(--spacing-layout-y-64) var(--spacing-gap-40) var(--spacing-layout-y-40);
    color:var(--color-text-base-primary);
    font-weight:var(--font-weight-bold);
    text-align:center;
    word-break:keep-all;
}
.quiz-intro h2{
    font-size:var(--font-size-36);
    line-height:var(--line-height-body);
}
.quiz-intro h2 strong,
.quiz-intro-description strong{
    color:var(--color-text-brand-primary);
}
.quiz-intro-description,
.quiz-intro-rewards,
.quiz-intro-tip{
    margin-top:var(--spacing-gap-20);
    font-size:var(--font-size-24);
    line-height:var(--line-height-body);
}
.quiz-intro-rewards{
    width:min(100%, calc(var(--spacing-gap-40) * 9));
    font-size:var(--font-size-18);
    table-layout:fixed;
    border-collapse:collapse;
    text-align:center;
}
.quiz-intro-rewards th,
.quiz-intro-rewards td{
    padding:var(--spacing-component-y-4) var(--spacing-component-x-8);
    border-bottom:var(--border-width-default) solid var(--color-border-base-low);
}
.quiz-intro-rewards th{
    font-weight:var(--font-weight-bold);
}
.quiz-intro-rewards td{
    font-weight:var(--font-weight-bold);
}
.quiz-intro-rewards tbody tr:last-child td{
    border-bottom:0;
}
.quiz-intro .quiz-intro-start{
    min-width:calc(var(--spacing-gap-24) * 6);
    margin-top:var(--spacing-gap-32);
    padding:var(--spacing-component-y-8) var(--spacing-gap-10);
    font-size:var(--font-size-24);
    line-height:var(--line-height-body);
}

/* 문제 풀이 */
.quiz-exam,
.quiz-results{ padding:var(--spacing-layout-y-24) var(--spacing-gap-40); }
.quiz-heading{
    display:flex;
    align-items:baseline;
}
.quiz-heading h2{
    color:var(--color-text-base-primary);
    font-size:var(--font-size-28);
    font-weight:var(--font-weight-bold);
}
.quiz-heading span{
    margin-left:var(--spacing-gap-40);
    color:var(--color-text-base-primary);
    font-size:var(--font-size-16);
    font-weight:var(--font-weight-bold);
}
.quiz-progress{
    width:calc(var(--spacing-gap-40) * 7 + var(--spacing-gap-24) + var(--spacing-gap-6));
    height:calc(var(--spacing-gap-6) - var(--border-width-default));
    margin-top:var(--spacing-gap-12);
    overflow:hidden;
    border-radius:var(--radius-small);
    background:var(--color-border-base-mid);
}
.quiz-progress span{
    display:block;
    width:5%;
    height:100%;
    border-radius:var(--radius-small);
    background:var(--color-container-brand-primary);
    transition:width .2s ease;
}
.quiz-question-card{
    margin-top:var(--spacing-gap-24);
    padding:var(--spacing-component-y-28) var(--spacing-gap-32) var(--spacing-component-y-20);
    border:var(--border-width-default) solid var(--color-border-base-low);
    border-radius:var(--radius-medium);
}
.quiz-question-label{
    display:flex;
    align-items:center;
}
.quiz-question-label strong{
    color:var(--color-text-brand-primary);
    font-size:var(--font-size-24);
}
.quiz-question-label span{
    margin-left:var(--spacing-gap-24);
    color:var(--color-text-base-tertiary);
    font-size:var(--font-size-14);
}
.quiz-question-card h3{
    margin:var(--spacing-gap-16) 0 var(--spacing-gap-24);
    color:var(--color-text-base-primary);
    font-size:var(--font-size-20);
    font-weight:var(--font-weight-bold);
    line-height:var(--line-height-body);
}
.quiz-question-card h3:focus{ outline:none; }
.quiz-options{ display:grid; gap:var(--spacing-gap-8); }
.quiz-option{
    display:flex;
    align-items:center;
    width:100%;
    min-height:calc(var(--spacing-gap-40) + var(--spacing-gap-8));
    padding:var(--spacing-component-y-8) var(--spacing-component-x-16);
    border:var(--border-width-default) solid var(--color-border-base-low);
    border-radius:var(--radius-small);
    background:var(--color-container-base-primary);
    color:var(--color-text-base-primary);
    text-align:left;
    cursor:pointer;
}
.quiz-option:hover{ border-color:var(--color-border-brand-primary); }
.quiz-option.is-selected{
    border-color:var(--color-border-brand-primary);
    background:var(--color-container-brand-secondary);
}
.quiz-option-number{
    flex:0 0 calc(var(--spacing-gap-24) + var(--border-width-default));
    display:flex;
    align-items:center;
    justify-content:center;
    width:calc(var(--spacing-gap-24) + var(--border-width-default));
    height:calc(var(--spacing-gap-24) + var(--border-width-default));
    border:var(--border-width-default) solid var(--color-border-base-high);
    border-radius:var(--radius-full);
    color:var(--color-text-base-secondary);
    font-size:var(--font-size-12);
    font-weight:var(--font-weight-bold);
}
.quiz-option.is-selected .quiz-option-number{
    border-color:var(--color-border-brand-primary);
    background:var(--color-container-brand-primary);
    color:var(--color-text-base-on-color);
}
.quiz-option-text{
    flex:1;
    margin-left:var(--spacing-gap-16);
    font-size:var(--font-size-16);
    font-weight:var(--font-weight-medium);
    line-height:var(--line-height-body);
}
.quiz-option-check{
    margin-left:var(--spacing-gap-16);
    color:var(--color-icon-brand-primary);
    font-size:var(--font-size-24);
    font-weight:var(--font-weight-bold);
}
.quiz-selection-hint{
    min-height:var(--spacing-gap-20);
    margin-top:var(--spacing-gap-16);
    color:var(--color-text-base-secondary);
    font-size:var(--font-size-14);
}
.quiz-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:var(--spacing-gap-20);
}
.quiz-actions > * + *{ margin-left:var(--spacing-gap-8); }
.quiz-button{
    min-height:calc(var(--spacing-gap-32) + var(--spacing-gap-6));
    padding:var(--spacing-component-y-8) var(--spacing-component-x-16);
    border:0;
    border-radius:var(--radius-small);
    color:var(--color-text-base-on-color);
    font-size:var(--font-size-14);
    font-weight:var(--font-weight-bold);
    cursor:pointer;
}
.quiz-button-secondary{ background:var(--color-state-dark-hover); }
.quiz-button-secondary:not(:disabled):hover{ background:var(--color-state-dark-pressed); }
.quiz-button-primary{ background:var(--color-container-brand-primary); }
.quiz-button-primary:not(:disabled):hover{ background:var(--color-state-brand-hover); }
.quiz-button:disabled{ background:var(--color-border-base-high); cursor:not-allowed; }

/* 제출 후 정답, 오답과 학습포인트 */
.quiz-panel.is-results{
    display:flex;
    flex-direction:column;
    height:95vh;
    max-height:calc(100vh - var(--spacing-layout-x-20) * 2);
    overflow:hidden;
}
.quiz-panel.is-results .quiz-results{
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
    overflow:hidden;
}
.quiz-result-header{
    flex-shrink:0;
    padding:var(--spacing-component-y-20) var(--spacing-component-x-20);
    border-radius:var(--radius-medium);
    background:var(--color-container-brand-secondary);
    text-align:center;
}
.quiz-result-eyebrow{ color:var(--color-text-base-secondary); font-size:var(--font-size-14); }
.quiz-result-header h2{
    color:var(--color-text-base-primary);
    font-size:var(--font-size-28);
}
.quiz-result-header h2 strong{ color:var(--color-text-brand-primary); }
.quiz-result-list{
    flex:1;
    min-height:0;
    margin-top:var(--spacing-gap-24);
    overflow-y:auto;
    overscroll-behavior:contain;
}
.quiz-result-actions{
    flex-shrink:0;
    align-items:stretch;
}
.quiz-result-actions .quiz-button{
    flex:1;
    min-width:0;
    white-space:normal;
    line-height:var(--line-height-body);
}
.quiz-retry-description{
    display:block;
    font-weight:400;
    font-size:var(--font-size-18);
}
.quiz-retry-reward{
    display:block;
    margin-top:var(--spacing-gap-4);
    font-size:var(--font-size-18);
    font-weight:900;
}
.quiz-review{
    padding:var(--spacing-component-y-20) var(--spacing-component-x-20);
    border:var(--border-width-default) solid var(--color-border-base-low);
    border-radius:var(--radius-medium);
}
.quiz-review + .quiz-review{ margin-top:var(--spacing-gap-16); }
.quiz-review-status{
    display:inline-block;
    margin-right:var(--spacing-gap-10);
    color:var(--color-text-feedback-success);
    font-size:var(--font-size-16);
    font-weight:var(--font-weight-bold);
}
.quiz-review.is-wrong .quiz-review-status{ color:var(--color-text-feedback-error); }
.quiz-review h3{
    display:inline;
    color:var(--color-text-base-primary);
    font-size:var(--font-size-18);
    line-height:var(--line-height-body);
}
.quiz-review-options{ margin-top:var(--spacing-gap-16); }
.quiz-review-option{
    padding:var(--spacing-component-y-8) var(--spacing-component-x-12);
    border-radius:var(--radius-small);
    color:var(--color-text-base-secondary);
    font-size:var(--font-size-14);
    line-height:var(--line-height-body);
}
.quiz-review-option.is-correct{
    background:var(--color-container-feedback-success);
    color:var(--color-text-feedback-success);
}
.quiz-review-option.is-wrong-choice{
    background:var(--color-container-feedback-error);
    color:var(--color-text-feedback-error);
}
.quiz-review-option + .quiz-review-option{ margin-top:var(--spacing-gap-4); }
.quiz-review-option strong{ margin-left:var(--spacing-gap-8); }
.quiz-learning-point{
    margin-top:var(--spacing-gap-16);
    padding:var(--spacing-component-y-12) var(--spacing-component-x-16);
    border-radius:var(--radius-medium);
    background:var(--color-container-base-low);
    color:var(--color-text-base-primary);
    font-size:var(--font-size-14);
    line-height:var(--line-height-relaxed);
}
.quiz-learning-point strong{ color:var(--color-text-base-primary); }

@media (max-width:767px){
    .quiz-overlay{ padding:var(--spacing-gap-10); }
    .quiz-panel{ max-height:95vh; border-radius:var(--radius-medium); }
    .quiz-panel.is-results{ max-height:calc(100vh - var(--spacing-gap-10) * 2); }
    .quiz-exam,
    .quiz-results{ padding:var(--spacing-gap-32) var(--spacing-layout-x-16) var(--spacing-layout-y-24); }
    .quiz-close{ top:var(--spacing-gap-8); right:var(--spacing-gap-8); }
    .quiz-intro{
        padding:var(--spacing-layout-y-64) var(--spacing-layout-x-16) var(--spacing-layout-y-24);
    }
    .quiz-intro h2{ font-size:var(--font-size-24); }
    .quiz-intro-description,
    .quiz-intro-tip{
        margin-top:var(--spacing-gap-24);
        font-size:var(--font-size-18);
    }
    .quiz-intro-rewards{
        margin-top:var(--spacing-gap-24);
        font-size:var(--font-size-18);
    }
    .quiz-intro .quiz-intro-start{
        min-width:0;
        width:100%;
        max-width:calc(var(--spacing-gap-40) * 6);
        font-size:var(--font-size-20);
    }
    .quiz-heading h2{ font-size:var(--font-size-24); }
    .quiz-heading span{ margin-left:var(--spacing-gap-20); }
    .quiz-progress{ width:min(100%, calc(var(--spacing-gap-40) * 6 + var(--spacing-gap-24) + var(--spacing-gap-6))); }
    .quiz-question-card{ margin-top:var(--spacing-gap-24); padding:var(--spacing-component-y-20) var(--spacing-component-x-16) var(--spacing-component-y-16); }
    .quiz-question-card h3{ font-size:var(--font-size-18); }
    .quiz-option{ padding:var(--spacing-component-y-8) var(--spacing-component-x-10); }
    .quiz-option-text{ margin-left:var(--spacing-gap-10); font-size:var(--font-size-14); }
    .quiz-button{ padding:var(--spacing-component-y-8) var(--spacing-component-x-10); font-size:var(--font-size-12); }
    .quiz-review{ padding:var(--spacing-component-y-16) var(--spacing-component-x-16); }
}