@charset "utf-8";



/* 내용 */
#quizView {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

#quizView .sectionTitle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

#quizView .sectionTitle .iconBack {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23000' d='M47 239c-9.4 9.4-9.4 24.6 0 33.9L207 433c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L97.9 256 241 113c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L47 239z'/%3E%3C/svg%3E");
    background-size: auto 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    transition: all 0.25s ease-in-out;
}

#quizView .sectionTitle:hover .iconBack {
    transform: translateX(-10px);
}

#quizView .sectionTitle h1 {
    font-size: 24px;
    color: #000;
    font-weight: 700;
}

#quizView .quizWrap {
    margin-top: 30px;
}

#quizView .quizInfo {
    font-size: 16px;
    color: #5e5e5e;
    font-weight: 600;
    word-break: keep-all;
    margin-top: 30px;
}

#quizView .quizTitle {
    font-size: 28px;
    color: #000;
    font-weight: 700;
    margin-top: 10px;
}

#quizView .quizBox {
    margin-top: 30px;
    text-align: center;
}

/* Quiz Progress Bar */
.quizProgress {
    width: 100%;
    margin-bottom: 40px;
    padding: 4px;
    background-color: #000;
    border-radius: 100vh;
    display: flex;
    align-items: center;
}

.progressBar {
    height: 10px;
    background-color: var(--keyColor);
    border-radius: 100vh;
    width: 0%;
    /* 초기 넓이 */
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* 부드러운 진행 애니메이션 */
}

#quizView .question {
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 0 2px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
}

#quizView .question strong {
    width: 40px;
    min-width: 40px;
    font-size: 20px;
    color: var(--keyColor);
    font-weight: 600;
    line-height: 40px;
    background-color: #000;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#quizView .question h1 {
    font-size: 20px;
    color: #000;
    font-weight: 600;
    line-height: 1.3;
    word-break: keep-all;
    text-align: left;
}

#quizView .quizCard {
    width: 100%;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* 문항 선택형 퀴즈 */
#quizView .card.choice {
    width: calc(25% - 15px);
    padding: 10px;
    background-color: #fff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    /* 선택 상태를 위한 기본 테두리 */
    transition: all 0.2s ease-in-out;
    /* 부드러운 전환 효과 */
}

#quizView .card.choice:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

#quizView .card.choice:has(input[type="radio"]:checked) {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

#quizView .card.choice .cardImg {
    position: relative;
    width: 100%;
    display: block;
    aspect-ratio: 0.9325;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-radius: 10px;
}

#quizView .card.choice .check {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e2e2e2' d='M10.5859 13.4142L7.75748 10.5858L6.34326 12L10.5859 16.2426L17.657 9.17154L16.2428 7.75732L10.5859 13.4142Z'/%3E%3C/svg%3E%0A");
    background-size: auto 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border: 0;
    border-radius: 50%;
    transition: all 0.25s ease-in-out;
    display: block;
}

#quizView .card.choice input[type="radio"]:checked+.cardImg .check {
    background-color: #000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233aff00' d='M10.5859 13.4142L7.75748 10.5858L6.34326 12L10.5859 16.2426L17.657 9.17154L16.2428 7.75732L10.5859 13.4142Z'/%3E%3C/svg%3E%0A");
}

/* OX 선택형 퀴즈 */
#quizView .card.ox {
    width: calc(50% - 10px);
    max-width: 300px;
    padding: 10px 10px 20px 10px;
    background-color: #fff;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}

#quizView .card.ox .cardImg {
    position: relative;
    width: 100%;
    display: block;
    aspect-ratio: 0.9325;
    background-size: auto 60%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-radius: 10px;
}

#quizView .card.ox .cardImg.O {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%233aff00' d='M8,2A6,6,0,1,1,2,8,6,6,0,0,1,8,2M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0Z'/%3E%3C/svg%3E");
}

#quizView .card.ox .cardImg.X {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23E31C79' d='M15.71,14.29,9.41,8l6.28-6.28A1,1,0,0,0,14.28.31L8,6.59,1.71.29A1,1,0,0,0,.29,1.71L6.59,8,.31,14.28a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0L8,9.41l6.29,6.3a1,1,0,0,0,1.42,0A1,1,0,0,0,15.71,14.29Z'/%3E%3C/svg%3E");
}

#quizView .card.ox:has(input[type="radio"]:checked) {
    background-color: #000;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

#quizView .card.ox:has(input[type="radio"]:checked) .cardText {
    color: #fff;
}

#quizView .card .cardText {
    font-size: 18px;
    color: #000;
    font-weight: 600;
    margin-top: 10px;
    text-align: center;
}

#quizView .btn {
    font-size: 20px;
    color: transparent;
    font-weight: 600;
    line-height: 50px;
    margin-top: 60px;
    padding: 0 30px;
    background-color: transparent;
    border: 0;
    border-radius: 100vh;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#quizView .btn.default {
    color: #5e5e5e;
    background-color: #e2e2e2;
}

#quizView .btn.next {
    color: #fff;
    background-color: var(--pointColor);
}

#quizView .btn.result {
    color: var(--keyColor);
    background-color: #000;
}
/* 설문조사형 */
#quizView .qaTitle {
    display: flex;
    align-items: center;
    gap: 10px;
}

#quizView .qaTitle h1 {
    font-size: 20px;
    color: #000;
    font-weight: 600;
    line-height: 1.3;
    word-break: keep-all;
    text-align: left;
}

#quizView .qaTitle .itemNum {
    font-size: 14px;
    color: #5e5e5e;
    font-weight: 600;
    margin-left: auto;
}

#quizView .qaList {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#quizView .qaList li {
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#quizView .qaList li input[type="radio"] {
    display: none;
}

#quizView .qaList li .qBox {
    display: flex;
    align-items: center;
    gap: 15px;
}

#quizView .qaList li .qBox span {
    width: 30px;
    min-width: 30px;
    font-size: 16px;
    color: #525252;
    font-weight: 600;
    line-height: 30px;
    background-color: #efefef;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#quizView .qaList li .qBox p {
    font-size: 18px;
    color: #000;
    font-weight: 600;
    text-align: left;
}

#quizView .qaList li .aBox {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

#quizView .answer {
    font-size: 16px;
    color: #525252;
    font-weight: 600;
    padding: 6px 20px;
    background-color: #efefef;
    border: 0;
    border-radius: 100vh;
    transition: all 0.15s ease-in-out;
}

#quizView .answer:hover {
    background-color: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

#quizView .answer:has(input[type="radio"]:checked) {
    color: var(--keyColor);
    background-color: #000;
}
/* 퀴즈 결과 */
#quizView .resultBox {
    width: 100%;
    padding: 30px;
    background-color: #fff;
    border-radius: 20px;
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

#quizView .resultTitle {
    font-size: 36px;
    color: #000;
    font-weight: 700;
}

#quizView .groupTitle {
    font-size: 24px;
    color: #000;
    font-weight: 700;
    word-break: keep-all;
}

#quizView .resultImg {
    max-width: 100%;
    height: auto;
    max-height: 300px;
    border-radius: 20px;
}

#quizView .resultText {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#quizView .resultText strong {
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    padding: 6px 20px;
    background-color: var(--pointColor);
    border-radius: 100vh;
}

#quizView .resultText p {
    font-size: 16px;
    color: #000;
    font-weight: 400;
    word-break: keep-all;
    text-align: center;
}

/* 결과 스코어 */
#quizView .scoreBox {
    width: 100%;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

#quizView .score {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#quizView .score li {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#quizView .score li label {
    font-size: 18px;
    color: #000;
    font-weight: 600;
    word-break: keep-all;
}

#quizView .scorePorgress {
    position: relative;
    width: 100%;
    padding: 4px;
    background-color: #e2e2e2;
    border-radius: 10px;
    display: flex;
    align-items: center;
}

#quizView .scorePorgress .progressBar {
    height: 30px;
    background-color: #b2b2b2;
    border-radius: 6px;
    width: 0%;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#quizView .scorePorgress .percent {
    position: absolute;
    right: 15px;
    font-size: 14px;
    font-weight: 700;
    color: #000;
}

#quizView .scorePorgress.scoreBest .percent {
    color: #fff;
}

#quizView .scorePorgress .percent::after {
    counter-reset: pct var(--percent);
    /* 변수를 카운터로 변환 */
    content: counter(pct) "%";
    /* 카운터를 텍스트로 출력 */
}

#quizView .scorePorgress.scoreBest {
    background-color: #5e5e5e;
}

#quizView .scorePorgress.scoreBest .progressBar {
    background-color: var(--keyColor);
}
#quizView .resultbox {
    position: relative;
    width: 100%;
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    color:var(--pointColor);
    font-size: 18px;
    font-weight: 600;
    gap:10px;
}

#quizView .resultbox span {
    font-size: 16px;
    font-weight: 400;
    color: #5e5e5e;
}
/* 추천 콘텐츠 */
#quizView .recomBox {
    width: 100%;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

#quizView .recomCardBox {
    width: 100%;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

#quizView .recomCard {
    width: calc((100% - 40px) / 3);
    margin: 0;
}

#quizView .recomCard .cardImg {
    position: relative;
    width: 100%;
    display: block;
    aspect-ratio: 0.8;
    background-color: #eaeaea;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-radius: 20px;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

#quizView .recomCard .cardImg:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 50%);
}

#quizView .recomCard .cardImg .tagBox {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1;
}

#quizView .recomCard .cardImg .linkBox {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1;
}

#quizView .recomCard .cardImg .textWrap {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1;
}

#quizView .recomCard .cardImg .textWrap h2 {
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    word-break: keep-all;
}

#quizView .recomCard .cardImg .textWrap p {
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 우편 배송(설문 결과 shipBox) — 소개(about) 폼 스타일 통일. level-test/show 인라인에서 이관 */
#quizView .shipBox { width: 100%; margin-top: 40px; padding: 30px; background-color: #fff; border-radius: 20px; }
#quizView .shipBox .groupTitle { margin-bottom: 16px; }
#quizView .shipForm ul li { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
#quizView .shipForm ul li span { font-size: 16px; color: #000; font-weight: 600; }
#quizView .shipForm ul li input { width: 100%; height: 40px; padding: 0 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 15px; color: #111827; outline: none; box-sizing: border-box; transition: border-color 0.2s; }
#quizView .shipForm ul li input:focus { border-color: #000; }
#quizView .shipForm ul li input[readonly] { background: #f3f3f3; }
#quizView .shipForm .formTel { display: flex; align-items: center; gap: 10px; }
#quizView .shipForm .formTel input { flex: 1; }
#quizView .shipForm .formTel button { flex: 0 0 auto; height: 40px; padding: 0 16px; border: 0; border-radius: 8px; cursor: pointer; background: #000; color: #fff; font-weight: 600; white-space: nowrap; }
#quizView .shipForm .btnSubmit { width: 100%; height: 50px; font-size: 16px; font-weight: 600; margin-top: 10px; background-color: #000; color: #fff; border: 0; border-radius: 8px; cursor: pointer; }
#quizView .shipDone strong { font-size: 18px; color: var(--pointColor); font-weight: 700; }
#quizView .shipDone p { margin-top: 10px; color: #555; line-height: 1.5; }
#quizView .shipErr { margin-bottom: 12px; padding: 10px 12px; background: var(--pointBgColor); border: 1px solid var(--pointBorderColor); border-radius: 8px; color: var(--pointColor); font-size: 14px; }

/* 결과 화면 보강 — 레이더 차트 박스 / 미응답 강조. level-test/show 인라인에서 이관 */
#quizView .ltRadarBox { width: 100%; max-width: 480px; margin: 0 auto; }
#quizView .qaList > li.qaErr { box-shadow: inset 0 0 0 2px var(--pointColor); }
#quizView .qaList > li.qaErr .qBox p { color: var(--pointColor); }

/*
Tablet Device Less than 1023px or greater than 768px
*/
@media all and (min-width:768px) and (max-width:1023px) {
    #quizView .recomCard {
        width: calc((100% - 20px) / 2);
        margin: 0;
    }
}

/*
Mobile Device Less than 768px
*/
@media all and (max-width:767px) {
    #quizView .sectionTitle {
        gap: 6px;
    }

    #quizView .sectionTitle .iconBack {
        width: 18px;
        height: 18px;
    }

    #quizView .sectionTitle:hover .iconBack {
        transform: none;
    }

    #quizView .sectionTitle h1 {
        font-size: 18px;
    }

    #quizView .card.choice {
        width: calc(50% - 10px);
    }

    /* 문항: 모바일은 질문(qBox)·답변(aBox) 상하 배치 */
    #quizView .qaList li {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    #quizView .qaList li .aBox {
        margin-left: 0;
        align-self: flex-end;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    /* 퀴즈 결과 */
    #quizView .resultBox {
        margin-top: 30px;
        padding: 20px;
        gap: 20px;
    }

    #quizView .resultTitle {
        font-size: 28px;
    }

    #quizView .groupTitle {
        font-size: 18px;
    }

    #quizView .resultText strong {
        font-size: 16px;
    }

    #quizView .resultText p {
        font-size: 14px;
    }

    #quizView .score li label {
        font-size: 16px;
    }

    /* 등급(좌)이 좁아 세로로 깨지는 것 방지 — 등급 위·설명 아래 2줄 배치 */
    #quizView .resultbox {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    #quizView .scoreBox {
        gap: 20px;
    }

    #quizView .score {
        gap: 10px;
    }

    #quizView .recomBox {
        gap: 20px;
    }

    #quizView .recomCardBox {
        margin-top: 0;
    }

    #quizView .recomCard {
        width: 100%;
        margin: 0;
    }
}