#wrap {margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column;}
.inner {padding: 0 2rem;}
:root {
  --main-color: #f68121;
}


/* notice_wrap */
.notice_wrap { margin-bottom: 3rem;}
.notice_wrap h5 { font-size: 1.8rem; font-weight: 600; color: var(--main-color); margin-bottom: 1.2rem;}
.notice_wrap p { font-size: 1.5rem; font-weight: 400; color: #666; line-height: 1.4;}

/* SECTION */
section { padding-top: 4rem; padding-bottom: 5rem; flex: 1; min-height: 0;}


/* FORM */
.form_wrap h2 {font-size: 2rem; line-height: 1.3; font-weight: 600; margin: 1rem 0 3rem;}
.form_wrap ul {display: flex; flex-direction: column; gap: 2.5rem; background: #f7f7f7; padding: 2.2rem 2rem; border-radius: 1rem;}
.form_wrap ul li .title_label {font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; display: block; color: #333;}
.form_wrap ul li .name_wrap {display: flex; gap: .6rem;}
.form_wrap ul li .name_wrap .gender_wrap {display: flex; gap: .6rem;}
.form_wrap ul li .name_wrap .gender_wrap input[type="radio"] {display: none;}
.form_wrap ul li .name_wrap .gender_wrap label {width: 4.6rem; height: 4.6rem; display: flex; align-items: center; justify-content: center; border: 1px solid #ddd; font-size: 1.5rem; border-radius: .7rem; color: #888; font-weight: 500; background-color: #fff;}
.form_wrap ul li .name_wrap .gender_wrap input[type="radio"]:checked + label {border: 1px solid var(--main-color); color: #fff; font-weight: 600; background: var(--main-color);}
.form_wrap ul li input[type="text"],
.form_wrap ul li input[type="tel"], .form_wrap ul li select {height: 4.6rem; padding: 0 1.5rem; font-size: 1.5rem; width: 100%; border-radius: .7rem; outline: none; font-weight: 500; background: #fff; font-family: inherit;}
.form_wrap ul li input[type="text"]::placeholder,
.form_wrap ul li input[type="tel"]::placeholder { color: #999; font-weight: 400;}

.form_wrap ul li select { background: #fff url(../img/arrow-1.png) no-repeat center right 1.5rem / 1.5rem; outline: none; border: none;}
.form_wrap ul li select option { font-size: 1.4rem;}

.form_wrap .privacy_wrap {margin-top: 2rem; background: #f7f7f7; padding: 2.2rem 2rem; border-radius: 1rem;}
.form_wrap .privacy_wrap .agree_inner { display: flex; align-items: center; gap: 1rem; position: relative;}
.form_wrap .privacy_wrap .chk_box input[type="checkbox"] {position: absolute; top: 0; left: 0; width: 2.1rem; aspect-ratio: 1/1; border-radius: 100%; position: absolute; left: 0; opacity: 0; z-index: 9;}
.form_wrap .privacy_wrap .chk_box i {display: block; width: 2.1rem; aspect-ratio: 1/1; border-radius: 100%; position: relative;}
.form_wrap .privacy_wrap .chk_box i::after {content: ""; display: block; width: .4rem; height: .8rem; border: solid #fff; border-width: 0 .3rem .3rem 0; transform: rotate(45deg); position: absolute; top: .4rem; left: .7rem;}
.form_wrap .privacy_wrap .chk_box input[type="checkbox"]:checked + i {background: var(--main-color);}


.form_wrap .privacy_wrap .all_agree { background-color: #e5e5e5; padding: 1.6rem 2rem; border-radius: 1rem; display: flex; align-items: center; justify-content: space-between;}
.form_wrap .privacy_wrap .all_agree .chk_box i { background: #8e8e8e;}
.form_wrap .privacy_wrap .all_agree label { font-size: 1.5rem; font-weight: 600; color: #8e8e8e;}
.form_wrap .privacy_wrap .all_agree img { width: 1.5rem; transition: transform 0.3s ease;}
.form_wrap .privacy_wrap .all_agree img.rotate { transform: rotate(180deg);}

.form_wrap .privacy_wrap .mustAgreeWrap { max-height: 0; overflow: hidden; padding-top: 1rem;}
.form_wrap .privacy_wrap .mustAgreeWrap.active { max-height: fit-content;}
.form_wrap .privacy_wrap .mustAgree .chk_box i{ background-color: #e5e5e5;}
.form_wrap .privacy_wrap .mustAgree { padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between;}
.form_wrap .privacy_wrap .mustAgree label { font-size: 1.5rem; color: #666; line-height: 1.4;}
.form_wrap .privacy_wrap .mustAgree button { font-size: 1.5rem; color: #666; text-decoration: underline; text-decoration-color: #666; text-underline-offset: 0.2rem;}

.form_wrap .btn_submit {display: block; width: 100%; background: var(--main-color); color: #fff; font-size: 1.7rem; font-weight: 500; text-align: center; padding: 1.7rem 0; border-radius: .7rem; margin-top: 2.5rem;}

.form_wrap select.placeholder { color: #999; font-weight: 400;}
.form_wrap select option { color: #333; }


/* test.php */
#section_test .test_header { margin-bottom: 1.6rem;}
#section_test .test_header h2{ font-size: 1.3rem; color: #aaa;}
#section_test .test_table { width: 100%; border-collapse: collapse; }
#section_test .test_table thead { background-color: #f7f7f7;}
#section_test .test_table thead th,
#section_test .test_table tbody td { padding: 1.5rem 1rem;  position: relative; font-size: 1.4rem; line-height: 1.3; text-align: center;} 
#section_test .test_table thead th::after,
#section_test .test_table tbody td::after { content: ''; position: absolute; top: 50%; right: 0; transform: translate(50%, -50%);  width: 0.1rem; height: 30%; background: #333; opacity: 0.3;}
#section_test .test_table thead th:last-child:after,
#section_test .test_table tbody td:last-child::after { display: none;}

#section_test .test_table tbody td { color: #666;}
#section_test .test_table tbody td.item-question { text-align: left;}
#section_test .test_table tbody td label { font-size: inherit; font-weight: inherit; color: inherit; line-height: inherit; word-break: keep-all;}
#section_test .test_table tbody td .chk_box { position: relative; display: flex; align-items: center; justify-content: center;}
#section_test .test_table tbody td input{ width: 2.1rem; aspect-ratio: 1/1; border-radius: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;}
#section_test .test_table tbody td i { width: 2.1rem; aspect-ratio: 1/1; border-radius: 100%; background-color: #e5e5e5; display: block; position: relative;}
#section_test .test_table tbody td i::after {content: ""; display: block; width: .4rem; height: .8rem; border: solid #fff; border-width: 0 .3rem .3rem 0; transform: rotate(45deg); position: absolute; top: .4rem; left: .7rem;}
#section_test .test_table tbody td input[type="checkbox"]:checked + i {background: var(--main-color);}

#section_test .btn_submit {display: block; width: 100%; background: var(--main-color); color: #fff; font-size: 1.7rem; font-weight: 500; text-align: center; padding: 1.7rem 0; border-radius: .7rem; margin-top: 4rem;}

/* result.php */

/* loding */
#loading_screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9999;}
#loading_screen.hide { opacity: 0; transition: opacity 0.5s ease; pointer-events: none;}
.loading_content { text-align: center;}
.loading_text { font-size: 2.2rem; font-weight: 700; color: #333; line-height: 1.4; margin-bottom: 4rem;}
/* 화살표 애니메이션 */
.loading_arrows { width: 12rem; height: auto;}

/* section_result */
/* 결과 화면 초기 숨김 */
#section_result { opacity: 0; transition: opacity 0.5s ease;}
#section_result.show { opacity: 1;}

#section_result .notice_wrap p { color: #aaa;}

/* 원형 그래프 */
#section_result .circle_graph { position: relative; width: 240px; height: 140px; margin: 0 auto;}
#section_result .circle_graph svg { overflow: visible;}
#section_result .circle_bg { fill: none; stroke: #f0f0f0; stroke-width: 24;}
#section_result .circle_progress { fill: none; stroke-width: 24; stroke-linecap: round; stroke-dasharray: 282.74; stroke-dashoffset: 282.74; transition: stroke-dashoffset 1.5s ease-in-out; }

/* 그래프 */
#section_result .circle_text { position: absolute; top: 65%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
#section_result .circle_label { font-size: 1.8rem; color: #666; margin-bottom: 0.8rem;}
#section_result .circle_score { font-size: 2rem; font-weight: 700; }
#section_result .circle_score span { font-size: 1.8rem; font-weight: inherit; color: #333;}
#section_result .circle_score span b { font-weight: 900;}

#section_result .result_text_box { margin-top: 3rem;}
#section_result .result_text_box h4 { text-align: center; font-size: 2.4rem; font-weight: 700; margin-bottom: 2rem; letter-spacing: -1px;}
#section_result .result_text_box p { font-size: 1.6rem; color: #666; text-align: center;}
#section_result .result_text_box p + p { margin-top: 0.8rem;}
#section_result .result_content { margin-top: 4rem; background-color: #f7f7f7; border-radius: 0.5rem; padding: 3rem 2rem;}
#section_result .result_content h3 { font-size: 2rem; font-weight: 600; margin-bottom: 3rem;}
#section_result .result_content .con_wrap + .con_wrap { margin-top: 4rem;}
#section_result .result_content .con_wrap h5 { font-size: 1.7rem; color: #333; margin-bottom: 1.4rem;}
#section_result .result_content .con_wrap .con_btn { font-size: 1.6rem ; color: #fff; background-color: var(--main-color); border-radius: 100px; padding: 0.8rem 2rem; display: inline-block; margin-bottom: 1.4rem; min-width: 12rem; text-align: center;}
#section_result .result_content .con_wrap p { font-size: 1.6rem; color: #666; line-height: 1.6;}




/* FOOTER */
footer {background: #e7e7e7; padding: 1.8rem 0; flex-shrink: 0;}
footer button {font-size: 1.4rem; font-weight: 400; color: #666;}

.floating_btn {display: block; width: 100%; position: fixed; bottom: 0; left: 0; background: #336df3; color: #fff; padding: 1.8rem 0; font-size: 1.8rem; font-weight: 500; z-index: 99;}