@charset "utf-8";
button:focus{outline:none;}
*{margin:0;padding:0;box-sizing:border-box;}

body{font-family:'Pretendard Variable','Pretendard','Noto Sans KR',sans-serif;background: #EEF0F6;;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;}

body > form{display:flex; width:100%; height:100%; justify-content:center; align-items:center;}

.page-container{display:none;background:#fff;border-radius:20px;padding:50px;max-width:800px;width:100%;box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);;flex-direction:column;align-items:center;min-height:600px;justify-content:space-between;}
.page-content{width:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.page-navigation{width:100%;display:flex;justify-content:space-between;margin-top:30px;}

h1{color:#000;font-size:2.5em;margin-bottom:20px;text-align:center;}
h2{color:#000;font-size:1.8em;margin-bottom:30px;text-align:center;}
.subtitle{color:#666;font-size:1.1em;margin-bottom:40px;text-align:center;}

.btn{background:#EA0A2A ;color:#fff;border:none;padding:15px 40px;font-size:1.1em;border-radius:50px;cursor:pointer;transition:transform 0.3s,box-shadow 0.3s;font-weight:500;}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(234,10,42,0.35);}

.btn-secondary{background:#e0e0e0;color:#666;}
.btn-secondary:hover{background:#d0d0d0;box-shadow:0 10px 20px rgba(0,0,0,0.2);}

.form-group{width:100%;margin-bottom:20px;}
.form-group label{display:block;margin-bottom:10px;color:#000;font-weight:500;}
.form-group input,.form-group select, .form-group textarea {width:100%;padding:12px;border:2px solid #e0e0e0;border-radius:10px;font-size:1em;transition:border-color 0.3s; font-family:inherit;}
.form-group input:focus,.form-group select:focus, .form-group textarea:outline{outline:none;border-color:#EA0A2A;}
.form-group textarea{resize: vertical;}

.options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;width:100%;margin-bottom:20px;}

.option-card{padding:20px;border:2px solid #e0e0e0;border-radius:15px;cursor:pointer;transition:all 0.3s;text-align:center;}
.option-card:hover{border-color:#EA0A2A;background:#FFF5F6;}
.option-card.selected{border-color:#EA0A2A;background:linear-gradient(135deg,#EA0A2A 0%,#B50820 100%);color:#fff;}
.option-card input[type="checkbox"],.option-card input[type="radio"]{display:none;}

.progress-bar{width:100%;height:8px;background:#e0e0e0;border-radius:10px;margin-bottom:30px;overflow:hidden;}
.progress-fill{height:100%;background:linear-gradient(90deg,#EA0A2A 0%,#B50820 100%);transition:width 0.3s;}

.chart-container{width:100%;max-width:500px;margin:20px auto;}

.results-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;width:100%;margin-top:30px;}

.conditional-input{display:none;margin-top:20px;width:100%;}
.conditional-input.active{display:block;}

.custom-input-container{display:none;margin-top:15px;width:100%;}
.custom-input-container.active{display:block;}

.donut-center-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;z-index:9999;}
.donut-center-text .score{font-size:3em;font-weight:700;color:#EA0A2A;}
.donut-center-text .label{font-size:0.9em;color:#666;margin-top:5px;}

.question-list{display:flex;flex-direction:column;gap:16px;}

.question-item{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:12px;border-bottom:1px solid #E5E7EB;gap:16px;}
.question-item:last-child{border-bottom:none;padding-bottom:0;}

.question-label{color:#6B7280;font-size:14px;font-weight:500;flex-shrink:0;min-width:140px;}
.question-value{color:#1F2937;font-size:14px;text-align:right;flex-grow:1;word-break:break-word;}

.tag{display:inline-block;background:linear-gradient(135deg,#EA0A2A 0%,#B50820 100%);color:#fff;padding:4px 12px;border-radius:16px;font-size:12px;margin:2px;font-weight:500;}

.page-container#page-1{width:fit-content; width:auto; max-width:none;}
#page-1{padding:50px 40px;}
#page-1 button.btn{width:100%; height:60px; text-align:center; color:#fff; font-size:18px; justify-content:center; border-radius: 12px;
background: var(--primary, #EA0A2A); position:relative;}
#page-1 button.btn:before{content:''; width:146px; height:31px; background:url(./message.png) center center / contain no-repeat; position:absolute; top:-18px; left:50%; transform:translateX(-50%); display:block;}
#page-1 h1{display:flex; align-items:center; margin:8px 0 28px; }
#page-1 .subtitle{color: var(--gray60, #505861); text-align: center; font-family: Pretendard; font-size: 20px; font-style: normal; font-weight: 400; line-height: 170%; /* 34px */ margin-bottom:20px; word-break:keep-all;}

#page-3{}
#page-3 #Question2{}

br.m_br{display:none;}
br.s_br{display:none;}



@media (max-width:768px){

br.m_br{display:block;}
.results-grid{grid-template-columns:1fr;}
.page-container{padding:30px 20px;}
h1{font-size:2em;}
h2{font-size:1.5em;}

#page-1 .subtitle {word-break:keep-all;}
#page-1 .subtitle br{display:none;}
#page-1 .subtitle br.im_br{display:block;}
}

@media (max-width:425px){
#page-1 .subtitle br{display:none;}
br.s_br{display:block;}
#page-1 .page-content{align-items:flex-start;}
#page-1 h1{align-items:flex-start; text-align:left;}
#page-1 .subtitle{text-align:left; white-space:; word-break:break-all;}



}

/* ===== 개인정보활용동의 영역 ===== */
.privacy-agree-wrap{display:flex; flex-direction:row; justify-content:space-between; align-items:center; align-self:stretch; gap:12px; padding:20px; margin-bottom:40px; border-radius:12px; background:#F6F6F6;}

.privacy-agree-label{display:flex; align-items:center; gap:8px;}

.agree-title{color:var(--black, #000); font-size:18px; font-weight:600; line-height:100%;}

#page-1 button.btn-privacy-view{display:flex; align-items:center; border:none; background:none; color:var(--gray50, #8691A0); font-size:14px; font-weight:400; line-height:100%; cursor:pointer;}

#page-1 button.btn-privacy-view:hover{background:inherit;}

.ico-info{display:inline-flex; justify-content:center; align-items:center; width:16px; height:16px; border:1px solid #AAA; border-radius:50%; color:#888; font-size:11px; font-style:normal;}

.privacy-agree-radio{display:flex; align-items:center; gap:16px;}

.radio-label{display:flex; align-items:center; gap:4px; color:var(--grey-90, #000); font-size:16px; font-weight:400; line-height:100%; text-align:center; cursor:pointer;}

.radio-label input[type="radio"]{display:none;}
.radio-label input[type="radio"]:checked ~ .radio-text {
    font-weight: 700;
}

.radio-custom{display:inline-block; position:relative; flex-shrink:0; width:24px; height:24px; border:2px solid #A5A5A5; border-radius:50%; background:none;}

.radio-label input[type="radio"]:checked + .radio-custom{border-color:#333;}

.radio-label input[type="radio"]:checked + .radio-custom::after{content:''; position:absolute; top:50%; left:50%; display:block; width:14px; height:14px; border-radius:50%; background:#333; transform:translate(-50%, -50%);}


/* ===== 개인정보활용 모달 오버레이 ===== */
.privacy-modal-overlay{display:none; position:fixed; top:0; left:0; z-index:9000; width:100%; height:100%; background:rgba(0,0,0,0.5);}

.privacy-modal-overlay.is-open{display:flex; justify-content:center; align-items:flex-end;}


/* ===== 모달 내부 ===== */
.privacy-modal-inner{display:flex; flex-direction:column; align-items:flex-start; gap:20px; width:100%; max-width:680px; height:100%; max-height:780px; padding:32px; background:#FFF; box-sizing:border-box;}

.modal-header{display:flex; justify-content:space-between; align-items:center; width:100%; padding:0;}

.modal-title{color:#000; font-size:20px; font-weight:700; line-height:170%;}

.btn-modal-close{padding:0; border:none; background:none; color:#000; font-size:24px; line-height:1; cursor:pointer;}

.modal-body{flex:1; overflow-y:auto;}

.modal-content h5{color:#000; font-size:20px; font-weight:700; line-height:170%;}

.modal-content h5:first-child{margin-top:0;}

.modal-content p{color:#000; font-size:18px; font-weight:400; line-height:170%;}

.modal-content ul{padding:5px 0 10px;}

.modal-content ul li{position:relative; padding-left:15px; color:#000; font-size:16px; font-weight:400; line-height:170%; list-style:none;}

.modal-content ul li::before{content:'-'; position:absolute; top:0; left:0; font-size:16px;}

.modal-content .item-label{font-size:18px; font-weight:600;}

.modal-footer{width:100%;}

.btn-modal-confirm{display:flex; justify-content:center; align-items:center; align-self:stretch; flex-shrink:0; gap:8px; width:100%; height:60px; padding:18px 20px; border:none; border-radius:12px; background:var(--black, #000); color:var(--white, #FFF); font-size:18px; font-weight:700; line-height:100%; text-align:center; cursor:pointer;}

/* modal-body 스크롤바 커스텀 */
.modal-body {
    overflow-y: auto;
}

/* 스크롤바 전체 너비 */
.modal-body::-webkit-scrollbar {
    width: 6px;
}

/* 스크롤바 트랙(배경) */
.modal-body::-webkit-scrollbar-track {
    background: #D9D9D9;
    border-radius: 0;
}

/* 스크롤바 thumb(핸들) */
.modal-body::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 0;
}

/* 화살표 버튼 제거 */
.modal-body::-webkit-scrollbar-button {
    display: none;
}

/* ===== PC ===== */
@media (min-width:768px){

.privacy-modal-overlay.is-open{align-items:center;}

.privacy-modal-inner{max-height:80vh; border-radius:16px;}

}


/* ===== MO ===== */
@media (max-width:768px){

.privacy-agree-wrap{flex-direction:column; align-items:flex-start;}

.privacy-agree-radio{width:100%; justify-content:flex-end;}

.privacy-modal-inner{padding:24px 20px;}

.modal-title{font-size:18px;}

.modal-content h5{font-size:18px;}

.modal-content p{font-size:16px;}

.modal-content ul li{font-size:15px;}

.btn-modal-confirm{height:56px; font-size:16px;}

}

/* font-family:Pretendard;, font-style:normal; 중복 제거 */