* {
    box-sizing: border-box;
}


html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    font-family: "Pretendard", "Noto Sans KR", Arial, sans-serif;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    
    /* 중앙 뒤쪽에서 확 퍼지는 조명 효과 */
    background: radial-gradient(
        circle at 50% 45%, 
        rgba(37, 99, 235, 0.45) 0%, 
        rgba(15, 23, 42, 0.75) 45%, 
        #020617 85%
    ) fixed;
    background-color: #020617;
}



/* 배경 */
.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* 1. 중앙 뒤쪽에서 확 퍼지는 은은한 파란 스포트라이트 조명 */
    background: radial-gradient(
        circle at 50% 50%, 
        rgba(37, 99, 235, 0.4) 0%, 
        rgba(29, 78, 216, 0.2) 30%, 
        rgba(2, 6, 23, 0.95) 70%,
        #020617 100%
    );
    background-color: #020617;
    z-index: -1;
    pointer-events: none;
}



.container {
    width: 90%;
    max-width: 650px;
    margin: 40px auto; /* 위아래 최소 여백 40px 확보 */
}




.card {
    /* 기존 카드 스타일을 유지하면서 배경 그라데이션만 복구 */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.03) 100%
    ) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}


.hidden {

    display:none !important;

}




/* 시작 화면 */


.logo {

    font-size:70px;

    text-align:center;

}


h1 {

    text-align:center;

    font-size:42px;

    margin-bottom:5px;

}



h2 {

    text-align:center;

}


.intro {

    text-align:center;

    font-size:20px;

    line-height:1.7;

}



.notice {

    text-align:center;

    color:#cbd5e1;

    line-height:1.6;

}




button {


    width:100%;


    padding:18px;


    margin-top:25px;


    border:none;


    border-radius:15px;


    background:


    linear-gradient(
        135deg,
        #3b82f6,
        #8b5cf6
    );


    color:white;


    font-size:18px;


    font-weight:bold;


    cursor:pointer;


    transition:0.3s;

}



button:hover {


    transform:translateY(-3px);


    box-shadow:

    0 10px 25px rgba(59,130,246,0.5);

}







/* 질문 화면 */


.top {

    margin-bottom:30px;

}



#progress-text {


    color:#cbd5e1;

}



.progress-bar {


    width:100%;


    height:12px;


    background:#374151;


    border-radius:20px;


    overflow:hidden;


    margin-top:10px;

}



#progress {


    width:0%;


    height:100%;


    background:

    linear-gradient(
        90deg,
        #22c55e,
        #3b82f6
    );


    transition:0.4s;

}





#question {


    font-size:25px;


    margin-bottom:30px;


    line-height:1.5;

}





.answer {


    background:

    rgba(255,255,255,0.1);


    padding:18px;


    margin:12px 0;


    border-radius:15px;


    cursor:pointer;


    border:

    1px solid rgba(255,255,255,0.1);


    transition:0.25s;


    font-size:17px;

}



.answer:hover {


    background:

    rgba(59,130,246,0.35);


    transform:translateX(5px);

}






/* 결과 화면 */


.result-icon {


    text-align:center;


    font-size:70px;

}



#result-type {


    color:#60a5fa;


    font-size:40px;

}




#result-name {


    margin-top:15px;

}



#result-desc {


    text-align:center;


    line-height:1.8;


    color:#e5e7eb;


    font-size:18px;

}





.job-box {


    margin-top:30px;


    padding:25px;


    border-radius:20px;


    background:

    rgba(0,0,0,0.25);

}



.job-box h3 {


    text-align:center;

}




#result-jobs {


    line-height:2;


    text-align:center;


    color:#fef3c7;

}







@keyframes fadeIn {


    from {

        opacity:0;

        transform:translateY(20px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }

}







/* 모바일 */

@media(max-width:600px){


.card {

    padding:25px;

}


h1 {

    font-size:34px;

}


#question {

    font-size:21px;

}


.answer {

    font-size:15px;

}


}

#result-government {
    line-height: 2;
    text-align: center;
    color: #fef3c7;
}

/* 전체 보기 모달 스타일 */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.modal-card {
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    text-align: left;
}

.modal-type-item {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.modal-type-title {
    color: #60a5fa;
    margin: 0 0 5px 0;
    font-size: 20px;
}

.modal-type-desc {
    font-size: 14px;
    color: #cbd5e1;
    margin-bottom: 8px;
}

.modal-type-jobs {
    margin: 3px 0;
    color: #fef3c7;
    font-size: 15px;
}

.result-icon, #result-screen h1 {
    background: transparent !important;
}