body {
    background-color: black;
}
#attendButton, #leaveButton {
    position: fixed; /* 화면 상단에 고정 */
    top: 10px; /* 상단에서 10px 아래 */
    z-index: 5000; /* 다른 요소들 위에 오도록 z-index 설정 */
}

#attendButton {
    left: 10px; /* 왼쪽에서 10px 떨어진 위치에 배치 */
}

#leaveButton {
    right: 10px; /* 오른쪽에서 10px 떨어진 위치에 배치 */
}

#terminalOutput {
    position: fixed; /* 화면 하단에 고정 */
    bottom: 0; /* 하단에서 0px */
    left: 0; /* 왼쪽에서 0px */
    right: 0; /* 오른쪽에서 0px */
    height: 200px; /* 터미널 출력 창의 높이 */
    background-color: black; /* 배경색 설정 */
    color: white; /* 텍스트 색상 설정 */
    overflow: auto; /* 내용이 많을 경우 스크롤 가능하도록 설정 */
    padding: 10px; /* 내부 여백 설정 */
}

#map-container1 {
    position: fixed;
    width: 97vw;
    height: 97vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#map-container3 {
    position: absolute;
    display: grid;
    height: 97vmin;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;


    border-radius: 5%;
}

#map-container2 {
    position: absolute;
    width: 97vmin;
    height: 97vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(38, 38, 38);
    border: solid 10px rgb(26, 26, 26);
    border-radius: 5%;
}

#map {
    position: absolute;

    width: 95vmin;
    height: 95vmin;
    border-radius: 50%;
    border: 5px solid black;
}



#map:before, #map:after {
    content: '';
    position: absolute;
    background-color: red;
    z-index: 2000; /* 추가된 부분 */
}

#map:before {
    z-index: 2000; /* 추가된 부분 */
    width: 100%;
    height: 2px;
    top: 50%;
}

#map:after {
    z-index: 2000; /* 추가된 부분 */
    width: 2px;
    height: 100%;
    left: 50%;
}

#zoomIn {
    background-image: url('plus2.png'); /* 십자 표시 이미지의 경로를 지정합니다 */
    border: solid 1px rgb(52, 2, 2);
    background-size: contain;
    position: absolute;
    display: grid;
    top: 0%;
    left: 0%;
    width: 16vmin;
    aspect-ratio: 1 / 1;
    min-height: 0;
    background-color: rgb(132, 0, 0);
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    color: black;
    z-index: 3000; /* 추가된 부분 */
}
#zoomOut {
    position: absolute;
    border: solid 1px rgb(52, 2, 2);
    background-image: url('minus2.png'); /* 십자 표시 이미지의 경로를 지정합니다 */
    background-size: contain;
    display: grid;
    top: 0%;
    right: 0%;
    width: 16vmin;
    aspect-ratio: 1 / 1;
    min-height: 0;

    border-radius: 50%;
    cursor: pointer;
    background-color: rgb(132, 0, 0);
    color: black;

    text-align: center;
}
#refresh {
    background-image: url('gps4.png'); /* 십자 표시 이미지의 경로를 지정합니다 */
    border: solid 1px rgb(52, 2, 2);
    background-size: contain;
    position: absolute;
    display: grid;
    bottom: 0%;
    left: 0%;
    width: 16vmin;
    aspect-ratio: 1 / 1;
    min-height: 0;
    background-color: rgb(132, 0, 0);
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    color: black;
    z-index: 3000; /* 추가된 부분 */
}

#circle {
    background-image: url('loc4.png'); /* 십자 표시 이미지의 경로를 지정합니다 */
    border: solid 1px rgb(52, 2, 2);
    background-size: contain;
    position: absolute;
    display: grid;
    bottom: 0%;
    right: 0%;
    width: 16vmin;
    aspect-ratio: 1 / 1;
    min-height: 0;
    background-color: rgb(132, 0, 0);
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    color: black;
    z-index: 3000; /* 추가된 부분 */
}
button:active {
    background-color: #ddd;
}