@charset "utf-8";

/* ---------------------------------------------------------------------------
    다크모드 한번에 확인용 : 개발반영XXXX
--------------------------------------------------------------------------- */
.dark-control-button {z-index:1000000;position:fixed;top:10px;left:40px;width:30px;height:30px;box-shadow:var(--w-shadow-03);border-radius:8px;background:var(--w-color-text-categoryBadges-darkBlue);}
.big-control-button {z-index:1000000;position:fixed;top:10px;left:74px;width:30px;height:30px;font-size:18px;color:#fff;box-shadow:var(--w-shadow-03);border-radius:8px;background:var(--w-color-text-categoryBadges-darkBlue);}
.is-dark .big-control-button {color:#000;}
/* ---------------------------------------------------------------------------*/
/* 웹접근성 테스트용 */
/* *:focus {border:2px solid #000;} */
/* ---------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------
    # 운영반영일시 : 2024.00.00 00:00
    # 최종수정일시 : 2024.00.00 00:00
-----------------------------------------------------------------------------------*/
@font-face {
	font-family:'Pretendard';font-weight:700;font-style:normal;
	src:url('./../font/Pretendard-Bold.woff2');
}
@font-face {
	font-family:'Pretendard';font-weight:600;font-style:normal;
    src:url('./../font/Pretendard-SemiBold.woff2');
}
@font-face {
    font-family:'Pretendard';font-weight:500;font-style:normal;
	src:url('./../font/Pretendard-Medium.woff2');
}
@font-face {
    font-family:'Pretendard';font-weight:400;font-style:normal;
    src:url('./../font/Pretendard-Regular.woff2');
}


/*-----------------------------------------------------------------------------------
    변수선언
-----------------------------------------------------------------------------------*/
:root{
    --vh: 100%;
    /* *************** COLOR *************** */
    --gray-50: #f8f9fa;
    --gray-100: #f1f3f5;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #c5cbd1;
    --gray-500: #989fa7;
    --gray-600: #6d747b;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212528;
    --grayNonOpaque-50: rgba(115, 132, 149, 0.05);
    --grayNonOpaque-100: rgba(130, 149, 167, 0.11);
    --grayNonOpaque-200: rgba(133, 151, 168, 0.18);
    --grayNonOpaque-300: rgba(119, 134, 151, 0.24);
    --grayNonOpaque-400: rgba(111, 125, 140, 0.4);
    --grayNonOpaque-500: rgba(50, 63, 79, 0.5);
    --grayNonOpaque-600: rgba(12, 23, 35, 0.6);
    --grayNonOpaque-700: rgba(2, 12, 21, 0.72);
    --grayNonOpaque-800: rgba(7, 15, 22, 0.82);
    --grayNonOpaque-900: rgba(33, 37, 40, 1);
    --inverseGray-50: #1E2224;
    --inverseGray-100: #292E33;
    --inverseGray-200: #3C4348;
    --inverseGray-300: #5B6167;
    --inverseGray-400: #788087;
    --inverseGray-500: #949CA3;
    --inverseGray-600: #ADB3B8;
    --inverseGray-700: #C5CACE;
    --inverseGray-800: #E1E3E5;
    --inverseGray-900: #fff;
    --inverseGrayNonOpaque-50: rgba(208, 234, 241, 0.05);
    --inverseGrayNonOpaque-100: rgba(199, 228, 255, 0.11);
    --inverseGrayNonOpaque-200: rgba(214, 237, 255, 0.2);
    --inverseGrayNonOpaque-300: rgba(225, 239, 254, 0.34);
    --inverseGrayNonOpaque-400: rgba(227, 242, 255, 0.48);
    --inverseGrayNonOpaque-500: rgba(226, 239, 248, 0.62);
    --inverseGrayNonOpaque-600: rgba(228, 234, 241, 0.74);
    --inverseGrayNonOpaque-700: rgba(232, 237, 242, 0.83);
    --inverseGrayNonOpaque-800: rgba(248, 249, 252, 0.9);
    --inverseGrayNonOpaque-900: rgba(255, 255, 255, 0.9);
    --black-0: rgba(0, 0, 0, 0);
    --black-4: rgba(0, 0, 0, 0.04);
    --black-8: rgba(0, 0, 0, 0.08);
    --black-12: rgba(0, 0, 0, 0.12);
    --black-16: rgba(0, 0, 0, 0.16);
    --black-20: rgba(0, 0, 0, 0.20);
    --black-24: rgba(0, 0, 0, 0.24);
    --black-32: rgba(0, 0, 0, 0.32);
    --black-40: rgba(0, 0, 0, 0.40);
    --black-56: rgba(0, 0, 0, 0.56);
    --black-60: rgba(0, 0, 0, 0.60);
    --black-72: rgba(0, 0, 0, 0.72);
    --black-80: rgba(0, 0, 0, 0.80);
    --black-88: rgba(0, 0, 0, 0.88);
    --black-96: rgba(0, 0, 0, 0.96);
    --black-100: rgba(0, 0, 0, 1.00);
    --white-0: rgba(255, 255, 255, 0.00);
    --white-4: rgba(255, 255, 255, 0.04);
    --white-8: rgba(255, 255, 255, 0.08);
    --white-12: rgba(255, 255, 255, 0.12);
    --white-16: rgba(255, 255, 255, 0.16);
    --white-20: rgba(255, 255, 255, 0.20);
    --white-24: rgba(255, 255, 255, 0.24);
    --white-32: rgba(255, 255, 255, 0.32);
    --white-40: rgba(255, 255, 255, 0.40);
    --white-56: rgba(255, 255, 255, 0.56);
    --white-60: rgba(255, 255, 255, 0.60);
    --white-72: rgba(255, 255, 255, 0.72);
    --white-80: rgba(255, 255, 255, 0.80);
    --white-88: rgba(255, 255, 255, 0.88);
    --white-96: rgba(255, 255, 255, 0.96);
    --white-100: rgba(255, 255, 255, 1.00);
    --blue-50: #e5f4ff;
    --blue-100: #d1eaff;
    --blue-200: #90c9fd;
    --blue-300: #5babfb;
    --blue-400: #3996f9;
    --blue-500: #2589f4;
    --blue-600: #116bda;
    --blue-700: #1563c1;
    --blue-800: #1759b0;
    --blue-900: #174a92;
    --cyan-50: #e0f6fb;
    --cyan-100: #cbeef6;
    --cyan-200: #91d2e1;
    --cyan-300: #64bfd4;
    --cyan-400: #46b6cf;
    --cyan-500: #1aa3c1;
    --cyan-600: #1b91ac;
    --cyan-700: #1b849b;
    --cyan-800: #187388;
    --cyan-900: #146274;
    --green-50: #dff7ef;
    --green-100: #baecdd;
    --green-200: #76e0c0;
    --green-300: #47d1a8;
    --green-400: #20c594;
    --green-500: #00ad7c;
    --green-600: #02976d;
    --green-700: #048b65;
    --green-800: #047b5b;
    --green-900: #066b51;
    --yellow-50: #fff4d1;
    --yellow-100: #ffefb2;
    --yellow-200: #ffe68a;
    --yellow-300: #ffdb66;
    --yellow-400: #ffd138;
    --yellow-500: #febb10;
    --yellow-600: #f9aa01;
    --yellow-700: #f79a02;
    --yellow-800: #e78404;
    --yellow-900: #ce6f03;
    --orange-50: #fff0e0;
    --orange-100: #ffdfc2;
    --orange-200: #ffc994;
    --orange-300: #ffb061;
    --orange-400: #ff9838;
    --orange-500: #ff8614;
    --orange-600: #ef7a04;
    --orange-700: #e06c00;
    --orange-800: #c85f04;
    --orange-900: #b85300;
    --red-50: #fceeee;
    --red-100: #fdd8d9;
    --red-200: #f9a9aa;
    --red-300: #f68486;
    --red-400: #f06065;
    --red-500: #ee444a;
    --red-600: #e32b31;
    --red-700: #cc1e24;
    --red-800: #b01c23;
    --red-900: #99141d;
    --pink-50: #ffebf2;
    --pink-100: #ffd6e6;
    --pink-200: #fda5c8;
    --pink-300: #f882b3;
    --pink-400: #f35e9c;
    --pink-500: #f0448e;
    --pink-600: #e52a71;
    --pink-700: #cd1d67;
    --pink-800: #a22f66;
    --pink-900: #8c2b5a;
    --purple-50: #f9edfc;
    --purple-100: #f7ddfd;
    --purple-200: #e5a1f7;
    --purple-300: #d378f2;
    --purple-400: #c45fec;
    --purple-500: #b348e5;
    --purple-600: #a13ed0;
    --purple-700: #8a31b4;
    --purple-800: #772e99;
    --purple-900: #662b82;
    --deepBlue-50: #e5efff;
    --deepBlue-100: #CFDEFC;
    --deepBlue-200: #A7BFFB;
    --deepBlue-300: #7A9EFA;
    --deepBlue-400: #5682FB;
    --deepBlue-500: #3F72FD;
    --deepBlue-600: #2658ED;
    --deepBlue-700: #1641D0;
    --deepBlue-800: #1938A9;
    --deepBlue-900: #162C8D;
    --violet-50: #ebe9fb;
    --violet-100: #d4cff7;
    --violet-200: #b1a6f0;
    --violet-300: #8c81eb;
    --violet-400: #7163ee;
    --violet-500: #6050f2;
    --violet-600: #4e46da;
    --violet-700: #3a34d0;
    --violet-800: #2a2ab7;
    --violet-900: #1a259e;
    --nonOpaque30-blue: rgba(8, 113, 243, 0.3);
    --nonOpaque30-red: rgba(227, 43, 49,0.3);
    --nonOpaque30-green: rgba(0, 173, 124, 0.3);
    --nonOpaque30-orange: rgba(255, 134, 20, 0.3);
    --nonOpaque30-deepBlue: rgba(38, 88, 237, 0.3);
    --nonOpaque30-yellow: rgba(254, 187, 16, 0.3);
    --nonOpaque30-pink: rgba(240, 68, 142, 0.3);
    --nonOpaque30-purple: rgba(179, 72, 229, 0.3);
    /* element base */
    --elevatedBackground2: #fff;
    --elevatedBackground1: #fff;
    --background: #fff;

    --surface: #fff;
    --surfaceElevated2: #fff;
    --surfaceElevated1: #fff;
    /* border, text, icon */
    --accentNonOpaque-blue: rgba(8, 113, 243, 0.3);
    --accentNonOpaque-green: rgba(0, 173, 124, 0.3);
    --accentNonOpaque-red: rgba(227, 43, 49, 0.3);
    --accentNonOpaque-orange: rgba(255, 134, 20, 0.3);
    --accentNonOpaque-deepBlue: rgba(38, 88, 237, 0.3);
    --accentNonOpaque-yellow: rgba(254, 187, 16, 0.3);
    --accentNonOpaque-pink: rgba(240, 68, 142, 0.3);
    --accentNonOpaque-purple: rgba(179, 72, 229, 0.3);
    --accentNonOpaque-blueStrong: rgba(37, 137, 244, 0.5);/*확인필요*/
    --accentNonOpaque-blueStrong2: rgba(37, 137, 244, 0.5);
    --loginFixedBlue: #3e6186;
    --loginFixedRed: #6a3947;
    --banner-low-01: #f5f6df;
    --banner-low-02: #eff7e1;
    --banner-low-03: #e3fae3;
    --banner-low-04: #edf7f1;
    --banner-low-05: #e4f7f2;
    --banner-low-06: #defafa;
    --banner-low-07: #dff6ff;
    --banner-low-08: #ebf5ff;
    --banner-low-09: #f1f3fe;
    --banner-low-10: #feefff;
    --banner-low-11: #feeeee;
    --banner-low-12: #f2f5eb;
    --banner-low-13: #faf3e3;
    --banner-low-14: #faf0e8;
    --banner-low-15: #f5f5f5;
    --banner-md-01: #ebe8bc;
    --banner-md-02: #d9edc5;
    --banner-md-03: #c9f1c9;
    --banner-md-04: #d0eee1;
    --banner-md-05: #c7f0db;
    --banner-md-06: #bbf0f0;
    --banner-md-07: #c7eefc;
    --banner-md-08: #dbe7ff;
    --banner-md-09: #e2e4ff;
    --banner-md-10: #f7deff;
    --banner-md-11: #ffe0d1;
    --banner-md-12: #e2e7d7;
    --banner-md-13: #f0e6c7;
    --banner-md-14: #fce2ca;
    --banner-md-15: #e6e6e6;


    /* *************** FONT *************** */
    /* base style */
    --w-typhgraphy-lt5-700: 700 2rem/140% "Pretendard";
    --w-typhgraphy-lt5-600: 600 2rem/140% "Pretendard";
    --w-typhgraphy-lt5-500: 500 2rem/140% "Pretendard";
    --w-typography-h1-700: 700 1.8125rem/140% "Pretendard";
    --w-typography-h1-600: 600 1.8125rem/140% "Pretendard";
    --w-typography-h1-500: 500 1.8125rem/140% "Pretendard";
    --w-typography-h2-700: 700 1.5625rem/140% "Pretendard";
    --w-typography-h2-600: 600 1.5625rem/140% "Pretendard";
    --w-typography-h2-500: 500 1.5625rem/140% "Pretendard";
    --w-typography-h3-700: 700 1.375rem/140% "Pretendard";
    --w-typography-h3-600: 600 1.375rem/140% "Pretendard";
    --w-typography-h3-500: 500 1.375rem/140% "Pretendard";
    --w-typography-h3-dense-700: 700 1.375rem/120% "Pretendard";
    --w-typography-h3-dense-600: 600 1.375rem/120% "Pretendard";
    --w-typography-h3-dense-500: 500 1.375rem/120% "Pretendard";
    --w-typography-h4-700: 700 1.25rem/140% "Pretendard";
    --w-typography-h4-600: 600 1.25rem/140% "Pretendard";
    --w-typography-h4-500: 500 1.25rem/140% "Pretendard";
    --w-typography-h4-400: 400 1.25rem/140% "Pretendard";
    --w-typography-h4-dense-700: 700 1.25rem/120% "Pretendard";
    --w-typography-h4-dense-600: 600 1.25rem/120% "Pretendard";
    --w-typography-h4-dense-500: 500 1.25rem/120% "Pretendard";
    --w-typography-h4-dense-400: 400 1.25rem/120% "Pretendard";
    --w-typography-h5-700: 700 1.0625rem/140% "Pretendard";
    --w-typography-h5-600: 600 1.0625rem/140% "Pretendard";
    --w-typography-h5-500: 500 1.0625rem/140% "Pretendard";
    --w-typography-h5-400: 400 1.0625rem/140% "Pretendard";
    --w-typography-h5-dense-700: 700 1.0625rem/120% "Pretendard";
    --w-typography-h5-dense-600: 600 1.0625rem/120% "Pretendard";
    --w-typography-h5-dense-500: 500 1.0625rem/120% "Pretendard";
    --w-typography-h5-dense-400: 400 1.0625rem/120% "Pretendard";
    --w-typography-h6-700: 700 1rem/140% "Pretendard";
    --w-typography-h6-600: 600 1rem/140% "Pretendard";
    --w-typography-h6-500: 500 1rem/140% "Pretendard";
    --w-typography-h6-400: 400 1rem/140% "Pretendard";
    --w-typography-h6-dense-700: 700 1rem/120% "Pretendard";
    --w-typography-h6-dense-600: 600 1rem/120% "Pretendard";
    --w-typography-h6-dense-500: 500 1rem/120% "Pretendard";
    --w-typography-h6-dense-400: 400 1rem/120% "Pretendard";
    --w-typography-b1-700: 700 0.9375rem/140% "Pretendard";
    --w-typography-b1-600: 600 0.9375rem/140% "Pretendard";
    --w-typography-b1-500: 500 0.9375rem/140% "Pretendard";
    --w-typography-b1-400: 400 0.9375rem/140% "Pretendard";
    --w-typography-b1-dense-700: 700 0.9375rem/120% "Pretendard";
    --w-typography-b1-dense-600: 600 0.9375rem/120% "Pretendard";
    --w-typography-b1-dense-500: 500 0.9375rem/120% "Pretendard";
    --w-typography-b1-dense-400: 400 0.9375rem/120% "Pretendard";
    --w-typography-b2-700: 700 0.875rem/140% "Pretendard";
    --w-typography-b2-600: 600 0.875rem/140% "Pretendard";
    --w-typography-b2-500: 500 0.875rem/140% "Pretendard";
    --w-typography-b2-400: 400 0.875rem/140% "Pretendard";
    --w-typography-b2-dense-700: 700 0.875rem/120% "Pretendard";
    --w-typography-b2-dense-600: 600 0.875rem/120% "Pretendard";
    --w-typography-b2-dense-500: 500 0.875rem/120% "Pretendard";
    --w-typography-b2-dense-400: 400 0.875rem/120% "Pretendard";
    --w-typography-d1-700: 700 0.8125rem/140% "Pretendard";
    --w-typography-d1-600: 600 0.8125rem/140% "Pretendard";
    --w-typography-d1-500: 500 0.8125rem/140% "Pretendard";
    --w-typography-d1-400: 400 0.8125rem/140% "Pretendard";
    --w-typography-d1-dense-700: 700 0.8125rem/120% "Pretendard";
    --w-typography-d1-dense-600: 600 0.8125rem/120% "Pretendard";
    --w-typography-d1-dense-500: 500 0.8125rem/120% "Pretendard";
    --w-typography-d1-dense-400: 400 0.8125rem/120% "Pretendard";
    --w-typography-d2-700: 700 0.75rem/140% "Pretendard";
    --w-typography-d2-600: 600 0.75rem/140% "Pretendard";
    --w-typography-d2-500: 500 0.75rem/140% "Pretendard";
    --w-typography-d2-400: 400 0.75rem/140% "Pretendard";
    --w-typography-d2-dense-700: 700 0.75rem/120% "Pretendard";
    --w-typography-d2-dense-600: 600 0.75rem/120% "Pretendard";
    --w-typography-d2-dense-500: 500 0.75rem/120% "Pretendard";
    --w-typography-d2-dense-400: 400 0.75rem/120% "Pretendard";
    --w-typography-d3-700: 700 0.6875rem/140% "Pretendard";
    --w-typography-d3-600: 600 0.6875rem/140% "Pretendard";
    --w-typography-d3-500: 500 0.6875rem/140% "Pretendard";
    --w-typography-d3-400: 400 0.6875rem/140% "Pretendard";
    /* fallback 스타일은 이후 확인하고 업데이트 */


    /* *************** spacing ***************
     * (spacing은 피그마 변수 네이밍 규칙을 따라가지 않는다.)
     * spacing 네이밍 규칙 : --space + 'px값' */
    --space2: 2px;
    --space4: 4px;
    --space5: 5px;
    --space6: 6px;
    --space8: 8px;
    --space10: 10px;
    --space12: 12px;
    --space14: 14px;
    --space16: 16px;
    --space20: 20px;
    --space24: 24px;
    --space32: 32px;
    --space36: 36px;
    --space38: 38px;
    --space40: 40px;
    --space48: 48px;
    --space50: 50px;
    --space52: 52px;
    --space56: 56px;
    --space64: 64px;
    --space72: 72px;
    --space80: 80px;
    --space96: 96px;
    --space112: 112px;
    --space128: 128px;


    /* *************** radius ***************
     * (radius는 피그마 변수 네이밍 규칙을 따라가지 않는다.)
     * radius 네이밍 규칙 : --radius + 'px값' */
    --radius4: 4px;
    --radius6: 6px;
    --radius8: 8px;
    --radius10: 10px;
    --radius12: 12px;
    --radius16: 16px;
    --radius20: 20px;
    --radius24: 24px;
    /* --w-borderRadius-half 는 frame.height * 0.5 */

    /* *************** border *************** */
    --w-borderWidth-00: 1px;
    --w-borderWidth-01: 0.0625rem;
    --w-borderWidth-02: 0.125rem;
    /* --w-borderWidth-00
        : 기본 라인 대비 약한 톤으로 공간 구분, 네비게이션 바 혹은 대부분의 리스트 형식의 데이터 구분 시 사용
        Navigation / Tab (탭 - 고정형 - 비선택)/ Accordian (아코디언)

     * --w-borderWidth-01
        : 기본적으로 사용
        Input Field - Container (인풋 필드 - 컨테이너형)
        Chip - Filter (칩 - 필터형), Divider (디바이더), Label (라벨 - 상태)
        Button - Amount (금액 버튼), Pagination - Button (페이지 목록 - 버튼)
        Button_Outlined (버튼 - 아웃라인형), Button_Link (버튼 - 링크형)

     * --w-borderWidth-02
        : 강한 시각적 집중이 필요한 경우에 사용
        Navigation / Tab (탭 - 고정형 - 선택), Input Field (인풋 필드 - 라인형),
        Input Field - Container - Focus (인풋 필드 - 컨테이너형 - 포커스 상태),
        Search field (서치 필드 - 하단 인디케이터형),
        Carousel-indicator (캐로셀 인디케이터 - 슬라이드바형) */

    --tableBorderFixed: var(--modeGray-100);

    /* *************** motion *************** */
    --w-easing-linear: cubic-bezier(0, 0, 1, 1);
    --w-easing-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --w-easing-easeIn: cubic-bezier(0.42, 0, 1, 1);
    --w-easing-easeOut: cubic-bezier(0, 0, 0.58, 1);
    --w-easing-easeInOut: cubic-bezier(0.42, 0, 0.58, 1);

    --w-duration-0: 0s;
    --w-duration-50: 50s;
    --w-duration-100: 100s;
    --w-duration-150: 150s;
    --w-duration-200: 200s;
    --w-duration-250: 250s;
    --w-duration-300: 300s;
    --w-duration-350: 350s;
    --w-duration-400: 400s;
    --w-duration-450: 450s;
    --w-duration-500: 500s;
    --w-duration-1000: 1000s;
    --w-duration-2000: 2000s;
    --w-duration-3000: 3000s;
    --w-duration-5000: 5000s;
}
body{
    --modeGray-50: var(--gray-50);
    --modeGray-100: var(--gray-100);
    --modeGray-200: var(--gray-200);
    --modeGray-300: var(--gray-300);
    --modeGray-400: var(--gray-400);
    --modeGray-500: var(--gray-500);
    --modeGray-600: var(--gray-600);
    --modeGray-700: var(--gray-700);
    --modeGray-800: var(--gray-800);
    --modeGray-900: var(--gray-900);
    --modeGrayNonOpaque-50: var(--grayNonOpaque-50);
    --modeGrayNonOpaque-100: var(--grayNonOpaque-100);
    --modeGrayNonOpaque-200: var(--grayNonOpaque-200);
    --modeGrayNonOpaque-300: var(--grayNonOpaque-300);
    --modeGrayNonOpaque-400: var(--grayNonOpaque-400);
    --modeGrayNonOpaque-500: var(--grayNonOpaque-500);
    --modeGrayNonOpaque-600: var(--grayNonOpaque-600);
    --modeGrayNonOpaque-700: var(--grayNonOpaque-700);
    --modeGrayNonOpaque-800: var(--grayNonOpaque-800);
    --modeGrayNonOpaque-900: var(--grayNonOpaque-900);
    --modeBW-0: var(--black-0);
    --modeBW-4: var(--black-4);
    --modeBW-8: var(--black-8);
    --modeBW-12: var(--black-12);
    --modeBW-16: var(--black-16);
    --modeBW-20: var(--black-20);
    --modeBW-24: var(--black-24);
    --modeBW-32: var(--black-32);
    --modeBW-40: var(--black-40);
    --modeBW-56: var(--black-56);
    --modeBW-60: var(--black-60);
    --modeBW-72: var(--black-72);
    --modeBW-80: var(--black-80);
    --modeBW-88: var(--black-88);
    --modeBW-96: var(--black-96);
    --modeBW-100: var(--black-100);
    --modeInverseBW-0: var(--white-0);
    --modeInverseBW-4: var(--white-4);
    --modeInverseBW-8: var(--white-8);
    --modeInverseBW-12: var(--white-12);
    --modeInverseBW-16: var(--white-16);
    --modeInverseBW-20: var(--white-20);
    --modeInverseBW-24: var(--white-24);
    --modeInverseBW-32: var(--white-32);
    --modeInverseBW-40: var(--white-40);
    --modeInverseBW-56: var(--white-56);
    --modeInverseBW-60: var(--white-60);
    --modeInverseBW-72: var(--white-72);
    --modeInverseBW-80: var(--white-80);
    --modeInverseBW-88: var(--white-88);
    --modeInverseBW-96: var(--white-96);
    --modeInverseBW-100: var(--white-100);
    --loweredBackground1: var(--gray-50);
    --loweredBackground2: var(--gray-100);
    --transparentBackground: var(--white-0);
    --surface0: var(--white-0);
    --surface50: var(--modeGrayNonOpaque-50);
    --surface100: var(--modeGrayNonOpaque-100);
    --surface300: var(--modeGrayNonOpaque-300);
    --surfaceFixed200: var(--grayNonOpaque-200);
    --surfaceFixed400: var(--grayNonOpaque-400);
    --surfaceFixed600: var(--grayNonOpaque-600);
    --surfaceSolidGray50: var(--modeGray-50);
    --surfaceGray700: var(--gray-700);
    --surfaceGray900: var(--gray-900);
    --surfaceFixedWhite: var(--white-100);
    --surfaceSolidGray100: var(--modeGray-100);
    --surfaceSolidGray100-2: var(--modeGray-100);/*확인필요*/
    /* system ui */
    --sysBg: var(--modeBW-100);
    --sysInverseBg: var(--modeInverseBW-100);
    --modeOnAccent-disabled: var(--white-40);

    /* text(accent basic) : 텍스트 강조 베이직(2024-11-18 이후 추가) */
    --textAccent-blue: #116BDA;/*#0871f3*/
    --textAccent-green: #047b5b;
    --textAccent-red: #CC1E24;
    --textAccent-orange: #B65200;
    --textAccent-deepBlue: #2658ED;
    --textAccent-yellow: #A95A00;/*#febb10;*/
    --textAccent-pink: #CD1D67;
    --textAccent-purple: #A13ED0;
    --textAccent-nonOpaqueBlue: rgba(8, 113, 243, 0.30);
    --textAccent-nonOpaqueGreen: rgba(4, 123, 91, 0.30);
    --textAccent-nonOpaqueRed: rgba(204, 30, 36, 0.30);
    --textAccent-nonOpaqueOrange: rgba(182, 82, 0, 0.30);
    --textAccent-nonOpaqueDeepBlue: rgba(38, 88, 237, 0.30);
    --textAccent-nonOpaqueYellow: rgba(169, 90, 0, 0.30);
    --textAccent-nonOpaquePink: rgba(205, 29, 103, 0.30);
    --textAccent-nonOpaquePurple: rgba(161, 62, 208, 0.30);

    /* background : 배경색상 */
    --w-color-background-elavated-02: var(--elevatedBackground2);
    --w-color-background-elavated-01: var(--eleavtedBackground1);
    --w-color-background-default: var(--background);
    --w-color-background-lowered-01: var(--loweredBackground1);
    --w-color-background-lowered-02: var(--loweredBackground2);
    --w-color-background-transparent: var(--transparentBackground);
    --w-color-background-loginPattern: var(--inverseGray-100);

    /* surface(default) : 표면 */
    /* - modeGrayNonOpaque-n00 변수를 가지고 있는 요소는 pressed/enabled일 때 기본 색상 위에 덮는 색상으로 사용한다.*/
    --w-color-surface-default-00-enabled: var(--surface0);
    --w-color-surface-default-00-disabled: var(--surface0);
    --w-color-surface-default-01-enabled: var(--surface);
    --w-color-surface-default-02-enabled: var(--surface50);
    --w-color-surface-default-03-enabled: var(--surface100);
    --w-color-surface-default-04-enabled: var(--surface300);
    --w-color-surface-default-pressed: var(--modeGrayNonOpaque-200);/*pressed 공통*/
    --w-color-surface-default-disabled: var(--modeGrayNonOpaque-200);/*disabled 공통*/
    --w-color-surface-solidGray-50: var(--surfaceSolidGray50);
    /* surface(exception) : 표면 예외 */
    --w-color-surface-onselectionBg-enabled: var(--surfaceFixed400);
    --w-color-surface-toastBtn-enabled: var(--surfaceFixed200);
    --w-color-surface-toastBg-enabled: var(--surfaceGray700);
    --w-color-surface-selectionBg-enabled: var(--surfaceFixedWhite);
    --w-color-surface-elavated1-enabled: var(--surfaceElevated1);
    --w-color-surface-elavated2-enabled: var(--surfaceElevated2);
    --w-color-surface-exception-pressed: var(--modeGrayNonOpaque-200);/*pressed 공통*/
    --w-color-surface-exception-disabled: var(--modeGrayNonOpaque-200);/*disabled 공통*/
    --w-color-surface-scrim-01: var(--black-56);
    --w-color-surface-nudge-enabled: var(--blue-400);
    --w-color-surface-nudge-pressed: var(--modeBW-32);
    --w-color-surface-solidGray-100: var(--surfaceSolidGray100);
    /* surface(accent) : 표면 강조 */
    --w-color-surface-primary-enabled: var(--blue-500);
    --w-color-surface-critical-enabled: var(--red-500);
    --w-color-surface-success-enabled: var(--green-500);
    --w-color-surface-caution-enabled: var(--orange-500);
    --w-color-surface-accentDeepBlue-enabled: var(--deepBlue-500);
    --w-color-surface-accentYellow-enabled: var(--yellow-500);
    --w-color-surface-accentPink-enabled: var(--pink-500);
    --w-color-surface-accentPurple-enabled: var(--purple-500);
    --w-color-surface-accent-pressed: var(--modeBW-32);/*pressed 공통*/
    --w-color-surface-accent-disabled: var(--modeInverseBW-72);/*disabled 공통*/
    /* surface(planner) : 표면 플래너ver */
    --w-color-surface-Planner-01-enabled: var(--purple-50);
    --w-color-surface-Planner-02-enabled: var(--deepBlue-50);
    --w-color-surface-Planner-03-enabled: var(--yellow-50);
    --w-color-surface-Planner-04-enabled: var(--blue-50);
    --w-color-surface-Planner-05-enabled: var(--orange-50);
    --w-color-surface-Planner-06-enabled: var(--green-50);
    --w-color-surface-Planner-07-enabled: var(--red-50);
    --w-color-surface-Planner-pressed: var(--modeBW-12);/*pressed 공통*/
    /* surface(accent subdued) */
    --w-color-surface-primary-subdued-enabled: var(--blue-50);
    --w-color-surface-critical-subdued-enabled: var(--red-50);
    --w-color-surface-success-subdued-enabled: var(--green-50);
    --w-color-surface-caution-subdued-enabled: var(--orange-50);
    --w-color-surface-accentDeepBlue-subdued-enabled: var(--deepBlue-50);
    --w-color-surface-accentYellow-subdued-enabled: var(--yellow-50);
    --w-color-surface-accentPink-subdued-enabled: var(--pink-50);
    --w-color-surface-accentPurple-subdued-enabled: var(--purple-50);
    --w-color-surface-accentPink2-subdued-enabled: var(--pink-100);
    --w-color-surface-accentPink2-subdued-disabled: var(--modeInverseBW-60);
    --w-color-surface-accentGreen2-subdued-enabled: var(--green-100);
    --w-color-surface-accentGreen2-subdued-disabled: var(--modeInverseBW-60);
    --w-color-surface-subdued-pressed: var(--modeBW-12);/*pressed 공통*/
    --w-color-surface-subdued-disabled: var(--modeInverseBW-8);/*disabled 공통*/
    /* surface(modeGray) */
    --w-color-surface-modeGray-900-enabled: var(--modeGray-900);

    /* border(default) : 보더라인 */
    --w-color-border-default-01: var(--modeGrayNonOpaque-700);
    --w-color-border-default-02: var(--modeGrayNonOpaque-600);
    --w-color-border-default-03: var(--modeGrayNonOpaque-400);
    --w-color-border-default-04: var(--modeGrayNonOpaque-300);
    --w-color-border-default-05: var(--modeGrayNonOpaque-200);
    --w-color-border-default-06: var(--modeGrayNonOpaque-100);
    --w-color-border-default-07: var(--modeGrayNonOpaque-50);
    /* border(solid gray) : 24-10-17 추가 */
    --w-color-border-solidGray-01: var(--modeGray-700);
    --w-color-border-solidGray-02: var(--modeGray-600);
    --w-color-border-solidGray-03: var(--modeGray-400);
    /* --w-color-border-solidGray-04: var(--modeGray-300); *//* 이름 변경됨 => (--w-color-border-solidGray-300) */
    --w-color-border-solidGray-05: var(--modeGray-200);
    --w-color-border-solidGray-06: var(--modeGray-100);
    --w-color-border-solidGray-07: var(--modeGray-50);
    /* border(solid color) */
    --w-color-border-solidGray-100: var(--modeGray-100);
    --w-color-border-solidGray-300: var(--modeGray-300);
    --w-color-border-solidGray-04: var(--modeGray-300);
    /* border(table) */
    --w-color-border-table: var(--tableBorderFixed);
    /* border(accent) : 보더 강조 */
    --w-color-border-primary-enabled: var(--blue-500);
    --w-color-border-primary-disabled: var(--accentNonOpaque-blue);
    --w-color-border-primary-subdued: var(--blue-50);
    --w-color-border-critical-enabled: var(--red-500);
    --w-color-border-critical-disabled: var(--accentNonOpaque-red);
    --w-color-border-critical-subdued: var(--red-50);
    --w-color-border-success-enabled: var(--green-500);
    --w-color-border-success-disabled: var(--accentNonOpaque-green);
    --w-color-border-caution-enabled: var(--orange-500);
    --w-color-border-caution-disabled: var(--accentNonOpaque-orange);
    --w-color-border-accentyellow-enabled: var(--yellow-500);
    --w-color-border-accentyellow-disabled: var(--accentNonOpaque-yellow);
    --w-color-border-accentPink-enabled: var(--pink-500);
    --w-color-border-accentPink-disabled: var(--accentNonOpaque-pink);
    --w-color-border-accentPurple-enabled: var(--purple-500);
    --w-color-border-accentPurple-disabled: var(--accentNonOpaque-purple);
    --w-color-border-accentDeepBlue-enabled: var(--deepBlue-500);
    --w-color-border-accentDeepBlue-disabled: var(--accentNonOpaque-deepBlue);
    --w-color-border-primary-nonOpaque: var(--accentNonOpaque-blueStrong);

    /* border(focus) */
    --w-color-border-focus: var(--modeGray-700);
    --w-color-border-primary-nonOpaque2: var(--accentNonOpaque-blueStrong2);
    /* border(on accent) : 보더 강조될 때 */
    --w-color-border-onAccent-01: var(--white-100);
    --w-color-border-onAccent-02: var(--white-40);
    /* border(login) : 로그인 보더 */
    --w-color-border-loginFixedBlue: var(--loginFixedBlue);
    --w-color-border-loginFixedRed: var(--loginFixedRed);

    /* text(default) : 텍스트 디폴트 */
    --w-color-text-default-00: var(--modeGrayNonOpaque-900);
    --w-color-text-default-01: var(--modeGrayNonOpaque-800);
    --w-color-text-default-02: var(--modeGrayNonOpaque-700);
    --w-color-text-default-03: var(--modeGrayNonOpaque-600);
    --w-color-text-default-04: var(--modeGrayNonOpaque-500);
    --w-color-text-default-05: var(--modeGrayNonOpaque-400);
    --w-color-text-default-disabled: var(--modeGrayNonOpaque-400);
    /* text(accent) : 텍스트 강조 */
    --w-color-text-primary-enabled: var(--textAccent-blue);
    --w-color-text-primary-disabled: var(--textAccent-nonOpaqueBlue);
    --w-color-text-critical-enabled: var(--textAccent-red);
    --w-color-text-critical-disabled: var(--textAccent-nonOpaqueRed);
    --w-color-text-success-enabled: var(--textAccent-green);
    --w-color-text-success-disabled: var(--textAccent-nonOpaqueGreen);
    --w-color-text-caution-enabled: var(--textAccent-orange);
    --w-color-text-caution-disabled: var(--textAccent-nonOpaqueOrange);
    --w-color-text-accentDeepblue-enabled: var(--textAccent-deepBlue);
    --w-color-text-accentDeepblue-disabled: var(--textAccent-nonOpaqueDeepBlue);
    --w-color-text-accentYellow-enabled: var(--textAccent-yellow);
    --w-color-text-accentYellow-disabled: var(--textAccent-nonOpaqueYellow);
    --w-color-text-accentPink-enabled: var(--textAccent-pink);
    --w-color-text-accentPink-disabled: var(--textAccent-nonOpaquePink);
    --w-color-text-accentPurple-enabled: var(--textAccent-purple);
    --w-color-text-accentPurple-disabled: var(--textAccent-nonOpaquePurple);

    --w-color-text-accentDeepYellow-enabled: var(--yellow-700);/*2024-10-30 추가*/
    --w-color-text-accentDeepYellow-disabled: var(--accentNonOpaque-yellow);/*2024-10-30 추가*/
    /* text(on accent) : 텍스트 강조될 때 */
    --w-color-text-onAccent-01: var(--white-100);
    --w-color-text-onAccent-02: var(--white-40);
    --w-color-text-onAccent-disabled: var(--modeOnAccent-disabled);
    /* text(modeInverse) */
    --w-color-text-modeInverseBW-100: var(--modeInverseBW-100);

    /* icon(default) : 아이콘 디폴트 */
    --w-color-icon-default-00: var(--modeGrayNonOpaque-900);
    --w-color-icon-default-01: var(--modeGrayNonOpaque-800);
    --w-color-icon-default-02: var(--modeGrayNonOpaque-700);
    --w-color-icon-default-03: var(--modeGrayNonOpaque-600);
    --w-color-icon-default-04: var(--modeGrayNonOpaque-500);
    --w-color-icon-default-05: var(--modeGrayNonOpaque-400);
    --w-color-icon-default-06: var(--modeGrayNonOpaque-300);
    --w-color-icon-default-07: var(--modeGrayNonOpaque-200);
    --w-color-icon-default-08: var(--modeGrayNonOpaque-100);
    --w-color-icon-default-disabled: var(--modeGrayNonOpaque-400);
    /* icon(accent) : 아이콘 강조
        - (참고사항) nonOpaque30-*** 값 아직 수급 안 됨 */
    --w-color-icon-primary-enabled: var(--blue-500);
    --w-color-icon-primary-disabled: var(--nonOpaque30-blue);
    --w-color-icon-critical-enabled: var(--red-500);
    --w-color-icon-critical-disabled: var(--nonOpaque30-red);
    --w-color-icon-success-enabled: var(--green-500);
    --w-color-icon-success-disabled: var(--nonOpaque30-green);
    --w-color-icon-caution-enabled: var(--orange-500);
    --w-color-icon-caution-disabled: var(--nonOpaque30-orange);
    --w-color-icon-accentDeepblue-enabled: var(--deepBlue-500);
    --w-color-icon-accentDeepblue-disabled: var(--nonOpaque30-deepBlue);
    --w-color-icon-accentYellow-enabled: var(--yellow-500);
    --w-color-icon-accentYellow-disabled: var(--nonOpaque30-yellow);
    --w-color-icon-accentPink-enabled: var(--pink-500);
    --w-color-icon-accentPink-disabled: var(--nonOpaque30-pink);
    --w-color-icon-accentPurple-enabled: var(--purple-500);
    --w-color-icon-accentPurple-disabled: var(--nonOpaque30-purple);
    /* icon(on accent) : 아이콘 강조될 때 */
    --w-color-icon-onAccent-01: var(--white-100);
    --w-color-icon-onAccent-02: var(--white-72);
    --w-color-icon-onAccent-03: var(--white-40);
    --w-color-icon-onAccent-disabled: var(--modeOnAccent-disabled);

    /* text(badge) : 뱃지 텍스트 */
    --w-color-text-categoryBadges-blue: var(--blue-700);
    --w-color-text-categoryBadges-green: var(--green-800);
    --w-color-text-categoryBadges-deepBlue: var(--deepBlue-800);
    --w-color-text-categoryBadges-orange: var(--orange-800);
    --w-color-text-categoryBadges-red: var(--red-700);
    --w-color-text-categoryBadges-pink: var(--pink-700);
    --w-color-text-categoryBadges-cyan: var(--cyan-800);
    --w-color-text-categoryBadges-purple: var(--purple-700);
    --w-color-text-categoryBadges-deepPink: var(--pink-900);
    --w-color-text-categoryBadges-deepGreen: var(--green-900);
    --w-color-text-categoryBadges-darkDeepBlue: var(--deepBlue-900);
    --w-color-text-categoryBadges-deepYellow: var(--yellow-900);
    --w-color-text-categoryBadges-violet: var(--violet-800);
    --w-color-text-categoryBadges-deepRed: var(--red-800);
    --w-color-text-categoryBadges-darkBlue: var(--blue-900);
    /* border(badge) : 뱃지 보더 */
    --w-color-border-categoryBadges-blue: var(--blue-700);
    --w-color-border-categoryBadges-green: var(--green-800);
    --w-color-border-categoryBadges-deepBlue: var(--deepBlue-800);
    --w-color-border-categoryBadges-orange: var(--orange-800);
    --w-color-border-categoryBadges-red: var(--red-700);
    --w-color-border-categoryBadges-pink: var(--pink-700);
    --w-color-border-categoryBadges-cyan: var(--cyan-800);
    --w-color-border-categoryBadges-purple: var(--purple-700);
    --w-color-border-categoryBadges-deepPink: var(--pink-900);
    --w-color-border-categoryBadges-deepGreen: var(--green-900);
    --w-color-border-categoryBadges-darkDeepBlue: var(--deepBlue-900);
    --w-color-border-categoryBadges-deepYellow: var(--yellow-900);
    --w-color-border-categoryBadges-violet: var(--violet-800);
    --w-color-border-categoryBadges-deepRed: var(--red-800);
    --w-color-border-categoryBadges-darkBlue: var(--blue-900);

    /* banner(default) : 배너 디폴트 */
    --w-color-banner-default-01-enabled: var(--surface);
    --w-color-banner-default-01-pressed: var(--modeGrayNonOpaque-100);/*pressed 적용*/

    /* banner(low contranst) : 배너 대비낮음 */
    --w-color-banner-low01-enabled: var(--banner-low-01);
    --w-color-banner-low02-enabled: var(--banner-low-02);
    --w-color-banner-low03-enabled: var(--banner-low-03);
    --w-color-banner-low04-enabled: var(--banner-low-04);
    --w-color-banner-low05-enabled: var(--banner-low-05);
    --w-color-banner-low06-enabled: var(--banner-low-06);
    --w-color-banner-low07-enabled: var(--banner-low-07);
    --w-color-banner-low08-enabled: var(--banner-low-08);
    --w-color-banner-low09-enabled: var(--banner-low-09);
    --w-color-banner-low10-enabled: var(--banner-low-10);
    --w-color-banner-low11-enabled: var(--banner-low-11);
    --w-color-banner-low12-enabled: var(--banner-low-12);
    --w-color-banner-low13-enabled: var(--banner-low-13);
    --w-color-banner-low14-enabled: var(--banner-low-14);
    --w-color-banner-low15-enabled: var(--banner-low-15);
    --w-color-banner-low-pressed: var(--modeBW-12);
    /* banner(mediusm contranst) : 배너 대비중간 */
    --w-color-banner-md01-enabled: var(--banner-md-01);
    --w-color-banner-md02-enabled: var(--banner-md-02);
    --w-color-banner-md03-enabled: var(--banner-md-03);
    --w-color-banner-md04-enabled: var(--banner-md-04);
    --w-color-banner-md05-enabled: var(--banner-md-05);
    --w-color-banner-md06-enabled: var(--banner-md-06);
    --w-color-banner-md07-enabled: var(--banner-md-07);
    --w-color-banner-md08-enabled: var(--banner-md-08);
    --w-color-banner-md09-enabled: var(--banner-md-09);
    --w-color-banner-md10-enabled: var(--banner-md-10);
    --w-color-banner-md11-enabled: var(--banner-md-11);
    --w-color-banner-md12-enabled: var(--banner-md-12);
    --w-color-banner-md13-enabled: var(--banner-md-13);
    --w-color-banner-md14-enabled: var(--banner-md-14);
    --w-color-banner-md15-enabled: var(--banner-md-15);
    --w-color-banner-md-pressed: var(--modeBW-12);

    --btn-space: calc(var(--space56) + 18px);
    /* gradient */
    --w-color-utility-gradient-gradientToTop-default: linear-gradient(0deg, hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 0));
    --w-color-utility-gradient-gradientToBottom-default: linear-gradient(180deg, hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 0));
    --w-color-utility-gradient-gradientToRight-default: linear-gradient(90deg, hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 0));
    --w-color-utility-gradient-gradientToLeft-default: linear-gradient(270deg, hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 0));

    /* *************** shadow *************** */
    /* shadow 기본선언(light) */
    --shadow-4: rgba(0, 45, 125, 0.04);
    --shadow-6: rgba(0, 45, 125, 0.06);
    --shadow-10: rgba(0, 45, 125, 0.10);
    --shadow-12: rgba(0, 45, 125, 0.12);
    --shadow-16: rgba(0, 45, 125, 0.16);
    --shadow-18: rgba(33, 37, 40, 0.18);
    --shadow-24: rgba(33, 37, 40, 0.24);
    --shadow-blue: rgba(57, 150, 159, 0.40);

    --w-color-shadow-4: var(--shadow-4);
    --w-color-shadow-6: var(--shadow-6);
    --w-color-shadow-10: var(--shadow-10);
    --w-color-shadow-12: var(--shadow-12);
    --w-color-shadow-16: var(--shadow-16);
    --w-color-shadow-18: var(--shadow-18);
    --w-color-shadow-24: var(--shadow-24);
    --w-color-shadow-blue: var(--shadow-blue);
    --w-color-shadow-blue-inner: var(var(--blue-600));

    --w-shadow-subtle:0 16px 32px 0 var(--w-color-shadow-6), 0 0 0.5px 0 var(--w-color-shadow-12);
    --w-shadow-pressed:  0 0.5px 1px 0 rgba(20, 55, 97, 0.16) inset;
    --w-shadow-01: 0px 0.5px 0px 0px var(--w-color-shadow-6), 0px 2px  8px -1px var(--w-color-shadow-12);
    --w-shadow-02: 0px 2px 8px 0px var(--w-color-shadow-12), 0px 0px 0.5px 0px var(--w-color-shadow-16);
    --w-shadow-03: 0px 3px 12px 0px var(--w-color-shadow-16), 0px 0px 0.5px 0px var(--w-color-shadow-16);
    --w-shadow-04: 0px 4px 16px 0px var(--w-color-shadow-18), 0px 0px 0.5px 0px var(--w-color-shadow-24);
    --w-shadow-05: 0px 8px 40px 0px var(--w-color-shadow-24), 0px 0px 0.5px 0px var(--w-color-shadow-24);
    --w-shadow-06: 0px 16px 24px 0px var(--w-color-shadow-12), 0px 0px 0.5px 0px var(--w-color-shadow-16);
    --w-shadow-07: 0px 26px 36px 0px var(--w-color-shadow-16), 0px 0px 0.5px 0px var(--w-color-shadow-16);
    --w-shadow-08: 0px 6px 24px 0px var(--w-color-shadow-10), 0px 0px 2px 0px var(--w-color-shadow-4);
    --w-shadow-nudge: 0 4px 10px 0 rgba(57, 150, 249, 0.4);
    --w-shadow-nudge-inner: 0 4px 12px 0 rgba(34, 125, 232, 1) inset;

    /* system ui */
    --systemUI-Bg: var(--sysBg);
    --systemUI-inverseBg: var(--sysInverseBg);

    /* chart color */
    --ChartBg: #e0e9f2;
    /* --ChartLine: #94a5b5;*/
    --Chart01: #2589f4;
    --Chart08: #85E2A4;

    /* 화면너비 */
    --vw: calc(100vw / 100);

    /* 2024-10-30 이후 신규 추가 */
    --dividerBackground: var(--gray-50);
    --w-color-border-button-01: rgba(119, 134, 151, 0.24);
}
body.is-dark{
    --modeGray-50: var(--inverseGray-50);
    --modeGray-100: var(--inverseGray-100);
    --modeGray-200: var(--inverseGray-200);
    --modeGray-300: var(--inverseGray-300);
    --modeGray-400: var(--inverseGray-400);
    --modeGray-500: var(--inverseGray-500);
    --modeGray-600: var(--inverseGray-600);
    --modeGray-700: var(--inverseGray-700);
    --modeGray-800: var(--inverseGray-800);
    --modeGray-900: var(--inverseGray-900);
    --modeGrayNonOpaque-50: var(--inverseGrayNonOpaque-50);
    --modeGrayNonOpaque-100: var(--inverseGrayNonOpaque-100);
    --modeGrayNonOpaque-200: var(--inverseGrayNonOpaque-200);
    --modeGrayNonOpaque-300: var(--inverseGrayNonOpaque-300);
    --modeGrayNonOpaque-400: var(--inverseGrayNonOpaque-400);
    --modeGrayNonOpaque-500: var(--inverseGrayNonOpaque-500);
    --modeGrayNonOpaque-600: var(--inverseGrayNonOpaque-600);
    --modeGrayNonOpaque-700: var(--inverseGrayNonOpaque-700);
    --modeGrayNonOpaque-800: var(--inverseGrayNonOpaque-800);
    --modeGrayNonOpaque-900: var(--inverseGrayNonOpaque-900);
    --modeBW-0: var(--white-0);
    --modeBW-4: var(--white-4);
    --modeBW-8: var(--white-8);
    --modeBW-12: var(--white-12);
    --modeBW-16: var(--white-16);
    --modeBW-20: var(--white-20);
    --modeBW-24: var(--white-24);
    --modeBW-32: var(--white-32);
    --modeBW-40: var(--white-40);
    --modeBW-56: var(--white-56);
    --modeBW-60: var(--white-60);
    --modeBW-72: var(--white-72);
    --modeBW-80: var(--white-80);
    --modeBW-88: var(--white-88);
    --modeBW-96: var(--white-96);
    --modeBW-100: var(--white-100);
    --modeInverseBW-0: var(--black-0);
    --modeInverseBW-4: var(--black-4);
    --modeInverseBW-8: var(--black-8);
    --modeInverseBW-12: var(--black-12);
    --modeInverseBW-16: var(--black-16);
    --modeInverseBW-20: var(--black-20);
    --modeInverseBW-24: var(--black-24);
    --modeInverseBW-32: var(--black-32);
    --modeInverseBW-40: var(--black-40);
    --modeInverseBW-56: var(--black-56);
    --modeInverseBW-60: var(--black-60);
    --modeInverseBW-72: var(--black-72);
    --modeInverseBW-80: var(--black-80);
    --modeInverseBW-88: var(--black-88);
    --modeInverseBW-96: var(--black-96);
    --modeInverseBW-100: var(--black-100);
    --blue-50: #162d50;
    --blue-100: #1a3761;
    --blue-200: #1d4b86;
    --blue-300: #195cae;
    --blue-400: #1471db;
    --blue-500: #248bf9;
    --blue-600: #3996f3;
    --blue-700: #66b0f9;
    --blue-800: #92cafc;
    --blue-900: #b4dffe;
    --cyan-50: #173d44;
    --cyan-100: #1e5661;
    --cyan-200: #1f697a;
    --cyan-300: #268397;
    --cyan-400: #1b96b1;
    --cyan-500: #1aa8c7;
    --cyan-600: #34b8d5;
    --cyan-700: #68cbdf;
    --cyan-800: #91e3f3;
    --cyan-900: #bef3fd;
    --green-50: #0e4437;
    --green-100: #0d5e4a;
    --green-200: #0e7b60;
    --green-300: #0d8c6a;
    --green-400: #0b9d76;
    --green-500: #00b280;
    --green-600: #04be89;
    --green-700: #03d398;
    --green-800: #6bebc2;
    --green-900: #aef9e0;
    --yellow-50: #4d310f;
    --yellow-100: #6e4208;
    --yellow-200: #b16e10;
    --yellow-300: #de9217;
    --yellow-400: #f1a71e;
    --yellow-500: #ffbd14;
    --yellow-600: #ffc342;
    --yellow-700: #ffcf70;
    --yellow-800: #ffe2ad;
    --yellow-900: #ffefd1;
    --orange-50: #55290c;
    --orange-100: #7b3c0e;
    --orange-200: #b3560f;
    --orange-300: #d5660b;
    --orange-400: #ec7309;
    --orange-500: #ff891a;
    --orange-600: #ff9b29;
    --orange-700: #feb55d;
    --orange-800: #ffd8a8;
    --orange-900: #b85300;
    --red-50: #3c2020;
    --red-100: #502525;
    --red-200: #7d2b2c;
    --red-300: #a32e30;
    --red-400: #cc2e33;
    --red-500: #f0474d;
    --red-600: #f2545c;
    --red-700: #f97b81;
    --red-800: #ffa9ae;
    --red-900: #ffc2c7;
    --pink-50: #47152e;
    --pink-100: #651b3d;
    --pink-200: #8e1f51;
    --pink-300: #b52164;
    --pink-400: #d32272;
    --pink-500: #f14690;
    --pink-600: #f85d96;
    --pink-700: #f98baf;
    --pink-800: #feb3cc;
    --pink-900: #ffccdb;
    --purple-50: #3a194d;
    --purple-100: #4c1e66;
    --purple-200: #682791;
    --purple-300: #8627b9;
    --purple-400: #a635de;
    --purple-500: #b54ae8;
    --purple-600: #c25ceb;
    --purple-700: #d581f3;
    --purple-800: #e5a9f9;
    --purple-900: #f0c4fd;
    --deepBlue-50: #141E4D;
    --deepBlue-100: #1B296F;
    --deepBlue-200: #1E3399;
    --deepBlue-300: #203EC5;
    --deepBlue-400: #154CEF;
    --deepBlue-500: #2A62FE;
    --deepBlue-600: #4A7AFC;
    --deepBlue-700: #6c94f9;
    --deepBlue-800: #95B1F9;
    --deepBlue-900: #BFD0FD;
    --violet-50: #250173;
    --violet-100: #26197d;
    --violet-200: #3120a1;
    --violet-300: #4135b5;
    --violet-400: #4942cf;
    --violet-500: #6151f5;
    --violet-600: #7262de;
    --violet-700: #9785f2;
    --violet-800: #a595ee;
    --violet-900: #c3b8f4;
    --nonOpaque30-blue: rgba(57, 150, 243, 0.3);
    --nonOpaque30-green: rgba(0, 178, 128, 0.3);
    --nonOpaque30-red: rgba(242, 84, 92, 0.3);
    --nonOpaque30-orange: rgba(255, 137, 26, 0.3);
    --nonOpaque30-deepBlue: rgba(74, 122, 252, 0.3);
    --nonOpaque30-yellow: rgba(255, 189, 20, 0.3);
    --nonOpaque30-pink: rgba(241, 70, 144, 0.3);
    --nonOpaque30-purple: rgba(181, 74, 232, 0.3);
    /* element base */
    --elevatedBackground2: var(--inverseGray-100);
    --elevatedBackground1: var(--inverseGray-50);
    --background: #16181a;
    --loweredBackground1: #111416;
    --loweredBackground2: #060708;
    --transparentBackground: var(--black-0);
    --surface0: var(--black-0);
    --surface: #16181a;
    --surfaceElevated2: var(--inverseGray-100);
    --surfaceElevated1: #24282c;/*var(--inverseGray-50)*/;
    --surfaceSolidGray100: var(--modeGray-100);
    --surfaceSolidGray100-2: var(--modeGray-200);
    /* border, text, icon */
    --accentNonOpaque-blue: rgba(17, 107, 218, 0.3);
    --accentNonOpaque-green: rgba(0, 178, 128, 0.3);
    --accentNonOpaque-red: rgba(242, 84, 92, 0.3);
    --accentNonOpaque-orange: rgba(255, 137, 26, 0.3);
    --accentNonOpaque-deepBlue: rgba(74, 122, 252, 0.3);
    --accentNonOpaque-yellow: rgba(255, 189, 20, 0.3);
    --accentNonOpaque-pink: rgba(241, 70, 144, 0.3);
    --accentNonOpaque-purple: rgba(181, 74, 232, 0.3);
    --accentNonOpaque-blueStrong: rgba(36, 139, 249, 0.5);

    /* text(accent basic) : 텍스트 강조 베이직(2024-11-18 이후 추가) */
    --textAccent-blue: #66B0F9;
    --textAccent-green: #03D398;
    --textAccent-red: #F97B81;
    --textAccent-orange: #FEB55D;
    --textAccent-deepBlue: #6C94F9;
    --textAccent-yellow: #FFC342;
    --textAccent-pink: #F98BAF;
    --textAccent-purple: #D581F3;
    --textAccent-nonOpaqueBlue: rgba(102, 176, 249, 0.30);
    --textAccent-nonOpaqueGreen: rgba(3, 211, 152, 0.30);
    --textAccent-nonOpaqueRed: rgba(249, 123, 129, 0.30);
    --textAccent-nonOpaqueOrange: rgba(254, 181, 93, 0.30);
    --textAccent-nonOpaqueDeepBlue: rgba(108, 148, 249, 0.30);
    --textAccent-nonOpaqueYellow: rgba(255, 195, 66, 0.30);
    --textAccent-nonOpaquePink: rgba(249, 139, 175, 0.30);
    --textAccent-nonOpaquePurple: rgba(213, 129, 243, 0.30);

    --modeOnAccent-disabled: var(--white-12);
    --banner-low-01: #333322;
    --banner-low-02: #2b3620;
    --banner-low-03: #223822;
    --banner-low-04: #2b3636;
    --banner-low-05: #2c3535;
    --banner-low-06: #203838;
    --banner-low-07: #1b3842;
    --banner-low-08: #273447;
    --banner-low-09: #263059;
    --banner-low-10: #3e2e42;
    --banner-low-11: #452f24;
    --banner-low-12: #333329;
    --banner-low-13: #3b3221;
    --banner-low-14: #422f1e;
    --banner-low-15: #333333;
    --banner-md-01: #42422e;
    --banner-md-02: #3a4527;
    --banner-md-03: #2b472b;
    --banner-md-04: #3a4440;
    --banner-md-05: #374545;
    --banner-md-06: #2b4747;
    --banner-md-07: #29454f;
    --banner-md-08: #2d4359;
    --banner-md-09: #354069;
    --banner-md-10: #50395c;
    --banner-md-11: #5c392e;
    --banner-md-12: #424235;
    --banner-md-13: #4d412a;
    --banner-md-14: #5c3922;
    --banner-md-15: #424242;
    /* gradient */
    --w-color-utility-gradient-gradientToTop-default: linear-gradient(0deg, rgba(52, 58, 64, 1), rgba(52, 58, 64, 0));
    --w-color-utility-gradient-gradientToBottom-default: linear-gradient(180deg, rgba(52, 58, 64, 1), rgba(52, 58, 64, 0));
    --w-color-utility-gradient-gradientToRight-default: linear-gradient(90deg, rgba(52, 58, 64, 1), rgba(52, 58, 64, 0));
    --w-color-utility-gradient-gradientToLeft-default: linear-gradient(270deg, rgba(52, 58, 64, 1), rgba(52, 58, 64, 0));

    /* border */
    --tableBorderFixed: var(--modeGray-200);

    /* shadow 기본선언(dark) */
    --shadow-4: rgba(33, 37, 40, 0.04);
    --shadow-6: rgba(33, 37, 40, 0.06);
    --shadow-10: rgba(33, 37, 40, 0.10);
    --shadow-12: rgba(33, 37, 40, 0.12);
    --shadow-16: rgba(33, 37, 40, 0.16);
    --shadow-18: rgba(33, 37, 40, 0.18);
    --shadow-24: rgba(33, 37, 40, 0.24);
    --shadow-blue: rgba(33, 37, 40, 0.40);

    /* chart color */
    --ChartBg: #3d4247; /* 2024-10-30 변경(#494c4f)*/
    /* --ChartLine: #94a5b5; */
    /* --Chart01: #2589f4;
    --Chart08: #85E2A4; */

    /* 2024-10-30 이후 신규 추가 */
    --dividerBackground: var(--black-100);
    --w-color-border-button-01: rgba(199, 228, 255, 0.11);
}

/* ---------------------------------------------------------------------------------
	RESET
--------------------------------------------------------------------------------- */
html, body, div, span, object, iframe,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main, summary,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
form, fieldset, legend, input, label, button, textarea, select, textarea,
table, caption, tbody, tfoot, thead, tr, th, td,
b, i, dl, dt, dd, ol, ul, li,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, data,
time, mark, audio, video, a{margin:0;padding:0;box-sizing:border-box;outline:0;}

html{font-size:inherit;}
body, select, input, button, textarea, button, pre{font-size:0.875rem;font-family:'Pretendard', sans-serif;}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main, summary{display:block;}
blockquote, q{quotes:none;}

h1, h2, h3, h4, h5, h6{font-size:100%;}
cite, em, dfn, address{font-style:normal;}
fieldset, iframe{border:0 none;min-width:0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}

ol, ul, li{list-style:none;}
img, fieldset, iframe{border:0 none;vertical-align:top;}
img, video, audio, object, embed, iframe{max-width:100%;height:auto;}

legend, caption{width:1px;height:1px;margin:-1px;font-size:1px;opacity:0;white-space:nowrap;}
i, em, address{font-style:normal;}

input, select, textarea{color:inherit;border-radius:0;box-shadow:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
label, button{cursor:pointer;}
button{cursor:pointer;padding:0;background:none;border:0 none;}
select::-ms-expand{display:none;}
textarea{resize:vertical;}
input:disabled{opacity:1;-webkit-text-fill-color:inherit;}
input::-webkit-autofill,
input:-internal-autofill-selected,
input:autofill {background-color:transparent !important;;}
input[type="text"]::-ms-clear{display:none;}
input[type="radio"], input[type="checkbox"], input[type="tel"], input[type="number"]{vertical-align:middle;}
input[type="number"]{-moz-appearace:textfield;}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;}
input::-ms-reveal,
input::-ms-clear {display:none;}

table{width:100%;empty-cells:show;border-spacing:0;table-layout:fixed;}
table th{font-weight:normal;}

a {display:inline-block;}
a, a:visited{color:inherit;}
a:link, a:hover{text-decoration:none;}


/* 라이트/다크모드 별 노출영역 구분 */
.light-show {display:block;}
.dark-show {display:none;}
.is-dark .light-show {display:none;}
.is-dark .dark-show {display:block;}

/* 화면크기에 따라 보여지는 요소 조절 (폴드대응) */
.br-hide, .br-hide2 {display:block;}
.br-show {display:inline-block;content:'';padding:0 2px;}

@media all and (min-width:479px){
    .br-hide {display:inline-block;content:'';padding:0 2px;}
    .br-show {display:block;}
    .is-big .br-hide {padding:0 3px;}
    .tab-radio1 label input + span .br-hide {display:contents;}
}
@media all and (min-width:580px){
    .br-hide2 {display:contents;content:'';padding:0 2px;}
}

/* ---------------------------------------------------------------------------------
	DIM : loading
--------------------------------------------------------------------------------- */
.loading-dim {display:block;z-index:999999;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--modeInverseBW-40);}
.loading-dim lottie-player {position:absolute;left:50%;top:40%;width:48px;height:48px;margin-left:-24px;}
/* **************** 로딩화면 - 캐피탈용 분리 **************** */
.loading-spinner {position:relative;width:100%;height:100%;}
.loading-spinner > i {position:absolute;left:calc((100% / 2) - 20px);
    top:calc((100% / 2) - 48px);
    display:inline-block;width:48px;height:48px;background-image:url(../img/temp/loading.svg);animation:spin 1.2s cubic-bezier(0.785, 0.280, 0.308, 0.760) infinite;}
.msg-proceed > .loading-spinner > i {
    top:calc((100% / 2) + 48px + 16px);
}
@keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

/* --------------------------------------------------------------------------------
    은행/기관 아이콘
--------------------------------------------------------------------------------- */
/* 은행 */
.ico-bank-woori {background-image:url(../img/logo/bg/bank/icon_bank020.png);} /*우리은행*/
.ico-bank-004 {background-image:url(../img/logo/bg/bank/icon_bank004.png);} /*국민은행*/
.ico-bank-088 {background-image:url(../img/logo/bg/bank/icon_bank088.png);} /*신한은행*/
.ico-bank-081 {background-image:url(../img/logo/bg/bank/icon_bank081.png);} /*KEB하나은행*/
.ico-bank-023 {background-image:url(../img/logo/bg/bank/icon_bank023.png);} /*한국스탠다드차타드은행*/
.ico-bank-003 {background-image:url(../img/logo/bg/bank/icon_bank003.png);} /*기업은행*/
.ico-bank-011 {background-image:url(../img/logo/bg/bank/icon_bank011.png);} /*농협중앙회*/
.ico-bank-012 {background-image:url(../img/logo/bg/bank/icon_bank012.png);} /*지역농협*/
.ico-bank-007 {background-image:url(../img/logo/bg/bank/icon_bank007.png);} /*수협*/
.ico-bank-045 {background-image:url(../img/logo/bg/bank/icon_bank045.png);} /*새마을금고*/
.ico-bank-089 {background-image:url(../img/logo/bg/bank/icon_bank089.png);} /*케이뱅크*/
.ico-bank-090 {background-image:url(../img/logo/bg/bank/icon_bank090.png);} /*카카오뱅크*/
.ico-bank-092 {background-image:url(../img/logo/bg/bank/icon_bank092.png);} /*토스뱅크*/
.ico-bank-071 {background-image:url(../img/logo/bg/bank/icon_bank071.png);} /*우체국*/
.ico-bank-002 {background-image:url(../img/logo/bg/bank/icon_bank002.png);} /*산업은행*/
.ico-bank-008 {background-image:url(../img/logo/bg/bank/icon_bank008.png);} /*수출입은행*/
.ico-bank-027 {background-image:url(../img/logo/bg/bank/icon_bank027.png);} /*한국씨티은행*/
.ico-bank-031 {background-image:url(../img/logo/bg/bank/icon_bank031.png);} /*대구은행*/
.ico-bank-032 {background-image:url(../img/logo/bg/bank/icon_bank032.png);} /*부산은행*/
.ico-bank-034 {background-image:url(../img/logo/bg/bank/icon_bank034.png);} /*광주은행*/
.ico-bank-035 {background-image:url(../img/logo/bg/bank/icon_bank035.png);} /*제주은행*/
.ico-bank-037 {background-image:url(../img/logo/bg/bank/icon_bank037.png);} /*전북은행*/
.ico-bank-039 {background-image:url(../img/logo/bg/bank/icon_bank039.png);} /*경남은행*/
.ico-bank-048 {background-image:url(../img/logo/bg/bank/icon_bank048.png);} /*신협*/
.ico-bank-050 {background-image:url(../img/logo/bg/bank/icon_bank050.png);} /*상호저축은행*/
.ico-bank-054 {background-image:url(../img/logo/bg/bank/icon_bank054.png);} /*홍콩샹하이은행*/
.ico-bank-055 {background-image:url(../img/logo/bg/bank/icon_bank055.png);} /*도이치은행*/
.ico-bank-057 {background-image:url(../img/logo/bg/bank/icon_bank057.png);} /*제이피모간체이스은행*/
.ico-bank-060 {background-image:url(../img/logo/bg/bank/icon_bank060.png);} /*B.O.A*/
.ico-bank-064 {background-image:url(../img/logo/bg/bank/icon_bank064.png);} /*산림조합*/
.ico-bank-005 {background-image:url(../img/logo/bg/bank/icon_bank005.png);} /*외환은행(구)*/
.ico-bank-021 {background-image:url(../img/logo/bg/bank/icon_bank021.png);} /*조흥은행(구)*/
.ico-bank-026 {background-image:url(../img/logo/bg/bank/icon_bank026.png);} /*신한은행(구)*/
.ico-bank-230 {background-image:url(../img/logo/bg/bank/icon_bank230.png);} /*미래에셋증권(구)*/
/* 증권사 */
.ico-bank-209 {background-image:url(../img/logo/bg/bank/icon_bank209.png);} /*유안타증권*/
.ico-bank-218 {background-image:url(../img/logo/bg/bank/icon_bank218.png);} /*KB증권*/
.ico-bank-238 {background-image:url(../img/logo/bg/bank/icon_bank238.png);} /*미래에셋대우*/
.ico-bank-240 {background-image:url(../img/logo/bg/bank/icon_bank240.png);} /*삼성증권*/
.ico-bank-243 {background-image:url(../img/logo/bg/bank/icon_bank243.png);} /*한국투자증권*/
.ico-bank-247 {background-image:url(../img/logo/bg/bank/icon_bank247.png);} /*NH투자증권*/
.ico-bank-261 {background-image:url(../img/logo/bg/bank/icon_bank261.png);} /*교보증권*/
.ico-bank-262 {background-image:url(../img/logo/bg/bank/icon_bank262.png);} /*하이투자증권*/
.ico-bank-263 {background-image:url(../img/logo/bg/bank/icon_bank263.png);} /*현대차증권*/
.ico-bank-264 {background-image:url(../img/logo/bg/bank/icon_bank264.png);} /*키움증권*/
.ico-bank-265 {background-image:url(../img/logo/bg/bank/icon_bank265.png);} /*이트레이드증권*/
.ico-bank-266 {background-image:url(../img/logo/bg/bank/icon_bank266.png);} /*SK증권*/
.ico-bank-267 {background-image:url(../img/logo/bg/bank/icon_bank267.png);} /*대신증권*/
.ico-bank-268 {background-image:url(../img/logo/bg/bank/icon_bank268.png);} /*아이엠투자증권*/
.ico-bank-269 {background-image:url(../img/logo/bg/bank/icon_bank269.png);} /*한화증권*/
.ico-bank-270 {background-image:url(../img/logo/bg/bank/icon_bank270.png);} /*하나금융투자*/
.ico-bank-278 {background-image:url(../img/logo/bg/bank/icon_bank278.png);} /*신한금융투자*/
.ico-bank-279 {background-image:url(../img/logo/bg/bank/icon_bank279.png);} /*DB금융투자*/
.ico-bank-280 {background-image:url(../img/logo/bg/bank/icon_bank280.png);} /*유진투자증권*/
.ico-bank-287 {background-image:url(../img/logo/bg/bank/icon_bank287.png);} /*메리츠종합금융증권*/
.ico-bank-288 {background-image:url(../img/logo/bg/bank/icon_bank288.png);} /*카카오페이증권*/
.ico-bank-290 {background-image:url(../img/logo/bg/bank/icon_bank290.png);} /*부극증권*/
.ico-bank-291 {background-image:url(../img/logo/bg/bank/icon_bank291.png);} /*신영증권*/
.ico-bank-292 {background-image:url(../img/logo/bg/bank/icon_bank292.png);} /*케이프투자증권*/
/* 인증기관 */
.certif.wooriwon {background-image:url(../img/logo/certif/logo-bg-cert-won.svg);} /*우리WON인증*/
.certif.naver {background-image:url(../img/logo/certif/logo-bg-cert-naver.svg);} /*네이버*/
.certif.kakao {background-image:url(../img/logo/certif/logo-bg-cert-kakao.svg);} /*카카오*/
.certif.toss {background-image:url(../img/logo/certif/logo-bg-cert-toss.svg);} /*토스*/
.certif.pass {background-image:url(../img/logo/certif/logo-bg-cert-pass.svg);} /*패스*/