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

@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url('/resources/front/font/common/PretendardVariable.woff2') format('woff2-variations');
}


/* 폰트 세팅 */
:root {
    --font-basic: 'Pretendard Variable';
    --font-weight-light: 300;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --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;
    --logo-url: url("../img/common/logo.png");

    --color-basic: #0B0F32;
    --color-basic-rgb: 11,15,50;
    --color-basic-reverse: #fff;
    --color-basic-reverse-rgb: 255,255,255;
    --color-side-bg: #EDF0F6;

    --color-black: #000;
    --color-black-rgb: 0,0,0;
    --color-white: #fff;
    --color-white-rgb: 255,255,255;
    --color-gray: #686C7A;
    --color-gray-rgb: 104,108,122;
    --color-gray-light: #DADFE6;
    --color-gray-light-rgb: 218,223,230;
    --color-gray-deep: #5C5C6F;
    --color-gray-deep-rgb: 92,92,111;

    --color-point: #FBA919;
    --color-point-rgb: 232,0,56;
    --color-blue: #486FFB;
    --color-blue-rgb: 72,111,251;
    --color-blue-deep: #00254D;
    --color-blue-deep-rgb: 0,37,77;
    --color-blue-light: #ABB0CC;
    --color-blue-light-rgb: 171,176,204;
    --color-sky: #00ABE9;
    --color-sky-rgb: 0,171,233;
    --color-green: #27BA85;
    --color-green-rgb: 39,186,133;
    --color-red: #D23F1F;
    --color-red-rgb: 210,63,31;
    --color-orange: #FF6D39;
    --color-orange-rgb: 255,109,57;
    --color-violet: #7150D0;
    --color-violet-rgb: 113,80,208;
	--color-yellow: #ffc239;
    --bg-gray-light: #F5F5F8;
    
    --color-disabled: #ccc;
    --color-disabled-rgb: 204,204,204;
    
}


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

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

.color-point {
    color: var(--color-point);
}

.color-white {
    color: var(--color-white);
}

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


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

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

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

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

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

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

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

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

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

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


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

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

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

.btns.hover-btn-disabled-line:hover,
.btns.btn-disabled {
   	background-color: var(--color-disabled);
    color: var(--color-grey);
    cursor: not-allowed;
}

/* 알림창 수락 버튼 */
.swal-confirm-btn {
    font-size: 1.5rem;
    padding: 10px 24px;
}

/* 알림창 취소 버튼 */
.swal-cancel-btn {
    font-size: 1.5rem;
    padding: 10px 20px;
}

/* 큰 버튼 클래스 */
.big-confirm-btn, .big-cancel-btn {
    font-size: 1.2rem;
    padding: 14px 36px;
    min-width: 120px;
}