@charset "utf-8";
@import url('fonts.css');
@import url('open-color.css');

*,
*::before,
*::after { box-sizing: border-box; }
img,
picture,
svg,
video { max-width: 100%; height: auto; display: block; }
table { border-collapse: collapse; border-spacing: 0; }
ol,
ul { margin: 0; padding: 0; list-style: none; }
a { transition: var(--transition); color: inherit; text-decoration: none; }
:root {
	--font-title: 'Montserrat', 'Spoqa Han Sans Neo', 'SUIT', 'Pretendard', 'Noto Sans KR',
		'Apple SD Gothic Neo', -apple-system, 'Segoe UI', 'Helvetica Neue', 'Malgun Gothic', '맑은 고딕', Arial, 돋움, Dotum, sans-serif;
	--font-text: 'Roboto', 'Pretendard' 'Spoqa Han Sans Neo', 'SUIT', 'Noto Sans KR',
		'Apple SD Gothic Neo', -apple-system, 'Segoe UI', 'Helvetica Neue', 'Malgun Gothic', '맑은 고딕', Arial, 돋움, Dotum, sans-serif;
	--font-icon: 'Font Awesome 7 Free', 'xeicon', 'Pretendard', 'Noto Sans KR',
		'Apple SD Gothic Neo', -apple-system, 'Segoe UI', 'Helvetica Neue', 'Malgun Gothic', '맑은 고딕', Arial, 돋움, Dotum, sans-serif;
	
	--erp-max-width: min(1200px, 100% - 3rem);
	--erp-surface: #ffffff;
	--erp-border: rgba(15, 23, 42, 0.08);
	--erp-text-muted: #6b7280;
	--erp-primary: #4c6ef5;
	--erp-primary-dark: #2643d9;
	
	--transition: all 0.3s ease;
}
html,
body { height: 100%; color: var(--oc-gray-7); background: var(--oc-gray-0);
	font-family: var(--font-text); line-height: 1.6; font-weight: 400; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
p { margin: 0; font-size: 1rem; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-title); word-break:keep-all; }
h1 { font-size: 2rem; font-weight: 800; line-height:1.2; }
h2 { font-size: 1.5rem; font-weight: 700; line-height:1.2; }
h3 { font-size: 1.3rem; font-weight: 600; line-height:1.3; }
h4 { font-size: 1.15rem; font-weight: 600; line-height:1.3; }
h5 { font-size: 1.05rem; font-weight: 400; line-height:1.4; }
h6 { font-size: 1rem; font-weight: 400; line-height:1.4; }

/* input */
input:not([type="radio"]):not([type="checkbox"]),
textarea,
select { border-radius: 5px !important; font-size: 1rem; }

/* 공통 */
::placeholder { color: var(--oc-gray-5) !important; }
.inner { width: 100%; max-width: 1500px; margin: 0 auto; padding: 0 1rem; }
.bd_inner { width: 100%; max-width: 1100px; margin: 0 auto; }
.after-bar { display: flex; align-items: center; }
.after-bar:after { display: inline-block; width: 1px; height: 60%; margin: auto 15px; content: ""; background: var(--oc-gray-5); }
.required,
textarea.required { background-position: right 5px top 0 !important; }
.form-check { width: fit-content; }
button { cursor: pointer; }
.btn { border-radius: 1rem; }
.inp-wr { position: relative; }
.inp-wr .inp { width: 100%; padding-right: 50px; }
.inp-wr .inp-icon { position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
.row1 { width: 100%; }
.row2 { width: calc((100% - 20px) / 2); }
.row3 { width: calc((100% - 40px) / 3); }
.row4 { width: calc((100% - 60px) / 4); }
.row5 { width: calc((100% - 80px) / 5); }
.point_red { background: var(--oc-red-0); color: var(--oc-red-3); }
.point_blue { background: var(--oc-blue-0); color: var(--oc-blue-3); }
.point_green { background: var(--oc-green-0); color: var(--oc-green-3); }
.point_grape { background: var(--oc-grape-0); color: var(--oc-grape-3); }

/* 레이아웃 - 헤더/사이드바 */
.erp-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; box-sizing: border-box; box-shadow: 0 0 10px 0 rgba(15, 23, 42, 0.12); background: #fff; }
.erp-header .inner { height: 55px; display: flex; align-items: center; gap: 2rem; }
.erp-header__top { width: 100%; margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 1rem; }

/* 브랜드 / 로고 */
.erp-header__logo { display: flex; align-items: center; justify-content: center; height: 100%; }
.erp-header__logo img { width: auto; height: 35px; object-fit: contain; }
.erp-header__brand-text { display: flex; flex-direction: column; gap: 0.2rem; overflow-wrap: break-word; word-break: break-word; }
.erp-header__site { color: #111827; font-weight: 700; font-size: 1.35rem; }
.erp-header__tagline { color: var(--erp-text-muted); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; }
.erp-header__mode,
.erp-header__quick-links,
.erp-header__auth { display: flex; align-items: center; gap: 0.75rem; padding: 0; margin: 0; list-style: none; }
.erp-header__auth { margin-left: auto; }
.erp-header__mode li,
.erp-header__quick-links li,
.erp-header__auth li { display: flex; align-items: center; }
.erp-header__mode a,
.erp-header__quick-links a,
.erp-header__auth a { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.85rem; border-radius: 999px; transition: var(--transition);
	font-size: 0.9rem; text-decoration: none; }
#popular .popular_inner { width: unset; }

/* 검색 영역 */
.erp-header__search { display: flex; align-items: center; gap: 20px; }
.erp-header__search .btn { border: 0; color: var(--oc-gray-6); }
.erp-header__search .btn:hover { color: var(--oc-blue-6); }
#popular { margin: 0; }

/* 레이아웃 보정 */
#wrapper { padding: 55px 0 0; background: var(--oc-gray-0); }
#container_wr { padding: 20px 0; }
#container { margin: 0; width: 100%; }
.erp-dashboard { width: 100%; display: flex; gap: 20px; flex-wrap: wrap; min-height: calc(100vh - 200px); }
.erp-dashboard .bg { padding: 20px; border-radius: 1rem; box-shadow: 0 0 10px 0 rgba(15, 23, 42, 0.06); background: #fff; }
.erp-dashboard a.bg:hover { background: var(--oc-blue-5); color: #fff; }
.erp-dashboard .bg.color_bg { background: var(--oc-blue-6); color: #fff; }
.erp-dashboard .erp_dsbd_info { padding:1.5em 1em; display: flex; align-items: center; gap:1em; }
.erp-dashboard .erp_dsbd_info .icon_box { width: 70px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 2rem; }
.erp-dashboard .erp_dsbd_info .txt_box { flex:1; }
.erp-dashboard .erp_dsbd_info p { margin-top: 15px; text-align: right; line-height: 1; }
.erp-dashboard .erp_dsbd_info .num { margin-right: 5px; font-family:var(--font-title); font-size: 2.3rem; font-weight: 700; }
.erp-dashboard .erp_dsbd_info .tag { display: block; width: fit-content; padding: 5px 8px; margin: 5px 0 0 auto; border-radius: 5px; background: var(--oc-gray-1);
	color: var(--oc-gray-5); font-size: 0.8rem; }
.erp-dashboard .erp-metrics { min-height: 65vh; }
.erp-dashboard .erp-metrics .nav { justify-content: center; }
.erp-dashboard .card { transition: box-shadow 0.5s ease; }
.erp-dashboard .card:hover { box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2); }
.erp-dashboard .card-img-top { object-fit: cover; width: 100%; height: auto; }
.erp-footer,
#ft { padding: 20px; box-sizing: border-box; background: var(--oc-gray-0); font-size: 0.9rem; }
.erp-footer__inner p { color: var(--oc-gray-5); font-size: 1em; }
.erp-footer-logo { display: flex; align-items: center; justify-content: center; height: 100%; }
.erp-footer-logo img { width: auto; height: 25px; }

/* 아웃로그인_그누 */
#mb_login { margin: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; overflow: hidden; }
#mb_login:before { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; content: ""; animation: moveImage 8s infinite alternate;
	background: url("../img/login_bg.png") no-repeat center center; background-size: cover; }
@keyframes moveImage {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}
#mb_login .mbskin_box { position: relative; width: 85%; max-width: 450px; min-width: 300px; border: 0; background: none; }
#mb_login .bg_box { overflow: hidden; padding: 30px; backdrop-filter: blur(10px); border-radius: 1rem; box-shadow: 0 0 20px 0 rgba(15, 23, 42, 0.12); background: rgba(255, 255, 255, 0.3); }
#mb_login .mbskin_box h2 img { margin: 0 auto 30px; }
#login_fs { padding: 0; }
#login_fs .btn { width: 100%; }
#login_info .login_if_auto label { padding-left: 0; }
.ol { margin-bottom: 0; border: 0; }
.ol .pf_img_box { display: inline-flex; align-items: center; justify-content: center; }
.ol .pf_img_box img.ol-profile-img { width: 25px; height: unset; aspect-ratio: 1/1; object-fit: cover; display: inline-block; border-radius: 50%; }
.ol #ol_after_hd { padding: 0; height: auto; }
.ol #ol_after_hd .dropdown-toggle { font-size: 0.9rem; }
.ol .dropdown { position: relative; }
.ol .dropdown-menu { position: absolute !important; top: calc(100% + 6px) !important; left: 50% !important; z-index: 1000; transform: translateX(-60%) !important; }
.ol #ol_after_hd .dropdown .btn .ol-profile-img { vertical-align: middle; }

/* 보드수정 */
#container_title span { margin: 0 15px 20px; text-align: center; }

/* 반응형 */
@media (max-width: 1200px) {
	.row4,
	.row5 { width: calc((100% - 20px) / 2); }
}
@media (max-width: 1000px) {
	.row2,
	.row3 { width: 100%; }	
}
@media (max-width: 768px) {
	.erp-header .inner { height: 100px; gap: 0rem 2rem; flex-wrap: wrap; }
	.erp-header__logo { order: 1; height: 35px; }
	.erp-header__auth { order: 2; }
	.erp-header__search { order: 3; width: 100%; }
	.erp-header__search form,
	.erp-header__search .inp-wr { width: 100%; }
	.erp-dashboard .erp_dsbd_info { width: 100%; padding:1em; }
	.erp-dashboard .erp_dsbd_info .icon_box { font-size:1.5rem; width:3rem; }
	.erp-dashboard .erp_dsbd_info .num { font-size:1.75rem; }
	.erp-dashboard .erp_dsbd_info p { margin-top:.5rem; }
	.erp-dashboard .bg { padding:1em; }	
	#wrapper { padding: 100px 0 0; }
}
@media (max-width: 430px) {
	.erp-header__logo img { height: 25px; }
	.erp-header__auth { gap: 0; }
	.erp-header .inner { gap: 0rem 1rem; }
}