@charset "utf-8";

/* ========================== 폰트명: Pretendard 웹폰트 ========================= */
/* 기본 방식 - 모든 기능 활용 가능 */
/* @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"); */

/* 작고 빠른 방식 - 존재하는 글꼴만 가져옴 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");

/* 가변 글꼴 방식 -- 다양한 굵기에서 선명함 표현 - !!!!!! 반드시 폰트명을 "Pretendard Variable" 로 지정해야 함  */
/* @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); */

/* ========================== 폰트명, 크기, 굵이 변수 설정 ========================= */
:root {
    /* ---------- Font Type ---------- */
    --ff-style: "Pretendard Variable", Pretendard, -apple-system, 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 Size : 디폴트로 14px 설정 ( Figma 보다 4px 이상으로 해야 동일한 크기로 보임) ---------- */
    --fs-28: 2em;
    --fs-23: 1.643em; /* 적용 예: Step 요소의 "숫자" */
    --fs-20: 1.429rem; /* 적용 예: 에러 페이지 타이틀 텍스트 */
    --fs-18: 1.286em; /* 적용 예: 체크박스 체크표시 (V) */
    --fs-16: 1.143em; /* 적용 예: 로그인 버튼 텍스트 */
    --fs-14: 1em; /* 기본 크기 (body contents) */
    --fs-13: 0.929em; /* 적용 예: 기본 button 글자 */
    --fs-12: 0.857em; /* 적용 예: "STEP" 글자 */

    /* ---------- Font weight ---------- */
    --fw-100: 100; /* thin */
    --fw-200: 200; /* extralight */
    --fw-300: 300; /* light */
    --fw-400: 400; /* regular 기본 굵기 */
    --fw-500: 500; /* medium */
    --fw-600: 600; /* semibold */
    --fw-700: 700; /* bold */
    --fw-800: 800; /* extrabold */
    --fw-900: 900; /* black */
}

/* ========================== 폰트 스타일 클래스 ========================= */
/* 적용 예 - 로그인 박스 타이틀 */
.font_28_semibold {
    font-size: var(--fs-28) !important;
    font-weight: var(--fw-600) !important;
    line-height: 5rem !important;
}
/* 적용 예: Step 요소의 "숫자" */
.font_23_regular {
    font-size: var(--fs-23) !important;
    font-weight: var(--fw-400) !important;
}
/* 적용 예: 에러 페이지 타이틀 텍스트 */
.font_20_semibold {
    font-size: var(--fs-20) !important;
    font-weight: var(--fw-600) !important;
}
/* 적용 예 - 서포트 글자(통합계정으로 로그인하세요) */
.font_16_medium {
    font-size: var(--fs-16) !important;
    font-weight: var(--fw-500) !important;
}
/* 적용 예 - Body 디폴트 글자들 */
.font_14_regular {
    font-size: var(--fs-14) !important;
    font-weight: var(--fw-400) !important;
}
/* 적용 예 - STEP 1 ... STEP 2 */
.font_12_medium {
    font-size: var(--fs-12) !important;
    font-weight: var(--fw-500) !important;
}