@charset "UTF-8";

/* 변수 */
:root {
    /* color */
    --color-warning:    #fe5722;
    --color-info:       #37b7b6;
    --color-darkgray:   #1b1b1b;
    --color-dark-gray:   #1b1b1b;
    --color-gray:       #666;
    --color-lightgray:  #999;
    --color-mid-gray:   #888;
    --color-light-gray: #999;    
    --color-placeholder:#bdbdbd;
    --color-white: #fff;
    --color-blue: #4FA5F4;


    /* border color */
    --border-color:     #d9d9d9;
    --border-color-dark:#c6c6c6;
    /* background color */
    --bg-gray:          #f2f2f2;
    --bg-darkgray:      #ddd;
    --bg-lightgray:     #f5f5f5;
    --bg-emphasis:      #ffdbcf;
    /* size */
    --size-11:  0.786rem;
    --size-12:  0.857rem;
    --size-13:  0.929rem;
    --size-15:  1.071rem;
    --size-16:  1.143rem;
    --size-18:  1.286rem;
    --size-20:  1.429rem;
    --size-30:  2.143rem;
    --size-40:  2.857rem;

    /* radius */
    --round-8:  0.571rem;
    --round-4:  0.286rem;
    --round-2:  0.143rem;
    /* gap */
    --gap-50:   3.571rem;
    --gap-32:   2.286rem;
    --gap-24:   1.714rem;
    --gap-21:   1.5rem;
    --gap-14:   1rem;
    --gap-10:   0.714rem;
    --gap-7:    0.5rem;
    --gap-6:    0.429rem;
    --gap-5:    0.357rem;
    --gap-3:    0.214rem;
    /* height */
    --header-height:3.214rem; /* 45px */
    --height-70:5rem;
    --height-66: 4.714rem;
    --height-60: 4.286rem;

    --height-56:4rem;
    --height-48:3.429rem;
    --height-40:2.857rem;
    --height-35:2.5rem;
    --height-24:1.714rem;
    /* width */
    --width-135: 9.643rem;
    --width-100: 6.25rem;
    --width-90: 6.429rem;
    --width-80: 5.714rem;
    --width-44:  3.143rem;
    --width-25: 1.786rem;

    --logo-w:   2.214rem; /* 31px */
}