:root{
    /* font */
    --f-hero1 : 56px;
    --f-hero2 : 48px;
    --f-display1 : 40px;
    --f-display2  : 28px;
    --f-display3 : 24px;
    --f-heading1 : 20px;
    --f-heading2 : 18px;
    --f-heading3 : 16px;
    --f-body1 : 14px;
    --f-body2 : 13px;
    --f-body3 : 12px;
    --f-body4 : 11px;
    --f-small : 8px;

    --f-body11 : 11px;

    /* Neutral color */
    --n-mainTitle : #1D1D1F;
    --n-subTitle : #40404E; /* +본문, 버튼 */
    --n-info : #7D7B90;
    --n-info2 : #9B9BAA;
    --n-deactivate: #B8B8C7;
    --n-white : #ffffff;


    /* background color */
    --b-color1 : #0C182D;
    --b-color2 : #9FA1A9;
    --b-color3 : #DEDEDF;
    --b-color4 : #F0F0F2;
    --b-color5 : #F8F8F8; /* main */


    /* stroke color */
    --s-color1 : #DEDFE5; /* main */
    --s-color2 : #EAEBF0;


    /* Primary color */
    --p-color1: #339DFF; /* 강조 */
    --p-color2: #30C214; /* 브랜드 */

    /* etc color */
    --e-listening-color: #FF00E5;
    --e-reading-color: #FF7300;
    --e-writing-color: #0059FF;
    --e-speaking-color: #009F2D;
    --e-listening-color-bg : #FFE4F9;
    --e-reading-color-bg : #FFEBD4;
    --e-writing-color-bg : #D4EBFF;
    --e-speaking-color-bg : #D5F0C3;

    /* system color */
    --waring-color: #FF5959;
    --success-color: #14BA85;

    /* card ui, button color */
    --c-color1: #D5F0C3;
    --c-color2: #E4F8D7;


    /* border-radius */
    --b-radius0: 8px;
    --b-radius1: 16px;
    --b-radius2: 24px;
    --b-radius3: 12px; /* add */

    /* 그림자 */
    --box-shadow1 : 0px 8px 20px 0px rgba(0, 0, 0, 0.04);
    --box-shadow2 : 0px 8px 20px 0px rgba(0, 0, 0, 0.08);
    --box-shadow3 : 0px 14px 40px 0px rgba(0, 0, 0, 0.14);
    --box-shadow4 : 0px 12px 100px 10px rgba(0, 0, 0, 0.07);
    --box-shadow5 : 0px 10px 40px 0px rgba(0, 0, 0, 0.30);
    --box-shadow6 : 0px 14px 50px 0px rgba(145, 176, 125, 0.30);
    --box-shadow7 : 0px 14px 100px 10px rgba(0, 0, 0, 0.07);

    /* gradient */
    --c-gradient1: linear-gradient(135deg, #F8EE86, #A1E7D8);
    --c-gradient2: linear-gradient(90deg, #D277E5 0%, #7531F9 60%);
    --c-gradient3: linear-gradient(135deg, #10A9FF, #5557FF);
    --c-gradient4: linear-gradient(90deg, #00D0BF, #83FF9C);


}
