.gridContainer {
	height: 100%;
}

.container {
	height: calc(100% - 107px);
	margin-top: 120px;
	padding: 0 0 24px 0;
}

.content-wrapper {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.contents {
	display: flex;
	flex-direction: column;
	gap: 32px;
	box-sizing: border-box;
	height: 100%;
}

.main-title {
	margin: 0 auto;
}

/*main.main {
	padding: 0 68px;
}*/

/* 메인 컨테이너 css */
section.main {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 24px;
	gap: 24px;
	background-color: var(--dark-200);
}

/*카드 내에 박스*/
.box {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
	border-radius: 8px;
	background-color: var(--dark-200);
}

.box-transparent {
	background-color: transparent;
}

.box-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.box-title-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.box-body {
	background-color: var(--gray-500);
}

/*실시간 관제 시스템 pilot plant*/
.box-plant .box-header {
	background-color: var(--dark-300);
	padding: 13px 16px;
	border-radius: 8px;
}

/* 컨텐트 / 하나의 박스 영역 */
.content {
	position: relative;
	padding: "";
}

.content__header {

}

.content__body {

}

/* 폼 UI */
.form {
	position: relative;
}

.form-item {
	position: relative;
	max-width: 360px;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.form-label {
	margin-bottom: 8px;
}

/* 떠있는 패널 UI */
.floating-panel {
	position: absolute;
}

/* 카드 UI */
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 16px;
	padding: 16px;
	border-radius: 16px;
	background-color: var(--dark-100);
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.card-header-group {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.card-body {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/*차트 UI*/
.chart-wrap {
	width: 100%;
}

.chart-resize {
	width: 100%;
	height: 100%;
}

/* 그리드 UI */
.grid {
	width: 100%;
	height: 100%;
	position: relative;
}

.grid-wrap {
	flex: 1;
	overflow: hidden;
	height: 100%;
}

/* 탭 UI */
.tab {
	position: relative;
	display: flex;
}

.tab li button {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.tab li.on button {
	background-color: var(--color-primary);
}

/* 리스트 형식의 타이틀 / 값 스타일*/
.stats-summary {
	display: flex;
	gap: 8px;
	width: 100%;
	height: 100%;
}

.stats-summary-item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	padding: 16px;
	border-radius: 8px;
	background-color: var(--dark-200);
}

.stats-summary-item > div {
	display: flex;
	/*justify-content: end;*/
	align-items: baseline;
	gap: 4px;
}

.stats-summary-item strong {
	font-size: 24px;
}

.stats-summary-status {
	position: absolute;
	top: 16px;
	right: 16px;
	font-size: 12px;
	line-height: 20px;
}

/*메인 비전 영역*/
.vision {
	position: relative;
}

.vision .box {
	position: relative;
	/*border-radius: 24px;*/
	display: block;
	padding: 24px;
}

/* 메인 안내 영역 */
section.info {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px;
	/*border-radius: 24px;*/
	background-color: var(--dark-200);
}

/*시설 이용 안내*/
.facility-guide-list {
	display: flex;
	flex-direction: column;
}

.facility-guide-list li {
	display: flex;
	align-items: center;
	height: 60px;
}

.facility-guide-list li:not(:last-child) {
	border-bottom: 1px solid var(--gray-400);
}

.facility-guide-list li div {
	display: flex;
	align-items: center;
}

.facility-guide-list li > span {
	font-size: 14px;
}

.facility-guide-label {
	margin: 0 24px 0 16px;
	min-width: 95px;
	font-weight: bold;
}

.user-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.profill {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-primary);
	border: 1px solid var(--primary-brand-200);
	border-radius: 50%;
	width: 40px;
	height: 40px;
}

.recent-login {
	display: flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

.box-equip {
	min-width: 300px;
	max-width: 300px;
	min-height: 368px;
	max-height: 368px;
}

.img-size {
	/*width: 100%;
	height: 100%;
	object-fit: contain;*/
	margin: auto;
}

.panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.panel-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.panel-list {
	font-size: var(--font-size-sm);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.panel-item {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
	border-radius: 8px;
	background-color: var(--dark-100);
}

.box-monitoring {
	border-top-left-radius: unset;
	border-top-right-radius: unset;
}

.box-monitoring .box-body {
	display: flex;
	gap: 16px;
	padding: 16px;
	border-radius: 16px;
}

.equipment-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.equipment-list li {
	display: flex;
	justify-content: space-between;  
	align-items: center;
	gap: 8px;
	height: 46px;
	background-color: #434959;
	border: 1px solid #ABB2C5;
	border-radius: 8px;
	padding: 0 16px;
}

.date {
	color: #ABB2C5;
	margin-left: 8px;
}

.card-button .btn-group {
	display: grid;
	/*grid-template-columns: repeat(3, minmax(0, 1fr));*/
	grid-template-columns: 52% 1fr 1fr;
	gap: 16px;
}

.card-button .btn-group button:last-child {
	grid-column: span 3;
}

.btn-ax-trial {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.main-admin-dash {
	padding: 24px;
	border-radius: 24px;
	background-color: var(--dark-200);
}

.main-admin-dash .notification-wrap {
	top: -95px;
  left: 35px;
  z-index: 99;
  transform: unset;
}

.card-stats-equip {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
}

.card-stats-equip .stats-summary {
	height: auto;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
  width: 752px;
}

.card-stats-equip .stats-summary-item {
	width: 240px;
	height: 160px;
	align-items: center;
	justify-content: center;
}

.card-stats-equip .stats-summary-item:nth-of-type(n+3) {
	flex-grow: 1;
}


/*예약 일정*/
.card-reservation .stats-summary {
	gap: 16px;
}

.card-reservation .stats-summary-item {
	gap: 16px;
	width: 372px;
}

.card-reservation .badge {
	position: absolute;
	right: 16px;
}

.map-info iframe {
	border-radius: 8px;
}

/*실시간 관제 시스템*/
/*.card-monitoring .box {
	overflow-y: auto;
}*/

.card-monitoring .box-plant,
.card-monitoring .box-gmp {
	width: 704px;
	/*height: 624px;*/
	height: auto;
}

.card-monitoring .box-header {
  background-color: var(--dark-300);
  padding: 13px 16px;
  border-radius: 8px;
}

.monitoring-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	padding-right: 8px;
	overflow-y: auto;
}

.monitoring-list li {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 151px;
	height: 114px;
	padding: 16px;
	border-radius: 8px;
	border: 1px solid var(--gray-400);
	background: var(--dark-100);
	cursor: pointer;
}

.monitoring-list li.is-error {
	color: var(--color-text-primary);
	border-color: var(--color-error);
}

.monitoring-list li.is-error .badge {
	color: var(--color-error);
  background-color: var(--color-error-rgb-bg);
  border: 1px solid var(--color-error);
}

.monitoring-list li.is-warning {
	color: var(--color-text-warning);
	border-color: var(--color-warning);
}

.monitoring-list li.active {
	background-color: var(--color-bg-active);
	border-color: var(--color-border-active);
}

.monitoring-list li span:first-child {
	line-height: 1.2;
}

.monitoring-list .badge {
	width: fit-content;
	align-self: end;
}

/* 장비 상세 버튼 */
.btn-detail {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
  height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	/*width: max-content;*/
	opacity: 0;
	pointer-events: none;
	transition: .2s;
	z-index: 2;
}

.btn-detail:focus {
	box-shadow: none;
}

.btn-detail img {
	width: 16px;
	height: 16px;
}

.monitoring-list li::before {
	content: '';
	position: absolute;
	inset: 0;
	border: 1px solid var(--primary-accent);
	border-radius: 8px;
	background: rgba(13, 22, 35, 0.80);
	opacity: 0;
	transition: .2s;
}

.monitoring-list li:hover::before {
	opacity: 1;
}

.monitoring-list li:hover .btn-detail {
	opacity: 1;
	pointer-events: auto;
}

.box-plant .monitoring-list,
.box-gmp .monitoring-list {
	/*max-height: 530px;*/
	max-height: 596px;
}

/*Vision AI*/
.box-vision-ai .box-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.box-vision-ai .monitoring-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	height: 332px;
}

.box-vision-ai .monitoring-list li {
	width: 106px;
	height: 100px;
}

.recent-log {
	padding: 16px;
	border-radius: 8px;
	background-color: var(--dark-100);
}

/*최근 감지 로그*/
.recent-log {
	display: flex;
  flex-direction: column;
  gap: 16px;
}

.recent-log-header {
	display: flex;
	align-items: center;
	gap: 8px;
}

.recent-log .is-error {
	color: var(--color-text-primary);
	border-left: 1px solid var(--color-error);
}

.recent-log .is-operating {
	color: var(--color-text-primary);
	border-left: 1px solid var(--color-operating);
}

.log-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 176px;
	padding-right: 8px;
	overflow-y: auto;
}

.log-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 53px;
	padding: 16px;
	border-radius: 8px;
	background-color: var(--dark-200);
}

.current-time {
	position: relative;
	display: flex;
  gap: 4px;
  align-items: center;
	font-size: 14px;
}

.equip-status {
	display: flex;
	gap: 32px;
	padding: 9px 16px;
	border-radius: 8px;
	background-color: var(--dark-200);
}

.equip-status ul {
	display: flex;
	gap: 21px;
}

.equip-status ul li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}

.equip-status ul li:not(:last-child):after {
	content: "";
  position: absolute;
  right: -10px;
  width: 1px;
  height: 15px;
  background-color: #7A7F8D;
}

.alert-message {
	padding: 16px;
	border-radius: 8px;
	background-color: var(--dark-200);
	text-align: center;
	font-size: var(--font-size-sm);
}

/*비회원 메인*/
.main-guest section.main {
	flex-direction: row;
}

/*관리자 메인*/
.main-admin .main-title {
	display: flex;
	gap: 24px;
}

.admin-profill-menu {
	display: flex;
	gap: 16px;
	padding: 24px 16px;
	border-radius: 24px;
	background-color: var(--dark-100);
}

.admin-profill-menu .user-info {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 24px 16px;
	border-radius: 8px;
	background-color: var(--dark-200);
}

.admin-profill-menu ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.admin-profill-menu ul li button {
	width: 120px;
}

.card-notice {
	height: 338px;
}

.card-notice .table-wrap {
	height: 100%;
	overflow-y: auto;
}

.card-equipped {
	width: 1180px;
}

.swiper-equip {
	width: 100%;
}

.card-reservation .stats-summary-item > div {
	font-family: "GamtanRoad Dotum", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
	font-weight: 400;
}


.card-equipped .swiper-pagination {
	bottom: 60px !important;
	left: 62.4% !important;
	width: auto !important;
}