:root {
    /* base color */
    --color-white: #fff;

    --color-main: #e6195c;
    --color-red: #ed003b;
    --color-green: #00e286;
    --color-orange: #ff6052;
    --color-purple: #5e47f4;
    --color-pink: #e949a9;
    --color-pink02: #e5195c;

    --color-gray01: #f4f5f5;
    --color-gray02: #e7ebf0;
    --color-gray03: #d3d3dd;
    --color-gray04: #cfcfcf;
    --color-gray05: #a1a1aa;
    --color-gray06: #808284;
    --color-gray07: #7f7f7f;
    --color-gray08: #777780;
    --color-gray09: #727272;
    --color-gray10: #646464;
    --color-gray11: #5b5b5b;
    --color-gray12: #4b4b4b;
    --color-gray13: #343434;
    --color-gray14: #242424;
    --color-gray15: #121212;
    --color-gray16: #484848;
    --color-gray17: #303030;
    --color-gray18: #e0e0e0;
    --color-gray19: #969696;
    --color-gray20: #161616;
    --color-gray21: #d5d5d5;
    --color-gray22: #b8b8b8;
    --color-gray23: #191919;
    --color-gray25: #494949;
    --color-gray26: #5d5d5d;
    --color-gray27: #333;
    --color-gray28: #c1c1c1;
    --color-gray29: #0f0f0f;
    --color-gray30: #e1e1e1;
    --color-gray31: #7b7b7b;
    --color-gray32: #d3d3d3;
    --color-gray33: #aeaeae;
    --color-gray34: #ccc;
    --color-gray35: #d7d7d7;
    --color-gray36: #6a6a6a;
    --color-gray37: #c4c4c4;
    --color-gray38: #0a0a0a;
    --color-gray39: #6f6f6f;
    --color-gray40: #9c9c9c;
    --color-gray41: #252525;
    --color-gray42: #dfdfdf;
    --color-gray43: #f5f6fd;
    --color-gray44: #eeeeee;
    --color-gray45: #888888;
    --color-gray46: #b2b2b2;
    --color-gray47: #c5c5c5;
    --color-gray48: #515151;

    --color-black: #000;

    --font-Pretendard:
        "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic",
        "맑은 고딕", sans-serif;

    --font-Gmarket:
        "G마켓 산스", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
        "Malgun Gothic", sans-serif;
    --font-Product: "Product Sans";
    --font-PlusJakrta: "PlusJakartaSans";
    --font-Inter: "Inter";
    --font-Bebas: "BebasNeue";

    --font-size-62: 3.1rem;
    --font-size-54: 2.7rem;
    --font-size-50: 2.5rem;
    --font-size-48: 2.4rem;
    --font-size-42: 2.1rem;
    --font-size-40: 2rem;
    --font-size-38: 1.9rem;
    --font-size-36: 1.8rem;
    --font-size-34: 1.7rem;
    --font-size-32: 1.6rem;
    --font-size-30: 1.5rem;
    --font-size-28: 1.4rem;
    --font-size-26: 1.3rem;
    --font-size-25: 1.25rem;
    --font-size-24: 1.2rem;
    --font-size-23: 1.15rem;
    --font-size-22: 1.1rem;
    --font-size-21: 1.05rem;
    --font-size-20: 1rem;
    --font-size-19: 0.95rem;
    --font-size-18: 0.9rem;
    --font-size-17: 0.85rem;
    --font-size-16: 0.8rem;
    --font-size-15: 0.75rem;
    --font-size-14: 0.7rem;
    --font-size-13: 0.65rem;
    --font-size-12: 0.6rem;
    --font-size-11: 0.55rem;
    --font-size-10: 0.5rem;
    --font-size-9: 0.45rem;
    --font-size-8: 0.4rem;
    --font-size-7: 0.35rem;
    --font-size-6: 0.3rem;
    --font-size-5: 0.25rem;

    --font-weight-100: 100;
    --font-weight-200: 200;
    --font-weight-300: 300;
    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-600: 600;
    --font-weight-700: 700;
    --font-weight-800: 800;
    --font-weight-900: 900;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

html,
body {
    width: 100%;
    min-height: 100%;
    background: var(--color-black);
    color: var(--color-white);
    margin: 0;
}