/*
  오세문 / 메인
*/

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}
.state-bar {
    display: flex;                /* flex 레이아웃 적용 */
    align-items: center;          /* 아이콘과 메시지를 수직으로 가운데 정렬 */
    gap: 200px;                    /* 아이콘과 메시지 사이 간격 설정 */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px; /* 상태바 높이 */
    background-color: #333;
    color: white;
    /*
    justify-content: space-between;  메시지와 아이콘을 양쪽 끝에 배치 
    */
    padding-left: 20px; /* 메시지의 왼쪽 여백 */
    padding-right: 20px; /* 아이콘과 끝의 간격 */
    font-size: 14px;
    z-index: 9999;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* 상단 그림자 효과 */
}

#status-message {
    white-space: nowrap; /* 메시지가 한 줄로 유지되도록 설정 */
    overflow: hidden; /* 내용이 길면 숨김 처리 */
    text-overflow: ellipsis; /* 숨겨진 내용에 '...' 표시 */
    max-width: calc(100% - 80px); /* 아이콘과 여백을 제외한 영역 */
}

.settings-icon {
    width: 20px;
    height: 20px;
    background-image: url('https://img.icons8.com/material-outlined/24/ffffff/settings.png'); /* 설정 아이콘 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    flex-shrink: 0; /* 아이콘 크기를 줄이지 않음 */
    margin-right: 40px; /* 아이콘이 오른쪽에서 20px 안쪽에 위치 */
}

#config-dialog {
    display: none;
}

/* 부모 div 스타일 */
.parent {
    display: flex; /* Flexbox를 사용하여 나란히 배치 */
    width: 100%; /* 부모의 너비를 100%로 설정 */
    height: 40px; /* 높이를 50px로 설정 */
    background-color: #212E3C; /* 연한 배경 */
    border: 0px solid #ccc; /* 연한 검정 테두리 */
    box-sizing: border-box; /* 테두리를 포함한 크기 계산 */
}

/* 자식 div 스타일 */
.child {
    display: flex; /* 내용 중앙 정렬을 위해 사용 */
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬 */
    border: 0px solid #ccc; /* 연한 검정 테두리 */
    box-sizing: border-box; /* 테두리를 포함한 크기 계산 */
    background-color: #212E3C; /* 연한 회색 배경 */
    color: white;
}

.child-1 {
    width: 20%;
    justify-content: left; /* 가로 왼쪽 정렬 */
    padding-left:30px;
}

.child-2 {
    width: 60%;
}

.child-3 {
    width: 20%;
}

.layout-border-highlight {
    cursor: col-resize;
}

/* #toolbar 안의 td에만 hover 효과 적용 */
#toolbar td:hover {
    background-color: #333; /* 배경색 반전 */
    color: #fff; /* 텍스트 색상 반전 */
    cursor: pointer; /* 커서를 포인터로 변경 */
    transition: all 0.3s ease; /* 부드러운 전환 효과 */
}

/* 비활성화된 td의 hover 효과 */
#toolbar td[style*="color:#d3d3d3"]:hover {
    background-color: #999; /* 비활성 상태의 배경색 반전 */
    color: #fff; /* 텍스트 색상 반전 */
}