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

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;800&display=swap');
@import url('https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/variable/woff2/SUIT-Variable.css');

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

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

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

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

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


/* 폰트 세팅 */
:root {
    --font-basic: 'Pretendard';
    --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-admin-blue-deep: #0A1F4E;
    --color-admin-blue-deep-rgb: 10, 31, 78;

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