#visualization {
    width: 80%;
    max-width: 100%;
    min-height: 600px;
    margin: 20px auto;
    padding: 10px;
    box-sizing: border-box;
}

.visualization-row {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
}

.visualization-column {
    display: inline-block;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
}

@media (max-width: 800px) {
    .visualization-column {
        width: 100% !important;
        height: auto;
        z-index: 1;
    }
}

.filter-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.filter-dropdown select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 8px 12px;
    font-size: 16px;
    border-radius: 4px;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 10 5"><path fill="%23000" d="M0 0l5 5 5-5H0z"/></svg>'); /* 화살표 아이콘 */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 5px;
    cursor: pointer;
}

/* 화살표 클릭 영역 확장 */
.filter-dropdown {
    position: relative;
    display: inline-block;
}

.filter-dropdown select {
    width: 100%;
    padding-right: 30px;
}

/* 로딩 오버레이 스타일 */
.loading-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 230px;
    height: 180px;
    background-color: rgba(255, 255, 255, 0.8);
    border: 0;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #333;
    z-index: 9999;
}

/* Leaflet 컨트롤의 z-index 조정 */
.leaflet-control-container,
.leaflet-control-zoom,
.leaflet-control-attribution,
.leaflet-control-scale {
    z-index: 60 !important;
    position: relative;
}

/* 팝업 전체에 스타일 적용 */
.leaflet-popup.custom-popup-class .leaflet-popup-content-wrapper {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    padding: 10px;
}

/* 팝업 내용에 추가 스타일 적용 */
.leaflet-popup.custom-popup-class .leaflet-popup-content {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

@media print {
    #header-top,
    #header,
    #main-first,
    .location,
    .top-share,
    #footer{
        display: none;
    }

    body {
        margin: 5mm auto;
        font-size: 12px;
    }

    .highcharts-root {
        flex: 1;
        width: 70%;
        height: 400px !important;
        align-content: center !important;
    }

    #visualization {
        margin: 0 !important;
        padding: 0;
        width: 100% !important;
        box-sizing: border-box;
        transform-origin: top left;
        page-break-inside: avoid;
    }

    .visualization-row {
        margin: 0 !important;
        padding: 0 !important;
        display: block;
        flex-wrap: wrap;
        margin: 0 !important;
        page-break-inside: avoid;
    }

    .visualization-column {
        flex: 1;
        width: 100% !important;
        min-width: 200px;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
        page-break-inside: avoid;
    }

    .visualization-chart {
        width: 80% !important;
    }

    .sub-wrap {
        min-height: 10px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        page-break-inside: avoid;
    }

    .sub-wrap h1{
        height: 80px;
        place-self: center;
    }

    .sub-wrap h1::after{
        display: none;
    }
    img {
        max-width: 100%;
        height: auto;
        page-break-inside: avoid;
    }

    /* 불필요한 여백을 방지하기 위해 다른 항목에 대한 스타일 추가 */
    .leaflet-popup,
    .leaflet-popup-content {
        font-size: 14px;
        line-height: 1.6;
        color: #333;
        padding: 10px;
    }

    /* 인쇄 시 불필요한 요소들 숨기기 */
    .loading-overlay {
        display: none !important;
    }

    .filter-dropdown {
        display: none !important;
    }

    /* 지도 관련 스타일 최적화 */
    .leaflet-control-container,
    .leaflet-control-zoom,
    .leaflet-control-attribution,
    .leaflet-control-scale {
        z-index: 60 !important;
    }

    .pagination{
        page-break-inside: avoid;
    }

    /* 반응형 테이블 스타일 비활성화 */
    table.responsive tbody tr,
    table.responsive tbody th,
    table.responsive tbody td,
    table.responsive tfoot tr,
    table.responsive tfoot th,
    table.responsive tfoot td {
        display: table-row !important;
        text-align: center !important;
        font-size: 18px !important;
    }

    table.responsive thead{
        display: table-header-group!important;
    }

    table.responsive tbody {
        display: table-row-group;
    }

    table.responsive tbody tr {
        page-break-inside: avoid;
    }

    /* th에 배경색 적용 */
    table.responsive thead th {
        padding: 18px 20px !important;
        background-color: #f5f9ff !important;
        color: #111 !important;
        font-weight: 600 !important;
        text-align: center !important;
        border-bottom: 1px solid #dfe4eb !important;
        vertical-align: middle !important;
        height: auto !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* 반응형 테이블에서 사용된 요소를 기본 테이블 스타일로 변경 */
    table.responsive tbody td {
        padding: 14px 20px !important;
        text-align: center !important;
        display: table-cell !important;
        border-bottom: 1px solid #dfe4eb !important;
        vertical-align: middle !important;
    }

    table.responsive {
        border-collapse: collapse;
        width: 100%;
        table-layout: fixed;
    }

    table.responsive th,
    table.responsive td {
        text-align: center !important;
        padding: 10px !important;
        vertical-align: middle !important;
    }

    /* th와 td 간격 맞추기 */
    table.responsive thead th,
    table.responsive tbody td {
        border-bottom: 1px solid #dfe4eb !important;
        text-align: center !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
        letter-spacing: -0.1px !important;
        height: 58px !important;
    }

    /* 반응형 테이블에서 display: block 처리된 부분을 원래 상태로 되돌리기 */
    table.responsive tbody td .subject,
    table.responsive tbody th,
    table.responsive tfoot td {
        font-size: 18px !important;
        font-weight: 400 !important;
        line-height: 130% !important;
    }

    /* 스크롤 테이블 관련 스타일 */
    .table-scroll-wrap {
        overflow: visible !important;
        padding: 0 !important;
    }

    .table-scroll-wrap .table {
        width: 100% !important;
        min-width: 0 !important;
    }

    caption {
        display: block !important;
        width: auto !important;
        height: auto !important;
        font-size: initial !important;
    }

    tbody td::before {
        display: none !important;
    }

    table.responsive tbody tr::after {
        display: none !important;
    }
    @page {
        size: A4;
        margin: 10mm;
    }

    .table-scroll-wrap {
        width: 100% !important;
        overflow: visible !important;
    }
    * {
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .sub-wrap,
    .visualization-row,
    .visualization-column {
        margin: 0 !important;
        padding: 0 !important;
        page-break-inside: avoid;
        page-break-before: avoid;
        page-break-after: avoid;
    }
}