@charset "utf-8";
/* 아이랩스 전현진 팀장 */


@import url('../../webfonts/SUIT-Variable.woff2');

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('../../webfonts/GmarketSansTTFMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansBold';
    src: url('../../webfonts/GmarketSansTTFBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansLight';
    src: url('../../webfonts/GmarketSansTTFLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

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


/* 폰트 세팅 */
:root {
    --font-basic: 'Pretendard Variable';
    --font-point: 'GmarketSansMedium';
    --font-point-bold: 'GmarketSansBold';
    --font-point-light: 'GmarketSansLight';

    --font-basic-admin: 'SUIT Variable';
    --font-weight-light: 300;
    --font-weight-medium: 500;
    --font-weight-semibold: 700;
    --font-weight-bold: 800;
    --font-weight-heavy: 900;
}


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

    --input-placeholder-color: #b5b5b5;
    --color-background-rgb: 255,255,255;
    --black-white-rgb: 0,0,0;
    --dark-light-mode-bg: #3C3E71;

    --color-basic: #212121;
    --color-basic-rgb: 33,33,33;
    --color-basic-reverse: #fff;
    --color-point: #0A1F4E;
    --color-light: #666;
    --color-deeplight: #999;
    --color-background: #fff;
    --color-background-gray: #F3F3F3;
    --color-greentour: #133E24;
    --color-regulartour: #0A1F4E;
    --color-line: #dcdcdc;

    --color-admin-background: #F2F4F7;
    --color-admin-background-rgb: 242,244,247;
    --color-admin-gray: #AAAFBA;
    --color-admin-gray-deep: #2D4060;
    --color-admin-blue: #2874AC;
    --color-admin-blue-rgb: 40, 116, 172;

    --color-white: #fff;
    --color-white-rgb: 255,255,255;
    --color-black: #000;
    --color-black-rgb: 0,0,0;
    --color-gray: #666;
    --color-red: #DC000C;
    --color-blue: #0A1F4E;
    --color-blue-rgb: 10,31,78;
    --color-brown: #C0A354;
    --color-brown-rgb: 192,163,84;
    --color-brown-dark: #7B6946;
    --color-brown-red: #D65129;
    --color-green: #1bc39b;
}


/* 다크 모드 */
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-gray-deep:hover,
.color-gray-deep {
    color: var(--color-admin-gray-deep) !important;
}

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

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

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

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

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


/* 컬러 // 백그라운드 */
.bg-brown-red            { background-color: var(--color-brown-red); color: var(--color-white); }
.bg-gray                { background-color: var(--color-admin-gray); color: var(--color-white); }
.bg-brown               { background-color: var(--color-brown); color: var(--color-white); }
.bg-brown-deep          { background-color: var(--color-brown-dark); color: var(--color-white); }



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

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

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

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

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

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

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

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

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

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