/* 베이스 START */
@font-face {
    font-family: 'NanumBarunGothic';
    src: url('/assets/fonts/NanumBarunGothic.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    /* CSS 리셋 */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* 테두리 */
    --radius-base: 8px;
    --color-border-base: #bbbbbb;
    --color-border-light: #cccccc;

    /* 색상 */
    --color-primary: #319ade;
    --color-primary-light: #b8e3ff;
    --color-primary-lighter: #caeaff;
    --color-primary-lightest: #ecf8ff;
    --color-primary-dark: #2c8bc8;
    --color-primary-darker: #277bb2;

    /* 폰트 색상 */
    --color-text-primary: #333333;
    --color-text-secondary: #999999;
    --color-text-disabled: #bbbbbb;
    --color-text-white: #fff;

    /* 배경 색상 */
    --color-background-primary: #fff;
    --color-background-disabled: #f5f5f5;
    --color-background-hover: #f0f0f0;
    --color-background-active: #ebebeb;


    /* 공백 사이즈 */
    --width-max-mobile: 448px;
    --height-min-mobile: 100svh; /* https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser */
    --padding-mobile: 32px;


    /* 애니메이션 */
    --animation-primary: all 0.2s ease;
}

body {
    color: var(--color-text-primary);
    font-family: 'NanumBarunGothic', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}