:root {
    /* 메인색상 */
    --main-color: #ff8d00;
    --sub-color: #ffddb0;
    --strong-color: #ee6002;
    --bg-color: black;
    
    
    /* 폰트설정  */
    /* 
        font-family: 'RIDIBatang', 'Nanum Gothic', 'Roboto', sans-serif; 
        font-weight : normal, bold, bolder, lighter;
        font-weight : 100, 200, 300, 400, 500, 600, 700, 800, 900
    */
    --btn-font-family: 'RIDIBatang', 'Roboto';
    --h1-font-family: 'RIDIBatang', 'Roboto';
    --h2-font-family: 'RIDIBatang', 'Roboto';
    --h3-font-family: 'Roboto', 'RIDIBatang';
    --h4-font-family: 'RIDIBatang', 'Roboto';
    --p-font-family: 'Nanum Gothic', 'Roboto';
    
    /* 폰트 굵기 */
    --btn-font-weight: 700;
    --h1-font-weight: 900;
    --h2-font-weight: 900;
    --h3-font-weight: 700;
    --h4-font-weight: 700;
    --p-font-weight: 600;
    
    /* 폰트 사이즈 */
    --h1-font-size: 36px;
    --h2-font-size: 28px;
    --h3-font-size: 22px;
    --h4-font-size: 20px;
    --p-font-size: 19px;
    
    /* 폰트 마진 */
    --h1-font-margin-top: 20px;
    --h2-font-margin-top: 20px;
    --h3-font-margin-top: 20px;
    --h4-font-margin-top: 15px;
    --p-font-margin-top: 15px;
    
    --h1-font-margin-bottom: 0px;
    --h2-font-margin-bottom: 0px;
    --h3-font-margin-bottom: 0px;
    --h4-font-margin-bottom: 0px;
    --p-font-margin-bottom: 0px;
    
    /* 폰트 패딩 */
    --h1-padding: 4px;
    --h2-padding: 4px;
    --h3-padding: 6px;
    --h3-padding-left: 6px;
    --h4-padding-left: 6px;
    --p-padding: 0px;
    
    /* 폰트 인덴트 */
    --h2-text-indent: 6px;
    --h3-text-indent: 8px;
    
    
    /* 반응형 시작*/
    /* 반응형 폰트 사이즈 */
    --h1-font-size-r: 22px;
    --h2-font-size-r: 21px;
    --h3-font-size-r: 20px;
    --h4-font-size-r: 19px;
    --p-font-size-r: 19px;
    
    /* 반응형 폰트 굵기 */
    --btn-font-weight-r: 700;
    --h1-font-weight-r: 900;
    --h2-font-weight-r: 900;
    --h3-font-weight-r: 700;
    --h4-font-weight-r: 700;
    --p-font-weight-r: 600;
    
    /* 반응형 폰트 높이  */
    --line-height-r: 1.4em;
    
    
    /* 빅버튼 기본 */
    --hs-btn-lg-bg-color: rgb(240, 36, 0);
    --hs-btn-lg-txt-color: white;
    
    /* 빅버튼 호버 */
    --hs-btn-lg-bg-color-hover: rgb(235, 161, 65);
    --hs-btn-lg-txt-color-hover: white;
    --hs-btn-lg-txt-dec-color-hover: blue;
    --hs-btn-lg-sizeup-hover: 1.5;
    
    
    /* 문단 중간버튼 기본 */
    --hs-btn-md-bg-color: rgb(240, 36, 0);
    --hs-btn-md-txt-color: white;
    
    /* 문단 중간버튼 호버 */
    --hs-btn-md-bg-color-hover: rgb(235, 161, 65);
    --hs-btn-md-txt-color-hover: white;
    --hs-btn-md-txt-dec-color-hover: blue;
    --hs-btn-md-sizeup-hover: 1.1;
    
    
    /* h2 색상 */
    /* 기본색상 */
    --hs-gradient-color-1: #A7FFEB;
    --hs-gradient-color-2: #64FFDA;
    --hs-border-color-1: #42d6b4;
    --hs-border-color-2: #38facd;
    
    /* .hoons h2 강조색상 */
    --hs-gradient-st-color-1: #dddf5a;
    --hs-gradient-st-color-2: #a3e211;
    --hs-border-st-color-1: #a3e211;
    --hs-border-st-color-2: #f53809;
    
    
    /* h3 띄 색상 */
    /* .hoons h3 띄 기본색상 */
    --hs-th-border-left: #333;
    --hs-th-border-botom: #0c0c0c;
    
    /* .hoons h3 띄 강조색상 */
    --hs-th-st-border-left: #f50909;
    --hs-th-st-border-botom: #da4f2d;
    
    /* basic color */
    --color-black: #3f454d;
    --color-white: #ffffff;
    --color-red: #ff0000;
    --color-blue: #3b49c3;
    --color-yellow: #fbbe28;
    --color-pink: #fd7f84;
    --color-light-grey: #dfdfdf;
    
    /* size */
    --base-margin: 8px;
    --size-button: 60px;
    --size-border: 10px;
    --size-xl: 48px;
    --size-lg: 32px;
    --size-md: 16px;
    --size-sm: 8px;
    
    --line-height: 1.7em;
    --padding-left: 10px;
    --padding-right: 10px;
    --padding-top: 10px;
    --padding-bottom: 10px;
    --padding: 10px;
    
    /* 언더라인 */
    --hs-underline-color: #d1e780;
    
    }