@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.1/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/*
** html tag reset
*/
* {
    margin: 0;
    padding: 0;
    font-family: "Wanted Sans Variable", sans-serif;
    line-height: 1;
    vertical-align: middle;
    background: transparent;
    max-height: 99999px;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    height: 100%;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-thumb {
    background-color: #ABADB5;
    border-radius: 32px;
    background-clip: padding-box;
}

::-webkit-scrollbar-track {
    background-color: #CCCCCC;
    box-shadow: inset 0px 0px 5px white;
}

/* 변수 정의 */
:root {
    --Neutral-50: #F8F9FA;
    --Neutral-100: #F1F3F5;
    --Neutral-200: #E9ECEF;
    --Neutral-300: #DEE2E6;
    --Neutral-400: #CED4DA;
    --Neutral-500: #ADB5BD;
    --Neutral-600: #868E96;
    --Neutral-700: #495057;
    --Neutral-800: #343A40;
    --Neutral-900: #212529;
    --Neutral-950: #0D0F11;

    --Primary-50: #F2F1FD;
    --Primary-100: #E2DFFC;
    --Primary-200: #C5BFF9;
    --Primary-300: #A89FF5;
    --Primary-400: #8B80F2;
    --Primary-500: #6C5CE7;
    --Primary-600: #5649C0;
    --Primary-700: #413790;
    --Primary-800: #2B2560;
    --Primary-900: #161230;
    --Primary-950: #0B0918;

    --Success: #2ECC71;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
    padding: 0 0 0;
}

input {
    outline: none;
    width: 100%;
    display: flex;
    height: 50px;
    align-items: center;
    align-self: stretch;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid var(--Neutral-200, #E9ECEF);
    background: var(--Neutral-50, #F8F9FA);
    font-size: 16px;
    font-weight: 400;
}

input::placeholder {
    color: var(--Neutral-500, #ADB5BD);
}

input:focus {
    outline: none;
    border: 1px solid var(--Primary-500, #6C5CE7);
}

input:read-only, input:disabled {
    border-radius: var(--Radius-MD, 8px);
    border: 1px solid var(--Neutral-200, #E9ECEF);
    background: var(--Neutral-200, #E9ECEF);
    color: var(--Neutral-500, #ADB5BD);
    cursor: default;
}

textarea:read-only, text:disabled {
    border-radius: var(--Radius-MD, 8px);
    border: 1px solid var(--Neutral-200, #E9ECEF);
    background: var(--Neutral-200, #E9ECEF);
    color: var(--Neutral-500, #ADB5BD);
    cursor: default;
}

input.validError {
    border: 1px solid var(--Semantic-Error, #FF6B6B);
}
input.validError + .validAlert {
    color: var(--Semantic-Error, #FF6B6B);
    /* Body/Medium/Regular */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 22.4px */
    margin-top: 4px !important;
}

input::-ms-reveal,
input::-ms-clear {
    display: none;
}

select {
    border: 1px solid #DCE3EB;
    border-radius: 4px;
    font-size: 14px;
    width: 95px;
    height: 32px;
    padding: 0 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #FFF url('../images/select_arrow.svg') no-repeat right 5px top 50%;
}

select:focus {
    outline: none;
}

button {
    outline: none;
    border: 0px;
}

.passwordWrap {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.passwordWrap input[type=password] + span {
    background: url(../images/i_eye_off.svg) 50% / contain no-repeat;
    width: 16px;
    height: 16px;
    padding: 2.667px 1.333px;
    margin: 17px 0;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    z-index: 5;
    cursor: pointer;
    position: absolute;
    float: right;
    right: 16px;
}

.passwordWrap input[type=text] + span {
    background: url(../images/i_eye_on.svg) 50% / contain no-repeat;
    width: 16px;
    height: 16px;
    padding: 2.667px 1.333px;
    margin: 17px 0;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    z-index: 5;
    cursor: pointer;
    position: absolute;
    float: right;
    right: 16px;
}
.fake-input {
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: -14px 0 0 0 !important;
    border: none !important;
    font-size: 0 !important;
    opacity: 0;
    filter: "alpha(opacity=0)";
}
.hide {
    display: none !important;
}


.defaultSelect {width: 100%; height: 50px; position: relative; z-index: 1;}
.defaultSelect:hover {background-color: var(--Neutral-50, #F8F9FA) ;}
.defaultSelect.active .defaultSelectTit {background-color: var(--Neutral-50, #F8F9FA) ;}
.defaultSelect.active .defaultSelectList {display: block; }
.defaultSelect .defaultSelectTit {display: flex; align-items: center; width: 100%; height: 50px; cursor: pointer; padding: 0 16px; border-radius: var(--Radius-MD, 8px);border: 1px solid var(--Neutral-200, #E9ECEF);background: url('../images/select_arrow2.svg') no-repeat right 16px top 50%; color: var(--Neutral-900, #212529); font-size: 16px; font-weight: 500;}
.defaultSelect .defaultSelectList {display: none; width: 100%; max-height: 172px; position: absolute; left: 0; top: 58px; padding: 8px; border-radius: var(--Radius-MD, 8px);border: 1px solid var(--Neutral-200, #E9ECEF);background: #FFF;box-shadow: 0 4px 6px 0 rgba(108, 92, 231, 0.08); overflow: auto;}
.defaultSelect .defaultSelectList::-webkit-scrollbar {display: none;}
.defaultSelect .defaultSelectList > li {cursor: pointer; display: flex;height: 36px;padding-left: 10px;align-items: center;gap: 8px;align-self: stretch;border-radius: var(--Radius-SM, 4px); background: #FFF; color: var(--Neutral-700, #495057); font-weight: 400; font-size: 14px; margin: 0 0 4px;}
.defaultSelect .defaultSelectList > li.selected { background: var(--Primary-50, #F2F1FD); color: var(--Primary-500, #6C5CE7); font-weight: 400;}
.defaultSelect .defaultSelectList > li:last-child {margin: 0 0 0;}
.defaultSelect .defaultSelectList > li:hover {background-color: var(--Neutral-100, #F1F3F5);}


.defaultSelect.defaultSelectNext + select {display: none;}