/**
* 이미지 경로 : /img/inc/...
*
*/


/* 레이아웃 */
.form-group { display:flex; align-items:normal; justify-content:flex-start; flex-direction:column; width:100%; }

.fieldset { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; gap:2.4rem; }
.check-area { display:flex; gap:2rem; }
.check-area.chk-column { flex-direction:column; }


/* 레이블 */
input[type="checkbox"] ~ label { padding:0; }
.form-tit { display:flex; position:relative; line-height:1; color:var(--black); margin-bottom:1.2rem; }


.form-group .form-tit { width:100%; }



/* 텍스트 */
.input { height:5.6rem; border-radius:.8rem; font-size:1.9rem; }
textarea.input { position:relative; width:100%; height:14.4rem; padding:.8rem 1.6rem; border:.1rem solid var(--gray-60); color:var(--gray-70); font-family:inherit; transition:0.4s; }

.form-control { padding:1.6rem; background:var(--white); border:1px solid var(--gray-60); border-radius:0.8rem; }

.form-control:focus { padding:1.5rem; border:2px solid var(--primary); outline:0; }

.form-control[type="password"] { letter-spacing:3px; }


.form-group .form-control { width:100%; }


/* 체크박스 */
input[type=radio],
input[type=checkbox] { position: absolute !important; width:1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.form-check { display:inline-block; }
.form-check:focus-within { outline: 2px solid var(--primary); outline-offset:0.2rem; }

.form-check input[type=radio] ~ label,
.form-check input[type=checkbox] ~ label { position: relative; display:inline-flex; gap:.8rem; min-height:2rem; font-size:1.7rem; line-height:2rem; }

.form-check input[type=radio] ~ label:before,
.form-check input[type=radio] ~ label:after,
.form-check input[type=checkbox] ~ label:before,
.form-check input[type=checkbox] ~ label:after { display:flex; content:''; transition:0.4s cubic-bezier(0.4, 0, 0.23, 1); }

.form-check input[type=radio] ~ label:before,
.form-check input[type=checkbox] ~ label:before { flex-shrink: 0; width: 2rem; height: 2rem; background-color:var(--white); border:1px solid var(--gray-60); }

.form-check input[type=checkbox] ~ label:before { border-radius:0.4rem; }
.form-check input[type=checkbox] ~ label:after { position: absolute; top:.4rem; left:.4rem; display: inline-flex; width:1.2rem; height:1.2rem; forced-color-adjust: none; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center center; mask-size: contain; -webkit-mask-image: url(/images/inc/ico_checkbox_checked.svg); mask-image: url(/images/inc/ico_checkbox_checked.svg);}

.form-check input[type=checkbox]:checked ~ label:before { background-color:var(--primary); border-color:var(--primary); }
.form-check input[type=checkbox]:checked ~ label:after { background-color:var(--white); transition-delay:0.1s; }

.form-check input[type=radio] ~ label:before { border-radius:100%; }
.form-check input[type=radio] ~ label:after { position:absolute; left:1.5rem; top:.5rem; width:1rem; height:1rem; background-color:rgba(0,0,0,0); border-radius:100rem;}

.form-check input[type=radio]:checked ~ label:before { border-color:var(--primary); }
.form-check input[type=radio]:checked ~ label:after { background-color:var(--primary); }

.form-check input[type=radio]:disabled ~ label,
.form-check input[type=checkbox]:disabled ~ label { color:var(--gray-40); }

.form-check input[type=radio]:disabled ~ label:before,
.form-check input[type=checkbox]:disabled ~ label:before { background-color:var(--gray-20); border-color:var(--gray-40); }

.form-check input[type=radio]:checked:disabled ~ label:after { background-color:var(--gray-40); }

.form-check input[type=checkbox]:disabled ~ label:after { background-color:rgba(0,0,0,0); }
.form-check input[type=checkbox]:checked:disabled ~ label:after { background-color: var(--gray-40); }


.form-check .form-check-cnt .form-check-p { color: }

/* 스위치 */
.form-toggle-switch { position:relative; display:inline-flex; }

.form-toggle-switch:focus-within { outline: 2px solid var(--primary); outline-offset:0.2rem; }

.form-toggle-switch [type=checkbox] ~ label { display:inline-flex; align-items:center; gap:.8rem; }
.form-toggle-switch [type=checkbox] ~ label .switch-toggle { position:relative; width:4rem; height:2.4rem; border-radius:2.4rem; background-color:var(--gray-50); transition:0.4s cubic-bezier(0.4, 0, 0.23, 1); }
.form-toggle-switch [type=checkbox] ~ label .switch-toggle i { position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; border-radius:100rem; background-color:var(--white); border:.2rem solid var(--gray-50); transition:0.4s cubic-bezier(0.4, 0, 0.23, 1); }

.form-toggle-switch [type=checkbox] ~ label .switch-toggle > i::before { content:''; display:inline-flex; width:1rem; height:1rem; background-color:var(--gray-50); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center center; mask-size: contain; -webkit-mask-image: url(/images/inc/ico_switch_off.svg); mask-image: url(/images/inc/ico_switch_off.svg); margin-left: -0.1rem; }


.form-toggle-switch [type=checkbox]:checked ~ label .switch-toggle { background:var(--primary); }
.form-toggle-switch [type=checkbox]:checked ~ label .switch-toggle i { left:calc(100% - 2.4rem); border-color:var(--primary); }

.form-toggle-switch [type=checkbox]:checked ~ label .switch-toggle > i::before { background-color:var(--primary); mask-image: url(/images/inc/ico_switch_on.svg); }


.form-toggle-switch [type=checkbox]:disabled ~ label .switch-toggle { background:var(--gray-20); }
.form-toggle-switch [type=checkbox]:disabled ~ label .switch-toggle i { border-color:var(--gray-20); background-color:var(--gray-40); }

.form-toggle-switch [type=checkbox]:disabled ~ label .switch-toggle > i::before { background-color:var(--gray-20); }



/* 칩 */
.form-chip:focus-within { outline: 2px solid var(--primary); outline-offset:0.2rem; }

.form-chip input[type=radio] ~ label,
.form-chip input[type=checkbox] ~ label { position:relative; display:inline-flex; align-items:center; gap:.4rem; min-height:4.8rem; padding:0 1.2rem; background:var(--white); border:1px solid var(--gray-30); border-radius:0.6rem; color:var(--gray-90); transition:0.4s cubic-bezier(0.4, 0, 0.23, 1); }

.form-chip input[type=radio] ~ label:before,
.form-chip input[type=checkbox] ~ label:before { content:''; display:inline-flex; width:1.6rem; height:1.6rem; background-color:var(--gray-90); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center center; mask-size: contain; -webkit-mask-image: url(/images/inc/ico_checkbox_checked.svg); mask-image: url(/images/inc/ico_checkbox_checked.svg); background-color: var(--gray-40); transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1); }


.form-chip input[type=radio]:checked ~ label,
.form-chip input[type=checkbox]:checked ~ label { background:var(--primary-5); border-color:var(--primary); color:var(--primary-60); }

.form-chip input[type=radio]:checked ~ label:before,
.form-chip input[type=checkbox]:checked ~ label:before { background-color:var(--primary); }


.form-chip input[type=radio]:disabled ~ label,
.form-chip input[type=checkbox]:disabled ~ label { background-color:var(--gray-20); border-color:var(--gray-30); color:var(--gray-50); }



/* 태그 */
.tag-wrap { display: flex; flex-wrap: wrap; gap:.8rem; }
.tag-wrap .btn-tag { display:inline-flex; align-items:center; justify-content:flex-start; flex-direction:row; position:relative; height:3.2rem; padding:.8rem 1rem; background:var(--white); border:0.1rem solid var(--gray-20); border-radius:3.2rem; }
.tag-wrap .btn-tag .btn-delete { width:1.6rem; }

.tag-wrap.large { gap:1.2rem; }
.tag-wrap.large .btn-tag { gap:.2rem; height:4rem; padding:.8rem 1.2rem; border-radius:4rem; font-size:1.7rem; line-height:1; }
.tag-wrap.large .btn-tag .btn-delete {}

.tag-wrap.medium { gap:.8rem; }
.tag-wrap.medium .btn-tag { gap:.2rem; height:3.2rem; padding:.8rem 1rem; border-radius:3.2rem; font-size:1.5rem; line-height:1; }
.tag-wrap.medium .btn-tag .btn-delete {}

.tag-wrap.small { gap:.4rem; }
.tag-wrap.small .btn-tag { gap:.2rem; height:2.4rem; padding:.8rem .8rem; border-radius:2.4rem; font-size:1.4rem; line-height:1; }
.tag-wrap.small .btn-tag .btn-delete { width:1.2rem; height:1.2rem; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center center; -webkit-mask-size:contain; mask-repeat:no-repeat; mask-position:center center; mask-size:contain; -webkit-mask-image:url(/images/inc/ico_delete_fill.svg); mask-image:url(/images/inc/ico_delete_fill.svg); -webkit-mask-image:none; mask-image:none; background-image:url(../../img/img/component/icon/ico_delete_fill.svg); background-color:transparent !important; background-size:contain; background-repeat:no-repeat; -webkit-mask:none; mask:none; line-height:1; }




/* 셀렉트 */


.form-select { min-height: 5.6rem; padding: 0 4.8rem 0 1.6rem; background-position: center right 1.6rem; background-size: 2.4rem !important; border-radius: 0.6rem; font-size: 1.9rem; }

.form-select { position:relative; width:100%; color:var(--gray-40); border:.1rem solid var(--gray-60); white-sapce:nowrap; overflow:hidden; text-overflow: ellipsis; }
.form-select:focus {border-color: var(--primary); border-width: 2px; outline: none; box-shadow: none; color: var(--krds-form-select--color-text-active);}


.form-group [class^=form-hint] { display:flex; align-items:center; justify-content:flex-start; flex-direction:row; gap:0.4rem; width:100%; font-size:1.5rem; line-height: 1; color:var(--gray-70); margin-top:0.8rem;}
.form-group [class^=form-hint]::before { content:''; display:inline-flex; width:1.6rem; height:1.6rem; background-color:var(--gray-90); mask-size:contain; mask-image:url(/images/icon/ico_information.svg); }

.form-group .form-hint-invalid { color:var(--danger); }
.form-group .form-hint-invalid::before { background:transparent url(/images/icon/ico_error_fill.svg) no-repeat center/contain; mask:none; }

.form-select[disabled] { background-color:var(--gray-20); border-color:var(--gray-30); color:var(--gray-50); }


.form-select.completed { color:var(--gray-80); }

.form-select.is-error { border:2px solid var(--danger-60); }


.form-select-sort { display:inline-block; height:auto; padding:0 2.6rem 0 .4rem; line-height:1.5; border:none; border-radius:.4rem; background: url(../images/icon/ico_angle.svg) no-repeat center right -0.2rem; appearance: none; }

.form-select-sort.small {}

.form-select-sort.medium {}

.krds-form-select-sort.large {}


.form-select-sort:hover { background-color:var(--secondary-5); }
.form-select-sort:focus,
.form-select-sort:active { background-color:var(--secondary-10); }

.form-select-sort:focus { outline:.2rem solid var(--primary); outline-offset:.2rem; }