body {
	margin-top: 10px;
	padding: 0;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: 1fr;
	height: 100vh;
}
* {
	user-select: none;
	margin: 0;
	padding: 0;
	text-decoration: none;
	color: inherit; /* 기본 색상으로 설정 */
}

a {
	color: inherit; /* 링크의 색상을 상속받도록 설정 */
	text-decoration: none; /* 밑줄 제거 */
}
.main-container {
	display: flex;
	align-items: left;
	width: 100%;
	height: 100%;
}
.left-container {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-right: 10px;
	width: 500px; /* 좌측 레이아웃의 너비를 지정합니다 */
	height: 900px; /* 좌측 레이아웃의 높이를 지정합니다 */
	overflow: hidden; /* 이미지를 클리핑하여 원하는 부분만 보이게 합니다 */
	position: relative;
}
.left-container img {
	position: absolute;
	top: -180px; /* 이미지의 top 지점을 조정합니다 */
	left: -80px; /* 이미지의 left 지점을 조정합니다 */
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
}
.image-text {
	position: absolute;
	top: 2px;
	left: 10px;
	color: white;
	background-color: rgba(0, 0, 0, 0.7);
	padding: 10px;
	font-size: 16px;
}
.container {
	flex: 0 0 auto;
	width: 1000px;
	height: 900px;
	border: 2px solid black;
	position: relative;
	box-sizing: border-box;
	margin: 0 20px;
}
.right-container {
	display: flex;
	flex-direction: column;
	align-self: flex-start;
}
.button-container {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	width: 100%;
}
.button-container button {
	margin-bottom: 5px;
	padding: 5px;
	font-size: 14px;
	width: 50%;
	cursor: pointer;
}
.select-container {
	margin-top: -40px;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 30px;
	margin-bottom: 30px;
}

.select-container select {
	width: 100%;
	height: 30px;
	font-weight: bold;
	line-height: 30px; /* 텍스트 수직 정렬 */
	padding: 0 10px; /* 좌우 패딩 설정 */
	font-size: 14px; /* 글자 크기 설정 */
	border: 1px solid #ccc; /* 테두리 설정 */
	border-radius: 4px; /* 둥근 테두리 */
	background-color: #C7E1DD; /* 배경색 설정 */
	cursor: pointer; /* 마우스 포인터 설정 */
}

.color-display {
	margin-top: 20px;
	margin-bottom: 10px;
	width: 100px;
	height: 30px;
	border: 2px solid black;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: Arial, sans-serif;
	font-size: 14px;
}
.equipment {
	position: absolute;
	border: 2px solid black;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: Arial, sans-serif;
	font-size: 24px;
	box-sizing: border-box;
	background-color: #f9f9f9; /* 배경 색상 추가 */
}
.equipment-num {
	position: absolute;
	font-family: Arial, sans-serif;
	font-size: 14px;
}
.line {
	position: absolute;
	height: 4px;
	background-color: currentColor;
	cursor: pointer;
}
.line .delete-button {
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: blue;
	color: white;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
}
.connector { /* 접점 */
	position: absolute;
	width: 6px;
	height: 6px;
	border: 1px solid black;
	background-color: white;
	cursor: pointer;
	z-index: 10; /* 접점이 다른 요소보다 항상 위에 위치하도록 설정 */
}
.highlight {
	background-color: yellow !important;
}
.snap-active {
	background-color: blue !important;
}
.dimension {
	position: absolute;
	margin-top: -5px;
	left: -30px;
	font-family: Arial, sans-serif;
	font-size: 12px;
}
.snap-line {
	position: absolute;
	width: 920px;
	height: 0;
	border-top: 2px dashed #999;
}
.snap-line-vertical {
	position: absolute;
	height: 530px;
	width: 0;
	border-left: 2px dashed #999;
}
.highlight-snap {
	position: absolute;
	background-color: rgba(128, 0, 128, 0.3); /* purple 색상 */
	z-index: 5;
}
.guide-line {
	position: absolute;
	width: 1px;
	border-left: 1px dashed green;
}
.horizontal-line {
	position: absolute;
	width: 100%;
	height: 1px;
	/* border-top: 1px solid purple; */
}
.input-container {
	display: flex;
	flex-direction: column;
}
.input-container label,
.input-container input,
.input-container button,
.input-container select {
	margin-bottom: 5px;
}
.input-group {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
}
.input-group label {
	margin-right: 10px;
}
.input-group input {
	margin-right: 5px;
	padding: 5px;
	height: 16px; /* 인풋의 높이 조정 */
	font-size: 16px;
}
.input-group select {
	margin-right: 5px;
	padding: 5px;
	height: 30px; /* 인풋의 높이 조정 */
	font-size: 16px;
}
.input-group button {
	padding: 0px 10px;
	height: 30px; /* 버튼의 높이 조정 */
	font-size: 16px;
	cursor: pointer;
}
.toggle-text {
	display: none;
	position: absolute; /* 절대 위치 지정 */
	top: 50%; /* 상단에서 50% 떨어진 위치 */
	left: 50%; /* 좌측에서 50% 떨어진 위치 */
	transform: translate(-50%, -50%); /* 정중앙으로 이동 */
	background-color: white; /* 배경 색상 */
	border: 2px solid purple; /* 테두리 */
	padding: 40px; /* 내부 여백 */
	font-size: 16px; /* 폰트 크기 */
	z-index: 1000; /* 다른 요소들보다 위에 표시되도록 설정 */
	max-width: 90%; /* 최대 너비 설정 */
	max-height: 90%; /* 최대 높이 설정 */
	overflow: auto; /* 내용이 넘칠 경우 스크롤 생성 */
	line-height: 30px;
}
/* 상태 표시창 */
.status-container {
	position: absolute;
	bottom: 10px;
	left: 10px;
	padding: 10px;
	background-color: rgba(128, 128, 128, 0.5);
	color: white;
	border-radius: 5px;
	font-size: 16px;
	border: 1px dashed white;
	z-index: 1000;
}
/* 연결 상태 표시창 스타일 추가 */
.connection-status-container {
	position: fixed;
	bottom: 10px;
	left: 10px;
	padding: 10px;
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	border-radius: 5px;
	font-size: 16px;
	z-index: 1000;
	max-height: 100px; /* 최대 높이 설정 */
	overflow-y: auto; /* 세로 스크롤바 추가 */
}
/* tb4, tb5는 전체 도면 공통.. */
.tb4, .tb5 {
	width: 790px;
	height: 60px;
	left: 105px;
	display: flex;
	flex-wrap: wrap;
}
.tb4 {
	top: 68px;
}
.tb5 {
	top: 768px;
}
.tb4 .half, .tb5 .half {
	width: 100%;
	height: 50%;
	display: flex;
}
.tb4 .half, .tb5 .half {
	flex-wrap: nowrap;
}
.tb4 .half.top, .tb5 .half.top {
	border-bottom: 1px solid black;
}
.tb4 .half.bottom, .tb5 .half.bottom {
	border-top: 1px solid black;
}
.tb4 .half .cell, .tb5 .half .cell {
	flex: 1 0 calc(100% / 29);
	height: 100%;
	border-left: 1px solid black;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
}
.tb4 .half .cell:first-child, .tb5 .half .cell:first-child {
	border-left: none;
}

/* 체크 박스에 의한 CSS 변화 */
.container.background-image {
	background-image: url('./contents/sequence/circuit/back-img-wood-new.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.tb4.background-image, .tb5.background-image {
	background: #ccc;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.row1 .eocr.background-image,
.row1 .f1.background-image, .row1 .f2.background-image,
.row1 .t1.background-image, .row1 .t2.background-image,
.row2 .mc1.background-image, .row2 .mc2.background-image, .row2 .mc3.background-image, .row2 .mc4.background-image,
.row2 .k1.background-image, .row2 .k2.background-image, .row2 .k3.background-image, .row2 .k4.background-image,
.row1 .k5.background-image {
	background: #999;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.plc.background-image {
	background: #ccc;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.line.background-image {
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}