/* imports */
/* font import */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");





/* global reset */
* {
    -webkit-tap-highlight-color: transparent; /* (모바일)터치 시 강조 효과 제거 */
}

/* scrollbar */
*::-webkit-scrollbar{
	width: 5px;
}
*::-webkit-scrollbar-track{
	background: none;
}
*::-webkit-scrollbar-thumb{
	background: #555652;
	border-radius: 3px;
}

/* body global padding */
body {
    margin: 0;
    padding: 0 1.714rem;
}

/* link style */
a {
    color: inherit;
    text-decoration: none;
}





/* core */
.display {
    display: block !important;
}





/* keyframes */
.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: var(--color-primary-300);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}





/* color */
:root {
    /* primary color */
    --color-primary-50: #fffdef;
    --color-primary-100: #fff7ce;
    --color-primary-200: #fff4b7;
    --color-primary-300: #ffee96;
    --color-primary-400: #ffeb81;
    --color-primary-500: #ffe662;
    --color-primary-600: #e8d159;
    --color-primary-700: #b5a346;
    --color-primary-800: #8c7f36;
    --color-primary-900: #6b6129;

    /* secondary color */
    --color-secondary-50: #eaedff;
    --color-secondary-100: #bec8ff;
    --color-secondary-200: #9faeff;
    --color-secondary-300: #7389ff;
    --color-secondary-400: #5872ff;
    --color-secondary-500: #2e4fff;
    --color-secondary-600: #2a48e8;
    --color-secondary-700: #2138b5;
    --color-secondary-800: #192b8c;
    --color-secondary-900: #13216b;

    /* neutral color */
    --color-neutral-1: #ffffff;
    --color-neutral-2: #fdfdfd;
    --color-neutral-3: #f6f6f6;
    --color-neutral-4: #f2f2f2;
    --color-neutral-5: #dedede;
    --color-neutral-6: #c8c8c8;
    --color-neutral-7: #9c9c9c;
    --color-neutral-8: #6f6f6f;
    --color-neutral-9: #5e5e5e;
    --color-neutral-10: #434343;
    --color-neutral-11: #3d3d3d;
    --color-neutral-12: #343434;
    --color-neutral-13: #222222;


    /* component color */
    --color-error-1: #ec221f;
    --color-positive-1: #329252;
    --color-component-1: #f6f6f6;
    --color-component-2: #f2f2f2;
    --color-component-3: #dedede;
    --color-component-4: #c8c8c8;
}





/* font */
* {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
:root {
    font-size: 14px; /* 1 rem */
}

.heading01 {
    font-size: 2rem;
    font-weight: bold;
}

.heading02 {
    font-size: 1.714rem;
    font-weight: bold;
}

.heading03 {
    font-size: 1.429rem;
    font-weight: bold;
}

.heading04 {
    font-size: 1.286rem;
    font-weight: bold;
}

.subtitle01 {
    font-size: 1.143rem;
    font-weight: bold;
}

.body01 {
    font-size: 1rem;
    font-weight: normal;
}

.body02 {
    font-size: 0.857rem;
    font-weight: normal;
}

.body03 {
    font-size: 1rem;
    font-weight: normal;
}

.body04 {
    font-size: 0.857rem;
    font-weight: normal;
}

.caption01 {
    font-size: 0.857rem;
    font-weight: normal;
}

.caption02 {
    font-size: 0.714rem;
    font-weight: normal;
}





/* button */
button {
    border: none;
    box-sizing: border-box;
    padding: 0.571rem 1.143rem;
    border-radius: 0.571rem;
    user-select: none;
    cursor: pointer;
    font-size: 1rem;
}
button.loading::before {
    content: '';
    position: absolute;
    left: 50%;
    translate: -50% 0;
    display: block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 3px solid var(--color-secondary-200);
    border-bottom-color: transparent;
    animation: rotation 1s linear infinite;
}

.button-filled {
    background: var(--color-primary-500);
    color: var(--color-neutral-11);
    border: 1px solid var(--color-primary-500);
}
.button-filled:hover {
    
}
.button-filled:active {
    background: var(--color-primary-100);
    border: 1px solid var(--color-primary-100);
}
.button-filled:disabled {
    background: var(--color-neutral-3);
    color: var(--color-neutral-6);
    border: 1px solid var(--color-neutral-3);
}

.button-outlined {
    background: var(--color-neutral-1);
    color: var(--color-neutral-10);
    border: 1px solid var(--color-neutral-11);
}
.button-outlined:hover {
    
}
.button-outlined:active {
    background: var(--color-primary-100);
    border: 1px solid var(--color-neutral-6);
}
.button-outlined:disabled {
    background: var(--color-neutral-1);
    color: var(--color-neutral-6);
    border: 1px solid var(--color-neutral-6);
}

.button-text {
    background: transparent;
    color: var(--color-neutral-11);
    border: 1px solid transparent;
}
.button-text:hover {
    
}
.button-text:active {
    background: var(--color-primary-100);
    border: 1px solid var(--color-primary-100);
}
.button-text:disabled {
    color: var(--color-neutral-6);
}

.button-filled-secondary {
    background: var(--color-secondary-300);
    color: var(--color-neutral-1);
    border: 1px solid var(--color-secondary-300);
}
.button-filled-secondary:hover {
    
}
.button-filled-secondary:active {
    background: var(--color-secondary-200);
    border: 1px solid var(--color-secondary-200);
}
.button-filled-secondary:disabled {
    background: var(--color-neutral-3);
    color: var(--color-neutral-6);
    border: 1px solid var(--color-neutral-3);
}


/* text input */
input:not([type="checkbox"]) {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 0.714rem 0.857rem;
    background: var(--color-neutral-1);
    outline: none;
    border: 2px solid var(--color-neutral-6);
    border-radius: 0.571rem;

    /* font: body01 */
    font-size: 1rem;
    font-weight: normal;
}
input:focus {
    border: 2px solid var(--color-neutral-10);
}
.label.valid > input {
    border: 2px solid var(--color-positive-1);
}
.label.invalid > input {
    border: 2px solid var(--color-error-1);
}
input.valid { /* input 단독 사용 케이스 */
    border: 2px solid var(--color-positive-1);
}
input.invalid { /* input 단독 사용 케이스 */
    border: 2px solid var(--color-error-1);
}

/* input label */
.label {
    color: var(--color-neutral-6);
}
.label:focus-within {
    color: var(--color-neutral-10);
}
.label.valid {
    color: var(--color-positive-1);
}
.label.invalid {
    color: var(--color-error-1);
}

.label > label {
    display: block;
    margin-bottom: 0.429rem;

    /* font: body04 */
    font-size: 0.857rem;
    font-weight: normal;
}

.label > .caption {
    position: relative;
    padding: 0.286rem 0 0.429rem 1.444rem;

    /* font: caption02 */
    font-size: 0.714rem;
    font-weight: normal;
}

.label > .caption > .icon {
    position: absolute;
    top: 0.357rem;
    left: 0.286rem;
}





/* checkbox */
input[type="checkbox"] {
    
}
input[type="checkbox"]::before {
    content: '';
    display: inline-block;
    box-sizing: border-box;
    width: 1.286rem;
    height: 1.286rem;
    border: 2px solid #C1C6CA;
    border-radius: 2px;
    background: var(--color-neutral-1);
}
input[type="checkbox"]:checked::before {
    background: var(--color-primary-500);
    background-image: url('/app/icon/checkmark.svg');
    background-repeat: no-repeat;
    background-position: center center;
    border: 2px solid var(--color-primary-500);
}