@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'); */


/* 폰트 세팅 */
: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;
}


/* 기본 컬러 */
html {
    --input-placeholder-color: rgba(0,0,0,0.25);
    --color-background: #fff;
    --color-background-rgb: 255,255,255;
    --black-white-rgb: 0,0,0;

    --color-basic: #000;
    --color-basic-rgb: 0,0,0;
    --color-basic-reverse: #fff;
    --color-basic-reverse-rgb: 255,255,255;

    --color-white: #fff;
    --color-white-rgb: 255,255,255;
    --color-black: #000;
    --color-black-rgb: 0,0,0;
    --color-gray: #707070;
    --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-red: #dc1c1c;
    --color-red-rgb: 220,28,28;
    --color-orange: #FF5F2E;
    --color-orange-rgb: 255,95,46;
    --color-blue: #1994DA;
    --color-blue-rgb: 25,148,218;
    --color-blue-deep: #1A1D37;
    --color-blue-deep-rgb: 26,29,55;
    --color-green: #004E66;
    --color-green-rgb: 0,78,102;
    --color-yellow: #FCBE32;
    --color-yellow-rgb: 252,190,50;
}


/* 다크 모드 */
html.theme-dark {
}

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

.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-yellow:hover,
.color-yellow {
    color: var(--color-yellow) !important;
}

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


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

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

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

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

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



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

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

.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-orange:hover,
.btns.btn-orange {
    border-color: var(--color-orange);
    background-color: var(--color-orange);
    color: var(--color-white);
}

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

.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-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-line:hover,
.btns.btn-blue-line {
    border-color: var(--color-blue);
    background-color: var(--color-background);
    color: var(--color-blue);
}

.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-green-line:hover,
.btns.btn-green-line {
    border-color: var(--color-green);
    background-color: var(--color-background);
    color: var(--color-green);
}