@charset "utf-8";

:root {
    --color-main: #0267FF;   /* 메인 포인트 컬러 */
    --color-main-bg: #E0EFFD;   /* 메인 컬러 백그라운드 */
    --color-main-hover: #0257E0;   /* Hover  */
    --color-main-focus: #5A9EFF;   /* Focus  */
    --color-main-active: #014EC0;   /* Click / Active  */
    --color-main-disabled: #AFCFFF;   /* Disabled   */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-pink: #F1516C;
    --color-red: #ff1139;
    --color-orange: #525151;
    --color-red2: #ed2647;
    --color-yellow: #ffbe3b;
    --color-skt: #6246D8;
    --color-skt-bg: #E6E0FF;

    --color-kt-bg: #D9F3EF;
    --color-kt: #0D7E74;

    --color-lgt: #D23B7E;
    --color-lgt-bg: #FFE0EB;

    /* === Label / Badge === */
    --label-orange-bg: #FFE5C2;   /* 파스텔 오렌지 배경 */
    --label-orange-text: #A34F00; /* 진한 오렌지 브라운 텍스트 */

    --border-light: #E9E9E9;    /* 연한 테두리 */
    --border-dark: #DDD;        /* 일반 테두리 */

    --text-primary: #444;       /* 기본 텍스트 */
    --text-secondary: #666;     /* 보조 텍스트 */
    --text-tertiary: #898989;      /* 흐린 텍스트 */
    --text-disabled: #acacac;      /* 비활성화 텍스트 */

    /* 추천 */
    --badge-recommend-text: #8A6A1F;
    --badge-recommend-bg:   #FFF6DD;
    --badge-recommend-bd:   #FFE2A8;
    --badge-point-bg:   #E3DDFC;
    --badge-point-text: #4C1D95;

    /* 인기도 */
    --badge-popular-text:   #C84C3A;
    --badge-popular-bg:     #FFE9E6;
    --badge-popular-bd:     #FFD1CB;
    --badge-popular-bg2:   #FFE8E4; 
    --badge-popular-text2: #C2410C; 

    /* 데이터 중심 */
    --badge-data-text:      #0E7C86;
    --badge-data-bg:        #E6F7F9;
    --badge-data-bd:        #BFEAED;

    /* 통화 중심 */
    --badge-call-text:      #2F5BD1;
    --badge-call-bg:        #EAF2FF;
    --badge-call-bd:        #C8DAFF;

    

    /* === Neutral / Gray === */
    --gray-10:	#FBFBFB;    /* 페이지 전체 배경 / white 대체 */
    --gray-15:	#f9f9fa;    /* 페이지 전체 배경 / white 대체 */
    --gray-20:  #F9F9F9;    /* 가장 연한 회색, 페이지 전체 기본 배경 */
    --gray-50:	#F6F6F6;	 /* 페이지 기본 배경 */
    --gray-100: #F4F4F6;   /* 밝은 회색, 카드·컨테이너 배경 */
    --gray-150: #F2F2F2;   /* 라인 / 섹션 구분 */
    --gray-200: #F0F0F0;   /* 라인 / 섹션 구분 */
    --gray-300: #EAEAEA;   
    --gray-400: #DDDDDD;   
    --gray-500: #CCCCCC;   

    /* === Blue 계열 === */
    --blue-50:  #F1F6FA;  /* 아주 연한 블루톤, 섹션 구분 */
    --blue-100: #F5F7FF;  /* 은은한 블루+보라톤 강조 배경 */
    --blue-150: #E6F2FB;  /* 공지사항 배경용 하늘색 */
    --blue-200: #E0EFFD;  /* 정보성 배경, input 배경 등 */
    --blue-300: #C2E4FA;  /* 중간톤, 카드나 강조 배경용 */
    --blue-400: #8AB9E3; 
    --blue-500: #65AEF1;

    /* === Red 계열 === */
    --red-50:   #FEECEC;  /* 에러 알림 배경 */

    /* === Yellow 계열 === */
    --yellow-50: #FCFAE7; /* 경고·주의 배경 */

}