.switcher-body .form-check .form-check-input,
.switcher-body .form-check .form-check-label {
    cursor: pointer;
    color: white;
    accent-color: dodgerblue;
}

/*table.table tbody tr.selected td {*/
#labresult-list tbody tr.selected td, 
#labresult-item tbody tr.selected td {
    /*color: red;*/
    font-weight: 700;
    /*color: blue;*/
    background-color: lightgray;
}

/*로그인*/
#login-button {
    font-size: 18px;
    vertical-align: central;
}

/* 메인 배너 */
.main-video {
/*    height: 100%;*/
/*    width: 100%;*/
    object-fit: cover;
    justify-content: center;
    align-items: center;    
}

/*video[poster] {*/
    /* 포스터 이미지의 크기를 비디오 영상에 꽉차도록 */
    /*height: 100%;
    width: 100%;
}*/

/*탑바*/
.kcl-logo {
    width: 100%;
    height: 43px !important;
}

/* 메인 */
input, username password {
    width: 50%;
    padding: 12px 20px 10px 10px;
    border: 0;
    border-radius: 5px;
}

.lab-dept {
    width: 50%;
    padding: 12px 20px 10px 10px;
    border: 0;
    border-radius: 3px;
}

/*검색조건*/
.select-date {
    margin-top: 1px;
    height: 28px;
}

#select-date-type {
    margin-top: 1px;
    height: 28px;
    width: 120px !important;
    /*font-size: 13px;*/
}

.select-labkind {
    margin-top: -5px;
    margin-left: 10px;
}

.select-labkind-toggle {
    cursor: pointer;
    /*color: midnightblue;*/
    /*background-color: white !important;
    accent-color: midnightblue !important;*/
}

/*영역*/
.labreceipt-area {
    /*width: 40%;*/
}

.labresult-area {
    /*width: 60%;*/
}

.labreceipt-area, .labresult-area {
    margin-top: 5px !important;
}

.labreceipt-header, .labresult-header {
    margin-top: -10px !important;
}

/*dd*/
/* 1) 스크롤 컨테이너 */
.labresult-list-custom-scroll {
    max-height: 725px; /* 필요 높이 */
    overflow: auto; /* 세로·가로 스크롤 허용 */
    overflow-x: hidden; /* 가로 스크롤 방지 */
    position: relative; /* sticky 기준점 */    
}

/* 2) thead th를 sticky 처리 */
.labresult-list-custom-scroll thead th {
    position: sticky !important;
    top: 0; /* 컨테이너 상단에 고정 */
    background: #fff; /* 헤더 뒤쪽 콘텐츠 가리지 않게 배경색 지정 */
    z-index: 10; /* 겹침 방지 */
    /* border-bottom: 1px solid #ddd;  필요 시 구분선 추가 */
}

.labresult-list-custom-scroll tr {
    height: 8px; /*20px;*/
}

#labresult-item {
    width: 100%;
    /*background-color: yellow;*/
}

/* 1) 스크롤 컨테이너 */
.labresult-item-custom-scroll {
    max-height: 654px; /*448px;*/ /*492px;*/ /* 필요 높이 */
    overflow: auto; /* 세로·가로 스크롤 허용 */
    position: relative; /* sticky 기준점 */
}

/* 2) thead th를 sticky 처리 */
.labresult-item-custom-scroll thead th {
    position: sticky !important;
    top: 0; /* 컨테이너 상단에 고정 */
    background: #fff; /* 헤더 뒤쪽 콘텐츠 가리지 않게 배경색 지정 */
    z-index: 10; /* 겹침 방지 */
    /* border-bottom: 1px solid #ddd;  필요 시 구분선 추가 */
}

.labresult-item-custom-scroll tr {
    height: 8px; /*20px;*/
}

/*접수목록*/
/*.labresult-list {
    
}*/


/*접수정보*/
.labresult-receipt-info-header {
    /*font-size: 12.5px;*/
    font-weight: normal;
    width: 100px;
    background-color: yellow; /*whitesmoke;*/
}

.labresult-receipt-info-value {
    /*font-size: 12.5px;*/
    width: 150px;
}

/*결과목록*/
.labresult-item-history {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    width: 70px;
    height: 20px;
    font-size: 12px !important;
    border-radius: 4px;
    background-color: mediumseagreen;
    color: white;
}

#labresult-list, #labresult-item {
    table-layout: fixed;
}

#labresult-item tbody tr td.result-high {
    font-weight: 700;
    color: red;
}

#labresult-item tbody tr td.result-low {
    font-weight: 700;
    color: blue;
}

.result-decision {
    align-items: center;
    /*vertical-align: middle;*/
}

.result-decision-danger {
    font-weight: bold;
    font-size: 7px;
    color: red;
}

.labresult-item-notreported {
    color: red !important;
    background-color: lightyellow !important;
}

.result-hpv .result-std {
    table-layout: fixed;
}

.result-hpv th, .result-hpv td
.result-std th, .result-std td {
    font-size: 12px;
    letter-spacing: 0px;
    text-align: center;
}

.result-std th {
    background-color: lightcyan;
}

.btn-search {
    border: none;
    background-color: dodgerblue;
}

.btn-print {
    border: none;
    /*    height: 32px;*/
    background-color: dodgerblue;
}

.labresult-download {
    
}

/**/
.vertical-text {
    writing-mode: vertical-rl; /* 세로 방향, 오른쪽에서 왼쪽으로 */
    text-orientation: upright; /* 글자를 똑바로 세움 */
    /*border: 1px solid #000;*/ /* 시각적 확인용 */
    /*padding: 10px;*/
}


/* 검사결과 인쇄 */
/*function printContents(contentsId) {
    var printContents = document.getElementById(contentsId).innerHTML;
    var originalContents = document.body.innerHTML;
    document .body.innerHTML = printContents;
    window .print();
    document .body.innerHTML = originalContents;
}*/

@media print {
    body * {
        visibility: hidden;
    }

    #labresult-print /*, #printArea*/ * {
        visibility: visible;
    }

    #labresult-print /*#printArea*/ {
        position: absolute;
        left: 0;
        top: 0;
    }
}

/*새 창을 열어서 인쇄 ⇒ 창 크기 지정 가능 (실무에서 가장 많이 사용)
function printContents(contentsId) {
    const contents = document.getElementById(contentsId).innerHTML;

    const printWindow = window.open(
        "", 
        "printWindow",
        "width=800,height=900,top=100,left=100"
    );

    printWindow.document.write(`
        <html>
        <head>
            <title>Print</title>
        </head>
        <body>${contents}</body>
        </html>
    `);

    printWindow.document.close();
    printWindow.focus();
    printWindow.print();
}

✔ 가능한 크기 옵션들

width=800
height=900
top=100
left=200
resizable=yes
scrollbars=yes

"width=900,height=1000,top=50,left=50,resizable=yes"

브라우저에 따라 팝업 차단이 걸릴 수 있습니다.
특히 Chrome은 사용자 상호작용(버튼 클릭) 없이 열리는 팝업을 막습니다
*/

/*
CSS 이용 가능

#printArea {
  padding: 20px;
  font-size: 16px;
  background: #fff;
}

@media print {
  body {
    margin: 0;
  }
}

function openPrintWindow(contentsId) {
    const contents = document.getElementById(contentsId).innerHTML;

    // 새 창(팝업) 옵션 설정
    const printWindow = window.open(
        "",
        "printWindow",
        "width=900,height=1100,top=50,left=50,resizable=yes,scrollbars=yes"
    );

    // 공통 스타일 또는 CSS 파일 포함 (링크 가능)
    const styles = `
        <style>
            body {
                font-family: Arial, sans-serif;
                margin: 20px;
                padding: 0;
            }
            h1 { font-size: 24px; }
            p { font-size: 16px; }
        </style>
    `;

    printWindow.document.write(`
        <html>
        <head>
            <title>Print Preview</title>
            ${styles}
            <!-- 외부 CSS도 지원 -->
            <!-- <link rel="stylesheet" href="/css/main.css"> -->
        </head>
        <body>
            ${contents}
        </body>
        </html>
    `);

    printWindow.document.close();

    // 이미지/폰트 로딩 후 실행하기 위해 딜레이
    printWindow.onload = () => {
        printWindow.focus();
        printWindow.print();
    };
}

✔ 1. 인쇄용 새 창 크기 지정
width=900,height=1100,top=50,left=50

✔ 2. 기존 페이지 DOM을 건드리지 않음
이벤트나 UI가 절대 망가지지 않음.

✔ 3. 스타일 가지는 div 출력 가능
내부 스타일
외부 CSS <link> 추가 가능

✔ 4. 인쇄 전에 새 창에서 미리보기 가능
✔ 5. 이미지/폰트 로딩 완료 후 인쇄 (onload)
*/

/*
인쇄 팝업 + A4 스타일 적용

function openPrintWindow(contentsId) {
    const contents = document.getElementById(contentsId).innerHTML;

    const printWindow = window.open(
        "",
        "printWindow",
        "width=1000,height=1200,top=50,left=50,resizable=yes,scrollbars=yes"
    );

    const styles = `
        <style>
        <!-- A4 사이즈 설정 -->
        @page {
            size: A4;
            margin: 5mm;
        }

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        <!-- 제목 -->
        .print-title {
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 15px;
        }

        <!-- 표 기본 스타일 -->
        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }

        th, td {
            border: 1px solid #333;
            padding: 6px;
            text-align: left;
        }

        thead {
            background: #f0f0f0;
        }

        <!--  페이지 넘어갈 때 머리글 반복 -->
        thead {
            display: table-header-group;
        }

        <!--  자동 페이지 분리 (줄넘김) -->
        tr {
            page-break-inside: avoid;
        }

        <!--  여백 매우 최소화 -->
        @media print {
            body {
                margin: 0;
            }
        }

        </style >
    `;

    printWindow.document.write(` <html> <head> <title>검사 결과</title> ${styles} </head> <body>${contents}</body> </html> `);

    printWindow.document.close();

    printWindow.onload = () = > {
        printWindow .focus();
        printWindow .print();
    };
}

✔ A4 사이즈 지정
@page { size: A4; margin: 5mm; }

✔ 여백 최소
5mm는 대부분의 프린터에서 가능한 최소 여백입니다.

✔ 표 자동 줄넘김
thead는 페이지가 넘어가도 반복되고
tr은 페이지 중간에 잘리지 않도록:

thead { display: table-header-group; }
tr { page-break-inside: avoid; }

✔ 제목 “검사 결과” 자동 포함
HTML 구조에서 <h1 class="print-title">검사 결과</h1>.
*/


#slide-2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


#slide-4 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#cap-image {
    margin-top: 100px;
}