@charset "utf-8";
/* 투어머치 전현진 */

/* @import url('https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/variable/woff2/SUIT-Variable.css'); */
/* @import url('./common/SUIT-Variable.css'); */
@import url('./suit_font.css');

@font-face {
    font-family: 'KOTRALEAP';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2110@1.0/KOTRALEAP.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


/* 폰트 세팅 */
:root {
    --font-basic: 'SUIT Variable';
    --font-weight-light: 300;
    --font-weight-medium: 500;
    --font-weight-semibold: 700;
    --font-weight-bold: 800;
    --font-weight-heavy: 900;

    --font-word-cloud: 'KOTRALEAP';
}


/* 기본 컬러 */
html {
	--dark-light-mode-bg: #47c8a8;
    --color-fullsize: #2a2a2d;
    
    --logo-img: url("../images/common/logo.png");
    --logo-img_w: url("../images/common/logo_w.png");

    --input-placeholder-color: #b5b5b5;
    --color-background: #fff;
    --color-background-rgb: 255,255,255;
    --black-white-rgb: 0,0,0;
	--color-background-light-blue:#F4F5F8;
	
	
    --color-basic: #000;
    --color-basic-rgb: 0,0,0;
    --color-basic-reverse: #fff;

    --color-white: #fff;
    --color-white-rgb: 255,255,255;
    --color-black: #000;
    --color-black-rgb: 0,0,0;
    --color-gray: #575757;
    --color-gray-rgb: 87,87,87;
    --color-gray-deep: #191919;
    --color-gray-deep-rgb: 25,25,25;
    --color-gray-light: #ddd;
    --color-gray-light-rgb: 221,221,221;

    --color-blue: #2f68c2;
    --color-blue-rgb: 47,104,194;
    --color-blue-middle: #003879;
    --color-blue-middle-rgb: 0,56,121;
    --color-blue-deep: #001a3d;
    --color-blue-deep-rgb: 0,26,61;
    --color-sky: #edf4ff;
    --color-sky-rgb: 237,244,255;
    --color-red: #dc000c;
    --color-red-rgb: 220,0,12;
    --color-pink: #DC45D6;
    --color-pink-rgb: 220,69,214;
    --color-yellow: #fef675;
    --color-yellow-rgb: 254,246,117;
    --color-green: #04b56c;
    --color-green-rgb: 4,180,106;
    --color-orange: #ff7f50;
    --color-orange-rgb: 255,127,80;
    --color-violet: #231a6b;

    --table-header-bg: #f9f9f9;
    --table-header-color: #575757;
    --table-body-color: #707070;
}

/* 다크 모드 */
html.theme-dark {
	--input-placeholder-color: #666;
    --color-background-rgb: 0,0,0;
    --black-white-rgb: 255,255,255;
    --dark-light-mode-bg: #47c8a8;
    
	--color-background-light-blue:#3E3D42;

    --color-gray-light: #555;
    --color-gray-light-rgb: 85, 85, 85;
    
    --color-basic: #fff;
    --color-basic-ov: #ccc;
    --color-basic-rgb: 255,255,255;
    --color-point: #FA5032;
    --color-light: #ccc;
    --color-header: #2C2C2E;
    --color-background: #1C1C1E;
    --color-background-point: #FA5032;
    --color-cutline: #666;

    --color-white: #fff;
    --color-white-rgb: 255,255,255;
    --color-gray: #999;
    --color-blue: #0BB2E6;
    --color-blue-rgb: 0,177,255;
    --color-blue-deep: #2f68c2;
    --color-blue-deep-rgb: 47,104,194;
    --color-red: #FA5032;
    --color-red-rgb: 250,80,50;
    --color-yellow: #fcdd12;
    --color-sky: #3E3D42;
}

/* 폰트 줌 */
html.zoom1 {
    font-size: 10.667px;
}
html.zoom2 {
    font-size: 11.333px;
}
html.zoom3 {
    font-size: 12px;
}
html.zoom4 {
    font-size: 12.667px;
}


/* 컬러 // 일반 */
.color-basic {
    color: var(--color-basic) !important;
}

.color-bg {
    color: var(--color-background);
}

.hover-gray:hover,
.color-gray {
    color: var(--color-gray) !important;
}

.hover-blue:hover,
.color-blue {
    color: var(--color-blue) !important;
}

.hover-blue-deep:hover,
.color-blue-deep {
    color: var(--color-blue-deep) !important;
}

.hover-red:hover,
.color-red {
    color: var(--color-red) !important;
}

.hover-green:hover,
.color-green {
    color: var(--color-green) !important;
}

.hover-orange:hover,
.color-orange {
    color: var(--color-orange) !important;
}

.hover-violet:hover,
.color-violet {
    color: var(--color-violet) !important;
}

.hover-yellow:hover,
.color-yellow {
    color: var(--color-yellow) !important;
}


/* 컬러 // 배경 */
.bg-gray-light {
    background-color: rgba(var(--color-basic-rgb),0.03);
}

.analytics-color {
    background: linear-gradient(90deg, #FF0301, #4345AD);
    color: transparent;
    -webkit-background-clip: text;
}



/* 컬러 // 버튼 */
.btns.hover-btn-gray:hover,
.btns.btn-gray {
    background-color: var(--color-gray);
    color: var(--color-white);
}

.btns.hover-btn-gray-light:hover,
.btns.btn-gray-light {
    background-color: rgba(var(--color-basic-rgb),0.03);
}

.btns.hover-btn-red:hover,
.btns.btn-red {
    border-color: var(--color-red);
    background-color: var(--color-red);
    color: var(--color-white);
}

.btns.hover-btn-red-line:hover,
.btns.btn-red-line {
    border-color: var(--color-red);
    background-color: var(--color-background);
    color: var(--color-red);
}

.btns.hover-btn-blue:hover,
.btns.btn-blue {
    border-color: var(--color-blue);
    background-color: var(--color-blue);
    color: var(--color-white);
}

.btns.hover-btn-blue-line:hover,
.btns.btn-blue-line {
    border-color: var(--color-blue);
    background-color: var(--color-background);
    color: var(--color-blue);
}

.btns.hover-btn-blue-deep:hover,
.btns.btn-blue-deep {
    border-color: var(--color-blue-deep);
    background-color: var(--color-blue-deep);
    color: var(--color-white);
}

.btns.hover-btn-blue-deep-line:hover,
.btns.btn-blue-deep-line {
    border-color: var(--color-blue-deep);
    background-color: var(--color-background);
    color: var(--color-blue-deep);
}

.btns.hover-btn-green-line:hover,
.btns.btn-green-line {
    border-color: var(--color-green);
    background-color: var(--color-background);
    color: var(--color-green);
}

.btns.hover-btn-green:hover,
.btns.btn-green {
    border-color: var(--color-green);
    background-color: var(--color-green);
    color: var(--color-white);
}

.btns.hover-btn-orange:hover,
.btns.btn-orange {
    border-color: var(--color-orange);
    background-color: var(--color-orange);
    color: var(--color-white);
}

.btns.hover-btn-violet:hover,
.btns.btn-violet {
    border-color: var(--color-violet);
    background-color: var(--color-violet);
    color: var(--color-white);
}