﻿/* 전체 페이지를 세로 플렉스 구조로 */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
/*    font-family: 'NotoSansKR-VariableFont_wght', sans-serif !important;*/
}

body {
    display: flex;
    flex-direction: column;
}

/* main 영역이 남는 공간을 유연하게 채우게 */
main.container-fluid {
    flex: 1;
}

/* footer 고정 (스크롤이 짧을 때는 하단 고정, 길면 자연스럽게 아래로 이동) */
.layout-footer {
    border-top: 2px solid #E3E8F0;
    text-align: center;
    padding: 10px 0;
}


.workd-break {
    white-space: normal !important; /* 줄바꿈 허용 */
    overflow-wrap: anywhere !important; /* 최신 브라우저에서 단어 기준 줄바꿈 */
    word-break: keep-all !important; /* 영어 단어 단위로만 끊기 */
}

.dx-overlay-wrapper,
.dx-overlay-content {
    z-index: 99999 !important;
}

/*@media (max-width: 767px) {*/
@media (max-width: 813px) {

    .ticket-table,
    .ticket-table thead,
    .ticket-table tbody,
    .ticket-table tr,
    .ticket-table td,
    .ticket-table th {
        display: block;
        width: 100%;
    }


    .ticket-table {
        border-top: 2px solid black;
    }

    .ticket-list-thead {
        display: none !important;
    }

    .ticket-row {
        display: block;
        padding: 0.7rem 0.5rem;
        border-bottom: 1px solid #ddd;
        text-align: left !important;
    }

        .ticket-row td {
            display: block;
            width: 100%;
            padding: 0.2rem 0;
            font-size: 0.95rem;
            border: none !important;
        }

        .ticket-row:nth-child(odd) {
            background-color: #ffffff;
        }

        .ticket-row:nth-child(even) {
            background-color: rgb(242, 242, 242);
        }

        .ticket-row .list-num,
        .ticket-row .list-sep {
            display: none !important;
        }

        .ticket-row .title-text {
            font-weight: bold;
            font-size: 1.1rem;
            margin-bottom: 0.3rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: inline-block;
            max-width: 550px;
        }


        .ticket-row .list-author,
        .ticket-row .list-date {
            display: inline;
            color: #555;
            font-size: 0.9rem;
            white-space: nowrap;
        }

        .ticket-row .list-author {
            position: relative;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: inline-block;
            max-width: 200px;
            padding-right: 10px;
            width: fit-content;
        }

            .ticket-row .list-author::after {
                content: '';
                position: absolute;
                right: 0;
                top: 50%;
                width: 1px;
                height: 14px;
                background: #ddd;
                transform: translateY(-50%);
            }


  

}

/*@media (min-width: 768px) {*/
@media (min-width: 814px) {
    .ticket-table {
        display: table;
        width: 100%;
        border-collapse: collapse;
    }

    .ticket-list-thead {
        display: table-header-group !important;
    }

    .ticket-row {
        display: table-row;
        text-align: center;
    }

        .ticket-row td {
            display: table-cell;
            padding: 0.5rem;
            align-items: center;
        }

    .ticket-table .list-author {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: table-cell !important;
        vertical-align: middle;
        max-width: 110px;
        padding: 0 8px;
    }


    .title-text {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        max-width: 400px;
    }


}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {
    
}

@media (min-width: 1400px) {
    
}

/*@font-face {
    font-family: 'NotoSansKR-VariableFont_wght';
    src: url('/css/NotoSansKR-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
*/