/*---------------------------------------------------------
  기본 스타일 정의

  기본 엘리먼트 및 자주 사용되는 값을 정의한 CSS입니다.

  몇몇 px단위를 필요로 하는 곳을 제외하고 rem 유닛으로 작성되었습니다.
  rem의 기준은 16px로 정의하였으며, 가로 640px 이하의 화면부터 가변 사이즈 동작합니다.
  
  !! 주의사항 !!
  모든 경로는 상대경로로 작성되어 있습니다.
  배포 시 절대경로로 재작성을 권장합니다.
---------------------------------------------------------*/

/* 웹폰트 가져오기 */
/* Pretendard 폰트의 다른 CDN 및 동적 프리셋 사용 시 다음 URL을 참조하세요: https://github.com/orioncactus/pretendard */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap');

/* CSS에서 공용으로 사용할 각종 값 설정 */
:root {
    --color-white: #fff;
    --color-almost-white: #fafafa;
    --color-brightest-grey: #f4f4f4;
    --color-bright-grey: #efefef;
    --color-light-grey: #dedede;
    --color-default-grey: #ccc;
    --color-dark-grey: #808080;
    --color-darkest-grey: #303030;
    --color-almost-black: #101010;
    --color-black: #000;

    --color-lac-50: #f7f7f7;
    --color-lac-100: #eee;
    --color-lac-200: #e1e1e1;
    --color-lac-300: #cfcfcf;
    --color-lac-400: #aaa;
    --color-lac-500: #898989;
    --color-lac-600: #626262;
    --color-lac-700: #4f4f4f;
    --color-lac-800: #313131;
    --color-lac-900: #111;

    --color-red: #d40000;
    --color-green: #53B871;

    --font-family-default: "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;
    --font-family-serif: "Noto Serif KR", serif;

    --font-size-small: 0.875rem;
    --font-size-default: 1rem;
    --font-size-large: 1.375rem;
    --font-size-xlarge: 2rem;
    --font-size-xxlarge: 3rem;
    --font-size-xxxlarge: 4.5rem;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

html,
body {
    padding: 0;
    margin: 0;
    font-family: var(--font-family-default);
    word-break: keep-all;
}

/* 입력폼 폰트 지정 */
button,
input,
textarea,
select,
option {
    font-family: var(--font-family-default);
}

/* INPUT 태그 시작 */
input:not([type="checkbox"]):not([type="radio"]) {
    display: block;
    width: 100%;
    font-size: var(--font-size-default);
    color: var(--color-lac-900);
    font-weight: 500;
    padding: 0.6rem 0.1rem;
    outline: none;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--color-lac-400);
    background-color: transparent;
    appearance: none;
}

input:not([type="checkbox"]):not([type="radio"]).error {
    border-color: var(--color-red);
}

input:not([type="checkbox"]):not([type="radio"])::placeholder {
    color: var(--color-lac-400);
}

input:not([type="checkbox"]):not([type="radio"]):focus {
    padding-bottom: calc(0.6rem - 1px);
    border-bottom: 2px solid var(--color-lac-900);
}

input:not([type="checkbox"]):not([type="radio"]):disabled {
    color: var(--color-lac-200);
    border-bottom: 1px solid var(--color-lac-200);
}

/*-- INPUT 태그 끝 */


/* 텍스트상자 시작 */
textarea {
    font-size: var(--font-size-default);
    font-weight: 500;
    color: var(--color-lac-900);
    background: var(--color-lac-100);
    border: none;
    border-radius: 0;
    outline: none;
    padding: 0.6rem 1rem;
    resize: vertical;
    width: 100%;
    min-height: 15.4rem;
}

textarea::placeholder {
    color: var(--color-lac-400);
}

textarea:focus {
    border-bottom: 1px solid var(--color-lac-900);
}

textarea:disabled {
    color: var(--color-lac-200);
}

/*-- 텍스트상자 끝 */


/* 버튼 시작 */
button {
    padding: 1rem 0.5rem;
    font-size: var(--font-size-default);
    font-family: var(--font-family-serif);
    color: var(--color-lac-50);
    font-weight: 500;
    text-align: center;

    border-radius: 0.125rem;
    border: 1px solid var(--color-lac-100);
    background: var(--color-lac-900);

    width: 19.5rem;
    max-width: 100%;
    cursor: pointer;
}

button:hover {
    border: 1px solid var(--color-lac-500);
    background: var(--color-lac-500);
}

button:active {
    border: 1px solid var(--color-lac-900);
    background: var(--color-lac-50);
    color: var(--color-lac-900);
}

button:disabled {
    border: 1px solid var(--color-lac-100);
    background: var(--color-lac-100);
    color: var(--color-lac-300);
}

/*-- 버튼 끝 */


/* .divForm 공용 입력 폼 박스 시작

아래 구조와 같이 HTML에서 공용 양식 박스를 작성함.
<div class="divForm">
    <lable>LABEL</label>
    <input type="text" />
    <span class="spanError"></span>
</div>
*/
.divForm {
    position: relative;
    width: 100%;
}

.divForm>label {
    display: block;
    color: var(--color-lac-800);
    font-size: var(--font-size-small);
    font-weight: 400;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    margin: 0 0 0.65rem 0;
    padding: 0;
}

.divForm>label>sup {
    color: var(--color-red);
    font-weight: 400;
    vertical-align: baseline;
    font-size: var(--font-size-small);
    margin: 0 0 0 0.4rem;
}

.divForm>.spanError {
    display: block;
    font-size: var(--font-size-small);
    font-weight: 500;
    color: var(--color-red);
    min-height: 1.1rem;
    margin: 0.2rem 0 0 0;
    padding: 0;
}

/*-- .divForm 공용 양식 박스 긑 */


/* Alert 다이얼로그 시작 */
.dialogAlert {
    border: none;
    outline: none;
    background: var(--color-white);
    padding: 3rem;

    width: 458px;
    max-width: 90%;

}
.dialogAlert::backdrop {
    background-color: rgba(0, 0, 0, 0.32);
}

.dialogAlert>.divTitle {
    color: var(--color-lac-900);
    text-align: center;
    font-size: var(--font-size-default);
    font-weight: 500;
    margin: 0 0 1rem 0;
}

.dialogAlert>.divMessage {
    color: var(--color-lac-700);
    text-align: center;
    font-size: var(--font-size-small);
    font-weight: 500;
}

.dialogAlert>.divButtonWrap {
    margin: 2rem 0 0 0;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
}
.dialogAlert>.divButtonWrap>button {
    width: 100%;
    position: relative;
}
.dialogAlert>.divButtonWrap>button:nth-child(2) {
    border: 1px solid var(--color-lac-900);
    background: var(--color-lac-50);
    color: var(--color-lac-900);
}
/* Alert 다이얼로그 끝 */


/* 가로 640px 이하 화면 정의 */
@media screen and (max-width: 640px) {
    html {
        /* 가변 폰트 크기 */
        font-size: calc(100vw * 24 / 760);
    }

    button {
        width: 100%;
        max-width: 100%;
    }
}