@charset "utf-8";

/* ///////////////////////////////////////////////////////////////////

    스크롤바

/////////////////////////////////////////////////////////////////// */
/* 스크롤 바 전체 width: 수평바넓이, height: 수직바넓이 */
::-webkit-scrollbar {
    width: 0.714rem !important;
    height: 0.714rem !important;
}
/* 스크롤 바 밑의 배경 */
::-webkit-scrollbar-track {
    background-color: var(--clr-lightblue) !important;
}
/* 실질적 스크롤 바 */
::-webkit-scrollbar-thumb {
    background: var(--clr-gray20) !important;
    border-radius: 0.714rem !important;
}
/* 실질적 스크롤 바 위에 마우스를 올려다 둘 때 */
::-webkit-scrollbar-thumb:hover {
    background: var(--clr-gray30) !important;
}
/* 실질적 스크롤 바를 클릭할 때 */
::-webkit-scrollbar-thumb:active {
    background: var(--clr-gray60) !important;
}
/* 스크롤 바 상 하단 버튼 */
::-webkit-scrollbar-button {
    display: none !important;
}

/* ///////////////////////////////////////////////////////////////////

    Input - width Slide Up Label

/////////////////////////////////////////////////////////////////// */
/* 전체 영역 */
.slideup_input {
    position: relative;
    height: 3.071rem;
    line-height: 3.071rem;
    margin-bottom: 1.143em;
}
.slideup_input:hover input {
    border: solid 0.071rem var(--clr-gray30) !important;
}
/* 에러시 전체 영역 마우스 오버의 테두리 */
.slideup_input:hover input.error {
    border: solid 0.071rem var(--clr-red) !important;
}
/* input */
.slideup_input input {
    position: absolute;
    width: 100%;
    outline: 0;
    font-size: var(--fs-14);
    padding: 1em 1.143em 0 1.143em;
    line-height: 2rem;
    border-radius: 0.571em;
    border: solid 0.071rem var(--clr-gray1);
    background-color: var(--clr-gray1);
    transition: all 0.3s;
}
/* input -- error */
.slideup_input input.error {
    border: solid 0.071rem var(--clr-red);
    background-color: var(--clr-red5);
}
/* label */
.slideup_input .label {
    position: absolute;
    font-size: var(--fs-14);
    color: var(--clr-gray60);
    margin-left: 1.143em;
    line-height: 3.2rem;
    pointer-events: none;
    background-color: transparent;
    border-radius: 0.571em;
    transition: all 0.3s;
}
/* 포커스 및 입력 시 input */
.slideup_input input:focus {
    background-color: var(--clr-primary5);
    border: solid 0.071rem var(--clr-point) !important;
}
/* 포커스 및 입력 시 input -- error */
.slideup_input input.error:focus,
.slideup_input input.error:valid {
    background-color: var(--clr-red5);
    border: solid 0.071rem var(--clr-red) !important;
}
/* 포커스 및 입력 시 label */
.slideup_input input:focus + .label,
.slideup_input input:valid + .label {
    color: var(--clr-point);
    margin-left: 1.6em;
    height: 1.714em;
    line-height: 1.714em;
    transform-origin: top left;
    transform: translate(-0.3em, 0.3em) scale(0.7);
}
/* 포커스 및 입력 시 label -- error */
.slideup_input input.error:focus + .label,
.slideup_input input.error:valid + .label {
    color: var(--clr-red);
}
/* input 비활성 */
.slideup_input input:disabled {
    opacity: 0.5;
    background-color: var(--clr-gray10);
    cursor: default;
}
/* input 테두리 비활성 */
.slideup_input:hover input:disabled {
    opacity: 0.5;
    border: solid 0.071rem var(--clr-gray10) !important;
    cursor: default;
}

/* ///////////////////////////////////////////////////////////////////

    CheckBox ( label 과 함께 사용 시 id, for 속성 필요)

/////////////////////////////////////////////////////////////////// */
/* 체크박스 전체 */
.cbx {
    position: relative;
    height: 1rem;
    line-height: 1rem;
    display: inline-block;
}
/* 원본 체크박스 숨김 */
.cbx input[type="checkbox"] {
    display: inline-block;
    position: relative;
    padding: 0;
    margin: 0;
    border: 0;
    cursor: pointer;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
}
/* 가상 체크박스 */
.cbx input[type="checkbox"]::before {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    text-align: center;
    background: var(--clr-white);
    border: 0.071em solid var(--clr-gray20);
    border-radius: 0.214em;
}
/* 체크 시 체크표시 */
.cbx input[type="checkbox"]:checked::before {
    content: "\2713";
    line-height: 1.3;
    color: var(--clr-white);
    background: var(--clr-point);
    border-color: var(--clr-point);
    font-size: var(--fs-12);
    font-weight: var(--fw-500);
}
/* 체크박스 옆 레이블에 마우스 오버시 커서 손모양 변경 */
.cbx + label:hover {
    cursor: pointer;
}
/* 체크박스 옆 레이블과의 간격 */
.cbx + label {
    margin-left: 0.286em;
}
/* 비활성 상태 input */
.cbx input[type="checkbox"]:disabled {
    opacity: 0.3;
    cursor: default;
}
/* 비활성된 레이블 */
.cbx:has(input[type="checkbox"]:disabled) + label {
    opacity: 0.2;
    cursor: default;
}

/* ///////////////////////////////////////////////////////////////////

    Button

/////////////////////////////////////////////////////////////////// */
/* ---------- 기본 버튼 ---------- */
.btn_basic {
    padding: 0.5em 1.2em;
    min-width: 5.714em;
    color: var(--clr-white);
    background: var(--clr-point);
    font-size: var(--fs-13);
    font-weight: 500;
    border: 0;
    cursor: pointer;
    opacity: 0.95;
    transition: all 0.3s;
    border-radius: 8rem;
}
.btn_basic:hover {
    box-shadow: var(--shadow-btn);
    opacity: 1;
    cursor: pointer;
}
/* 눌렀을 경우 */
.btn_basic:active {
    box-shadow: none;
}
/* 비활성  */
.btn_basic:disabled {
    opacity: 0.3;
    box-shadow: none;
    cursor: default;
}
/* ---------- 큰 버튼 ---------- */
.btn_basic.big {
    padding: 0.75em 1.2em !important;
    min-width: 7.143em !important;
    font-size: var(--fs-16) !important;
    font-weight: 600 !important;
}
/* ---------- 아웃라인 버튼 ---------- */
.btn_basic.outline {
    border: 0.071rem solid var(--clr-point) !important;
    background-color: var(--clr-white) !important;
    color: var(--clr-point);
}
/* ---------- 아웃라인 회색 버튼 ---------- */
.btn_basic.outline.gray {
    border: 0.071rem solid var(--clr-gray60) !important;
    color: var(--clr-gray60);
}
.btn_basic.outline:hover {
    border: 0.071rem solid var(--clr-point) !important;
    color: var(--clr-point);
    box-shadow: none;
}
/* ---------- 아이콘 포함 버튼 ---------- */
/* 부모 요소 기준으로 아이콘 위치 설정  */
.btn_icon:has(.btn_basic.icon) {
    display: inline-block;
    position: relative;
}
.btn_basic.icon {
    padding: 0.5em 3em 0.5em 1.2em;
}
.btn_basic.icon + img {
    position: absolute;
    top: 50%;
    right: 1.2em;
    pointer-events: none;
    transform: translateY(-50%);
    filter: invert(53%) sepia(6%) saturate(125%) hue-rotate(169deg)
    brightness(95%) contrast(93%);
}
.btn_basic.icon:hover + img {
    filter: invert(48%) sepia(86%) saturate(5185%) hue-rotate(230deg)
    brightness(99%) contrast(91%);
}

/* ///////////////////////////////////////////////////////////////////

    토스트 팝업

/////////////////////////////////////////////////////////////////// */

.toast {
    display: inline-block;
    position: absolute;
    top: 5rem;
    left: 50%;
    transform: translateX(-50%);
    min-width: 14.286rem; /* 최소 200px */
    background-color: var(--clr-gray1);
    border: 0.071rem solid var(--clr-gray30);
    padding: 0.75em 2em;
    border-radius: 5em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
    z-index: 920;
}

.toast.active {
    opacity: 1;
}

.toast .container {
    display: inline-block;
    width: 100%;
    text-align: center;
}
.toast.error {
    background-color: var(--clr-red5);
    border: 0.071rem solid var(--clr-red);
}
.toast.ok {
    background-color: var(--clr-green5);
    border: 0.071rem solid var(--clr-green);
}
.toast img {
    margin-right: 0.571em;
}
.toast span {
    display: inline-block;
    font-size: var(--fs-16);
    font-weight: var(--fw-500) !important;
}
/* -- 체크 아이콘 타입의 토스트 팝업은 테두리 제거 -- */
.toast.toast_check {
    border: none;
    background-color: transparent;
}