.capture-thumbnail {
cursor: pointer;
max-width: 154px; /* 썸네일 크기 */
}


#capture-results {
    cursor: e-resize;
    padding: 0px 6px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; 
    overflow-x: auto;
    overflow-y: hidden;
    width: 540px; /* col0과 동일한 너비 */
    max-width: 540px;
    border-right: 0.6px solid black;
    border-bottom: 0.6px solid black;
    height: 170px;
    box-sizing: border-box;
    margin: 0; /* 혹시 모를 마진 제거 */
}
#capture-results > div {
    flex: 0 0 auto;
}

.capture-thumbnail {
cursor: pointer;
height: 150px; /* 높이 제한 */
}
.capture-item {
/* 썸네일 이미지 크기와 동일하게 설정하여 캡처된 썸네일이 일정한 공간을 차지하도록 합니다. */
width: 154px;          
height: 154px;
margin-top: 6px; /* 항목 간 간격 */
margin-right: 6px; /* 항목 간 간격 */
flex-shrink: 0; /* 공간이 부족해도 줄어들지 않도록 고정 */
}
        
        /* 💡 모달 스타일 */
        .modal {
            display: none; /* 기본 숨김 */
            position: fixed;
            z-index: 2000; /* 가장 위로 */
            padding-top: 50px;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
            overflow: auto;
            background-color: rgba(225,225,225,0.9); /* 검은색 배경 투명도 90% */
        }
        .modal-content {
            display: flex;
            justify-content: center; /* 수평 중앙 정렬 */
            align-items: center;
            flex-direction: column;  /* 이미지와 버튼을 수직으로 배열 */
            height: 70vh; /* 화면 높이를 넘지 않도록 제한 */
            width: auto;     /* 이미지 크기에 맞게 자동 조정 */
            pointer-events: auto; /* 이벤트 차단 방지 */

        }

        .modal-content img {
            margin-top: 90px;
            display: block; 
            object-fit: contain;
            width: 70vw;
            height: 70vh; /* 화면 높이의 90%를 넘지 않음 (세로 중앙 정렬 보조) */
                pointer-events: auto; /* 이미지 클릭 가능하도록 */

        }

/* 모달 이미지 초기 숨김 */
#modal-image {
    display: none;
    margin-top: 120px;
    object-fit: contain;
    width: 70vw;
    height: 85vh;
}

/* 모달이 열렸을 때만 이미지 표시 */
#image-modal[style*="display: block"] #modal-image {
    display: block;
}

        #modal-download-area,
        #modal-download-area a img{
            position: absolute; 
            top: 10px; 
            right: 25px; /* 닫기 버튼(15px)보다 왼쪽으로 25px 더 이동 */
            padding: 0;
            z-index: 2001; 
            height: 14px;
        }

#modal-download-link svg {
  width: 16px;
  height: 16px;
  display: block;
}

#modal-download-link .cls-1 {
  fill: black;
}

#modal-download-link:hover .cls-1 {
  fill: #919191; /* hover 시 색상 */
}
/* 닫기 버튼 스타일 */
.close {
    cursor: pointer;
    display: inline-block;
}

.close svg {
    width: 12px;
    height: 17px;
    display: block;
}

.close-icon {
    fill: black;
}

/* 호버 효과 */
.close:hover .close-icon {
    fill: #919191;
}
#modal-download-area {
    display: flex;
    gap: 15px; /* 아이콘 사이 간격 */
    align-items: center;
    justify-content: flex-end; /* 오른쪽 정렬 */
    padding: 10px 0px;
}