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

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

@font-face {
    font-family: 'paybooc-Light';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/paybooc-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'paybooc-Medium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/paybooc-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'paybooc-Bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/paybooc-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'paybooc-ExtraBold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/paybooc-ExtraBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* @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;

    --font-point: 'paybooc-ExtraBold';
    --font-point-medium: 'paybooc-Medium';
}


/* 기본 컬러 */
html {
    --logo-img: url("../img/logo.png");
    --logo-img-w: url("../img/logo_w.png");

    --input-placeholder-color: #6b6b6b;
    --color-background: #101010;
    --color-background-rgb: 18,18,18;
    --black-white-rgb: 0,0,0;

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

    --color-white: #fff;
    --color-white-rgb: 255,255,255;
    --color-black: #000;
    --color-black-rgb: 0,0,0;
    --color-gray: #999999;
    --color-gray-rgb: 153,153,153;
    --color-gray-deep: #191919;
    --color-gray-deep-rgb: 25,25,25;
    --color-gray-light: #2f2f2f;
    --color-gray-light-rgb: 221,221,221;
    
    --color-point: #254D97;
    --color-point-rgb: 37,77,151;
    --color-red: #dc000c;
    --color-red-rgb: 219,0,11;
    --color-blue: #8d85ed;
    --color-blue-rgb: 141,133,237;
    --color-blue-deep: #252741;
    --color-blue-deep-rgb: 37,39,65;
    --color-orange: #D87827;
    --color-orange-rgb: 216,120,39;
    --color-green: #307943;
    --color-green-rgb: 48,121,67;
    --color-yellow: #FFE608;
    --color-yellow-rgb: 255,231,10;
    --color-violet: #A478D6;
    --color-violet-rgb: 164,120,214;
}


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

/* 컬러 // 일반 */
.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-orange:hover,
.color-orange {
    color: var(--color-orange) !important;
}

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


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



/* 컬러 // 버튼 */
.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-light);
    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-point:hover,
.btns.btn-point {
    border-color: var(--color-point);
    background-color: var(--color-point);
    color: var(--color-white);
}

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

.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-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);
}