@charset "utf-8"; 

/* 작성자 : KHJ 20250825 */

/* form-builder */

.content.survey { padding: 0 }

.no_survey { display: flex; justify-content: center; align-items: center; height: 100vh; font-weight: 600; font-size: 20px }

.survey-form { padding: 0; background: var(--survey-layout-color); background-size: 100% 100%; max-width: 500px; margin: 0 auto; border-right: 1px solid #f7f7f7; border-left: 1px solid #f7f7f7 }

.survey-header { position:relative; width:100%; display: flex; align-items: center; justify-content: center }
.survey-header h2 { font-size:24px; font-weight: 600; color: var(--survey-point-color); text-align: center }
.survey-header .tUser { position:absolute; bottom:0; right:50px; padding: 5px 20px 3px 20px; background: var(--survey-point-color); color:#fff; font-weight:600; border-radius: 10px 10px 0 0 }
.survey-header .description { white-space: pre-wrap; word-break: break-word }
.survey-header .description, .survey-header pre, .comment pre { padding: 5px 0; word-break: break-all; white-space: break-spaces; text-align: justify; line-height: 130% }

.survey-header { height: 100px }
.survey .survey-form { height: 100vh }
.survey .survey-body { height:calc(100vh - 150px) }
.survey .survey-group { height:calc(100vh - 200px) }

.survey-form h3 { font-size: 16px; font-weight: 600; padding: 10px }

.group-progress { display:flex; padding: 35px 20px 0 21px;; height:50px; background: #FFF; border-radius: 40px 40px 0 0 }
.group-progress-item { flex: 1; height: 8px; background: #eee; border-radius: 10px; margin-right: 1px; overflow: hidden; height: 7px; background: #dddddd }
.group-progress-item.active { background: var(--survey-point-color) }
.group-progress-item span { display:none }

.survey-group { position: relative; padding: 10px; min-height:60px; background: #FFF; overflow:auto }
.survey-group.survey-complete { padding:50px 50px 100px 50px; display: flex; flex-direction: column; align-items: center; justify-content: center }
.survey-group.survey-complete h3 { color: var(--survey-point-color) }
.survey-group.survey-complete .description { background: #f8f8f8; padding: 20px; margin: 20px 0; line-height:160%; font-size: 16px; font-weight: 600; text-align: center; width: 100% }

.survey-group::-webkit-scrollbar { width: 10px }
.survey-group::-webkit-scrollbar-track { background-color: #fff }
.survey-group::-webkit-scrollbar-thumb { background-color: #f7f7f7 }
.survey-group::-webkit-scrollbar-button { display: none }

.survey-group .group-progress { display:none }

.survey-group .form-element { border: 1px solid #f7f7f7; padding: 10px; margin-top: 10px; position: relative }

/* .survey-group > .form-element:nth-child(2) { margin-top: 0 } */
.survey-group .form-element.error:not([data-type="matrix"]):not([data-programtype="capacityOrder"]), .rating-group.error:not(.option), .capacityOrder-content label.error { border: 1px solid var(--survey-check-color) !important }
.survey-group .form-element h4 { padding: 0 0 10px 0; font-size: 16px; font-weight: 600 }
.survey-group .form-element h4:has(.no) { padding-left: 30px }
.survey-group .form-element h4 .no { position: absolute; top:9px; left: -1px; background: var(--survey-point-color); color: #fff; font-size:12px; letter-spacing: -0.5px; display: flex; justify-content: center; align-items: center; width: 35px; height: 20px; border-radius: 0 20px 20px 0; padding-right: 3px }

.survey-group .form-element h4 .maxCheckCount { font-size: 12px }
.survey-group .form-element input[type="text"], .survey-group .form-element select, .survey-group .form-element textarea { width: 100%; border: 2px solid #f3f3f3 }
.survey-group .form-element textarea { height:50px; resize: none }
.survey-group .form-element input[type="text"]:focus, .survey-group .form-element select:focus, .survey-group .form-element textarea:focus,
.survey-group .form-element input[type="text"]:not(:placeholder-shown), .survey-group .form-element select:valid, .survey-group .form-element textarea:not(:placeholder-shown) { border: 2px solid #bcd6ea !important }
.survey-group .form-element .radio-group, .survey-group .form-element .checkbox-group, .survey-group .form-element .rating-group { display: flex; gap: 3px; flex: 1 }
.survey-group .form-element .radio-group, .survey-group .form-element .checkbox-group, .survey-group .form-element .matrix-group { flex-direction: column }
.survey-group .form-element .matrix-group { border: 1px solid #fff }

.survey-group .form-element .rating-group label { flex: 1; flex-direction: column; text-align: center; font-size: 11px; justify-content: flex-end; border: 0 }

.survey-group .form-element label { position:relative; display: flex; background:#fff; border: 2px solid #f3f3f3; border-radius: 5px; padding: 7px 30px 7px 10px; font-weight: 500; line-height: 100% }
.survey-group .form-element label input[type="radio"], .survey-group .form-element label input[type="checkbox"] { position:absolute; margin-left: -1000px !important}
.survey-group .form-element label .custom-radio, .survey-group .form-element label .custom-checkbox { position: absolute; right: 4px; width: 20px; height: 20px; border: 1px solid var(--gc-gray-1); background-color: #fff; cursor: pointer; transition: all 0.3s ease }
.survey-group .form-element .rating-group label .custom-radio { margin-right: 0; bottom: 5px; right: auto; width:24px; height:24px }
.survey-group .form-element label .custom-radio { border-radius: 50% }
.survey-group .form-element label .custom-checkbox { border-radius: 3px }
.survey-group .form-element label input[type="radio"]:checked + .custom-radio, .survey-group .form-element label input[type="checkbox"]:checked + .custom-checkbox { border-color: #bcd6ea }
.survey-group .form-element div label  input[type="radio"]:checked + .custom-radio { background: #e3f2fd}
.survey-group .form-element label input[type="radio"]:checked + .custom-radio::after, .survey-group .form-element label  input[type="checkbox"]:checked + .custom-checkbox::after { width: 10px; height: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; font-weight: 700 }
.survey-group .form-element label input[type="radio"]:checked + .custom-radio::after { background-color: var(--survey-check-color) }
.survey-group .form-element label input[type="text"]:not(:placeholder-shown) { border-color: var(--survey-check-color) }
.survey-group .form-element label input[type="radio"]:checked + .custom-radio::after { content: ""; border-radius: 50% }
.survey-group .form-element label input[type="checkbox"]:checked + .custom-checkbox::after { content: "\f00c"; border-radius: 1px; color: var(--survey-check-color) }
.survey-group .form-element div:has(.rating-group) label:has(input:checked), .survey-group .form-element label:has(input[type="text"]:not(:placeholder-shown)) { background: #e3f2fd; border-color: #bcd6ea }
.survey-group .form-element div:has(.rating-group) label:has(input:checked) { color: tomato }
.survey-group .form-element[data-type="rating"] div:has(.rating-group) label:has(input:checked) { background: #fff }
.survey-group .form-element label input[type="checkbox"]:disabled + .custom-checkbox { display:none }

.survey-group .form-element[data-type="rating"] .rating-group label { padding: 10px 0 35px 0 }
.survey-group .form-element[data-type="matrix"] .rating-group label { font-weight:600; justify-content: center; padding: 0 0 0 0; width:18px; max-width:18px; height:18px; border-radius:50%; border:1px solid var(--gc-gray-1); background-color: #fff; transition: all 0.3s ease }
.survey-group .form-element[data-type="matrix"] .rating-group { display:flex; min-width: 110px; gap:1px; padding: 10px 3px; border: 1px solid #fff; border-left: 1px dashed #bbbbbb; align-items: center; justify-content: space-evenly }
.survey-group .form-element[data-type="matrix"] .rating-group.option { align-items: flex-end; gap:0 }
.survey-group .form-element[data-type="matrix"] .rating-group.option span{ font-size:9px; word-break: break-all; width: 18px; letter-spacing: -1px; text-align: center; border-radius: 10px }
select.dept { font-size: 13px; letter-spacing: -1px }

 
.form-element[data-type="matrix"] .matrix-title { display: flex; justify-content: flex-end; border-bottom: 1px dashed #ebebeb; font-weight: 500; line-height: 100%; background: #fff; position: sticky; top: -10px; z-index: 999 }
.form-element[data-type="matrix"] .form-element-matrix { position:relative; display: flex; background:#fff; border-bottom: 1px dashed #ebebeb; font-weight: 500 }

.matrix-group .form-element-matrix:last-child {border-bottom:0}
.matrix-group .form-element-matrix .no { background: var(--survey-point-color); color: #fff; font-size: 11px; word-break: keep-all; letter-spacing: -0.5px; display: flex; justify-content: center; align-items: center; padding: 0 2px 0 1px; min-width: 15px; min-height:20px; margin-right: 3px; margin-left: -6px; border-radius: 0 5px 5px 0; height: 100% }
.matrix-label { display: flex; align-items: center; padding: 5px; word-break: break-all; flex: 2 }

.form-element[data-type="comment"], .form-element[data-programtype="talentProfile"], .form-element[data-programtype="eduGoal"], .form-element[data-programtype="capacity"] { border: 1px solid var(--survey-point-color); background: #fffdef !important; border-radius: 5px }

.talent-profile-content, .eduGoal-content, .capacity-content, .capacityOrder-content { display:flex; gap: 5px; flex-wrap: wrap; justify-content: center }
.talent-profile-content span, .eduGoal-content span, .capacity-content span { display:flex ; flex:1; background: #fff; border: 1px solid #ddd; padding: 7px; text-align: center; align-items: center; justify-content: center; font-weight: 500; border-radius: 10px; min-width: 30% }
.capacityOrder-content span { padding-left: 5px }
.eduGoal-content pre { width: 100%; background: #fff; border: 1px solid #ddd; padding: 10px; border-radius: 10px; word-break: break-all; white-space: break-spaces; text-align: justify; line-height: 130%; font-size: 13px }
.talent-profile-content .dept-nm, .eduGoal-content .dept-nm, .capacity-content .dept-nm, .capacityOrder-content .dept-nm { width: 100%; flex: revert; background: #e3f2fd; border: 1px solid var(--survey-point-color) }
.capacityOrder-content label { width:100%; padding: 3px !important; justify-content: space-between; border:1px solid #fff !important }
.capacityOrder-content .capacity-select { width: calc(100% - 70px) !important }
.capacityOrder-content .capacity-select option:disabled { background-color: #eee; color: #999; cursor: not-allowed }

.comment-content ul li { position:relative; padding: 3px 0 3px 10px }
.comment-content ul li:before { position: absolute; top: 8px; left: 0px; content: "●"; font-size: 5px }

.survey-footer { background: #fff; display: flex; justify-content: center; align-items: center; height: 50px; max-width: 500px; margin: 0 auto; border-top: 1px solid #f7f7f7; border-bottom: 0 }
.survey-footer ul { display:flex; width:100% }
.survey-footer ul li { flex:1; padding: 0 5px }
.survey-footer ul li:first-child { text-align:right }
.survey-footer #submit-btn, .survey-footer #prev-btn, .survey-footer #next-btn { padding: 5px 30px; font-size: 16px; border-radius: 50px; background: var(--survey-point-color) }
.survey-footer #submit-btn { background: tomato }