@charset "utf-8";

/* ===========================================================================
   variables.css — 디자인 토큰 (CSS Custom Properties)
   - 모든 페이지에서 공통으로 참조되는 색상·타이포·간격 변수
   - 그룹: 메인 브랜드 / 기본 / 통신사 / 라벨·배지 / 텍스트 / 테두리
            / 그레이 / 블루 / 레드·옐로우 / 그림자·트랜지션
=========================================================================== */

:root {
    /* =========================================
       [1] 메인 브랜드 컬러
    ========================================= */
    --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 */

    /* =========================================
       [2] 기본 컬러
    ========================================= */
    --color-white:  #FFFFFF;
    --color-black:  #000000;
    --color-black2: #292929;
    --color-pink:   #F1516C;
    --color-red:    #FF1139;
    --color-red2:   #ED2647;
    --color-orange: #525151;
    --color-yellow: #FFBE3B;

    /* =========================================
       [3] 통신사 컬러
    ========================================= */
    --color-skt:    #6246D8;
    --color-skt-bg: #E6E0FF;
    --color-kt:     #0D7E74;
    --color-kt-bg:  #D9F3EF;
    --color-lgt:    #D23B7E;
    --color-lgt-bg: #FFE0EB;

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

    /* 추천 배지 */
    --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;

    /* =========================================
       [5] 텍스트 컬러
    ========================================= */
    --text-main:      #111827;   /* 진한 잉크색 본문 */
    --text-primary:   #444444;   /* 기본 텍스트 */
    --text-secondary: #666666;   /* 보조 텍스트 */
    --text-tertiary:  #8B95A1;   /* 흐린 텍스트 (메타·dot 등) */
    --text-muted:     #64748B;   /* 회색-블루 톤 보조 */
    --text-disabled:  #ACACAC;   /* 비활성화 */

    /* =========================================
       [6] 테두리
    ========================================= */
    --border-light: #E9E9E9;   /* 연한 테두리 */
    --border-dark:  #DDDDDD;   /* 일반 테두리 */

    /* =========================================
       [7] 그레이 스케일
    ========================================= */
    --gray-10:  #FBFBFB;
    --gray-15:  #F9F9FA;   /* 페이지 기본 배경 */
    --gray-20:  #F9F9F9;
    --gray-50:  #F6F6F6;
    --gray-100: #F4F4F6;
    --gray-150: #F2F2F2;
    --gray-200: #F0F0F0;
    --gray-300: #EAEAEA;
    --gray-400: #DDDDDD;
    --gray-500: #CCCCCC;

    /* =========================================
       [8] 블루 계열
    ========================================= */
    --blue-50:  #F1F6FA;   /* 아주 연한 블루톤 */
    --blue-100: #F5F7FF;   /* 은은한 블루+보라톤 */
    --blue-150: #E6F2FB;   /* 공지사항 배경 */
    --blue-200: #E0EFFD;   /* 정보성 배경 */
    --blue-300: #C2E4FA;   /* 중간톤 카드 강조 */
    --blue-400: #8AB9E3;
    --blue-500: #65AEF1;

    /* =========================================
       [9] 레드 / 옐로우 (알림용)
    ========================================= */
    --red-50:    #FEECEC;   /* 에러 알림 배경 */
    --yellow-50: #FCFAE7;   /* 경고·주의 배경 */

    /* =========================================
       [10] 그림자 / 트랜지션
    ========================================= */
    --shadow-sm: 0 2px 8px rgba(11, 15, 26, 0.04);
    --shadow-md: 0 8px 24px rgba(11, 15, 26, 0.06);
    --smooth:    cubic-bezier(0.4, 0, 0.2, 1);
}