/* ÅëÇÕ CSS ½ºÅ¸ÀÏ - ¸ð¹ÙÀÏ ÃÖÀûÈ­ */
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

body {
    font-family: 'Pretendard-Regular', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* °¡·Î ½ºÅ©·Ñ ¹æÁö */
}

h2 {
    font-size: 1.5rem;
    font-weight: 700;
}

/* ÄÁÅ×ÀÌ³Ê ±âº» ³Êºñ ¼³Á¤ */
.container, .container-fluid {
    width: 100%;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Ȩ ÄÁÅ×ÀÌ³Ê - ¸ð¹ÙÀÏ ´ëÀÀ */
.home-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    min-height: 65vh;
    gap: 1rem;
    padding: 1rem;
    width: 100%;
    box-sizing: border-box;
}

/* µ¥ÀÌÅÍ ¹öÆ° - ¹ÝÀÀÇü Å©±â Á¶Á¤ */
.data-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    justify-content: center;
    width: 250px;
    height: 250px;
    max-width: 100%;
    border: 1px solid #dee2e6;
    border-end-end-radius: 48px;
    text-decoration: none;
    color: #333;
    background-color: #ffffff;
    font-size: 1.5rem;
    font-weight: bold;
    box-shadow: 0 6px 12px rgba(0,0,0,.15);
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    will-change: transform;
    cursor: pointer;
    box-sizing: border-box;
}

    .data-button:hover,
    .data-button:focus-visible {
        transform: translateY(-12px);
        border: 2px solid #ff0000;
        box-shadow: 0 10px 24px rgba(0,0,0,.2);
    }

    .data-button img {
        width: 160px;
        height: 160px;
        margin-bottom: 1rem;
        max-width: 70%;
        height: auto;
    }

/* ³×ºñ°ÔÀÌ¼Ç ¹Ù - ¸ð¹ÙÀÏ ÃÖÀûÈ­ */
.navbar {
    min-height: 90px;
    width: 100%;
}

    .navbar .navbar-brand {
        font-size: 1.25rem;
        flex-wrap: wrap;
    }

        .navbar .navbar-brand b {
            font-size: 1.55rem;
        }

        .navbar .navbar-brand img {
            margin-top: -5px;
            height: 36px;
            max-width: 100%;
        }

/* ³×ºñ°ÔÀÌ¼Ç ¸Þ´º °¡·Î ½ºÅ©·Ñ ó¸® */
.navbar-nav {
    flex-direction: row !important;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 5px;
}

    .navbar-nav .nav-item {
        flex-shrink: 0;
        margin-top: 0.5rem;
        margin-left: 0rem;
    }

    .navbar-nav .nav-link {
        white-space: nowrap;
        padding: 0.5rem 0.75rem;
    }

.footer {
    margin-top: 30px;
    min-height: 60px;
    width: 100%;
}

/* Å×ÀÌºí ·¡ÆÛ - ¸ð¹ÙÀÏ¿¡¼­ °¡·Î ½ºÅ©·Ñ */
.table-wrapper {
    overflow-x: auto;
    margin-bottom: 1rem;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

/* Å×ÀÌºí ½ºÅ¸ÀÏ - ¸ð¹ÙÀÏ ÃÖÀûÈ­ */
table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    min-width: 600px; /* ÃÖ¼Ò ³Êºñ º¸Àå */
    font-size: 0.85rem;
}

th, td {
    padding: 0.2rem 0.4rem;
    border: 1px solid #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    height: 2rem;
    vertical-align: middle;
    min-width: 8ch;
}

/* ¸ð¹ÙÀÏ ¹ÝÀÀÇü ¹Ìµð¾î Äõ¸® */
@media (max-width: 768px) {
    /* Ȩ ÄÁÅ×À̳ʸ¦ ¼¼·Î·Î ¹èÄ¡ */
    .home-container {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1rem 0.5rem;
    }

    /* µ¥ÀÌÅÍ ¹öÆ° Å©±â Á¶Á¤ */
    .data-button {
        width: 200px;
        height: 200px;
        font-size: 1.2rem;
    }

        .data-button img {
            width: 120px;
            height: 120px;
        }

    /* ³×ºñ°ÔÀÌ¼Ç ºê·£µå ÆùÆ® Å©±â Á¶Á¤ */
    .navbar .navbar-brand {
        font-size: 1rem;
    }

        .navbar .navbar-brand b {
            font-size: 1.2rem;
        }

    /* ³×ºñ°ÔÀÌ¼Ç ¸Þ´º ¸ð¹ÙÀÏ ÃÖÀûÈ­ */
    .navbar-nav {
        font-size: 0.85rem;
    }

        .navbar-nav .nav-link {
            padding: 0.4rem 0.6rem;
        }

    /* ÄÁÅ×ÀÌ³Ê Æеù Á¶Á¤ */
    .container, .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Å×À̺í ÆùÆ® Å©±â Ãà¼Ò */
    table {
        font-size: 0.75rem;
    }

    th, td {
        padding: 0.15rem 0.3rem;
        min-width: 6ch;
    }
}

@media (max-width: 480px) {
    /* ´õ ÀÛÀº È­¸é¿¡¼­ Ãß°¡ ÃÖÀûÈ­ */
    .home-container {
        gap: 1rem;
        padding: 0.5rem;
    }

    .data-button {
        width: 170px;
        height: 170px;
        font-size: 1rem;
    }

        .data-button img {
            width: 100px;
            height: 100px;
        }

        .data-button div {
            font-size: 1rem !important;
        }

    /* ³×ºñ°ÔÀÌ¼Ç ´õ ÀÛ°Ô */
    .navbar .navbar-brand {
        font-size: 0.9rem;
    }

        .navbar .navbar-brand b {
            font-size: 1rem;
        }

        .navbar .navbar-brand img {
            height: 30px;
        }

    /* ³×ºñ°ÔÀÌ¼Ç ¸Þ´º ´õ ÀÛ°Ô */
    .navbar-nav {
        font-size: 0.8rem;
    }

        .navbar-nav .nav-link {
            padding: 0.3rem 0.5rem;
        }

    /* ÄÁÅ×ÀÌ³Ê Æеù ´õ Ãà¼Ò */
    .container, .container-fluid {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* ³ª¸ÓÁö ±âÁ¸ ½ºÅ¸Àϵé... */
.nav-tabs {
    display: flex;
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

    .nav-tabs .nav-link {
        padding: 0.5rem 1rem;
        margin-right: 0.5rem;
        border: 1px solid transparent;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
        color: #007bff;
        text-decoration: none;
        font-size: 0.875rem;
        font-weight: 500;
        background-color: transparent;
        white-space: nowrap;
    }

        .nav-tabs .nav-link.active {
            background-color: #fff;
            border-color: #dee2e6 #dee2e6 #fff;
            color: #495057;
            font-weight: bold;
        }

.search-form {
    margin-bottom: 1rem;
}

    .search-form input {
        padding: .5rem;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 0.875rem;
        width: 100%;
        max-width: 300px;
        box-sizing: border-box;
    }

    .search-form button,
    .search-form .btn {
        padding: .5rem 1rem;
        font-size: 0.875rem;
        border-radius: 4px;
        border: 1px solid transparent;
        cursor: pointer;
    }

/* ¹öÆ° ½ºÅ¸ÀÏ */
.btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
    border: 1px solid transparent;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    box-sizing: border-box;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

    .btn-primary:hover {
        background-color: #0056b3;
        border-color: #0056b3;
    }

.btn-success {
    background-color: #28a745;
    border-color: #28a745;
    color: #fff;
}

    .btn-success:hover {
        background-color: #218838;
        border-color: #1e7e34;
    }

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

    .btn-secondary:hover {
        background-color: #5a6268;
        border-color: #545b62;
    }

.btn-outline-secondary {
    background-color: transparent;
    border-color: #6c757d;
    color: #6c757d;
}

    .btn-outline-secondary:hover {
        background-color: #6c757d;
        color: #fff;
    }

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

/* ÆäÀÌÁö³×ÀÌ¼Ç - ¸ð¹ÙÀÏ ´ëÀÀ */
.pagination {
    margin: 1.5rem 0;
    display: flex;
    justify-content: center;
    gap: .4rem;
    flex-wrap: wrap;
}

    .pagination a {
        padding: 4px 8px;
        background-color: #f0f0f0;
        color: #333;
        text-decoration: none;
        border-radius: 4px;
        font-size: 0.875rem;
        min-width: 32px;
        text-align: center;
        box-sizing: border-box;
    }

        .pagination a.active {
            background-color: #007bff;
            color: white;
            pointer-events: none;
        }

        .pagination a.prev::before {
            content: "¢¸";
        }

        .pagination a.next::after {
            content: "¢º";
        }

        .pagination a:hover:not(.active) {
            background-color: #e9ecef;
        }

.jump-to {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.875rem;
}

    .jump-to input {
        width: 60px;
        padding: 0.25rem;
        margin: 0 0.5rem;
        border: 1px solid #ccc;
        border-radius: 4px;
        text-align: center;
        font-size: 0.875rem;
        box-sizing: border-box;
    }

    .jump-to button {
        padding: 0.25rem 0.75rem;
        background: #007bff;
        color: white;
        border: 1px solid #007bff;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.875rem;
    }

        .jump-to button:hover {
            background: #0056b3;
            border-color: #0056b3;
        }

/* Á¤·Ä °ü·Ã ½ºÅ¸ÀÏ */
.sortable-header {
    cursor: pointer;
    position: relative;
    user-select: none;
    padding: 0.2rem 0.4rem;
}

    .sortable-header:hover {
        background-color: #f8f9fa;
    }

.sort-indicator {
    display: inline-block;
    margin-left: 2px;
    font-size: 0.8em;
    color: #666;
    font-weight: bold;
}

.column-search {
    width: calc(100% - 8px);
    padding: 2px 4px;
    border: 1px solid #ddd;
    border-radius: 2px;
    font-size: 0.75em;
    margin-top: 2px;
    display: block;
    box-sizing: border-box;
}

    .column-search:focus {
        border-color: #007bff;
        outline: none;
    }

.sort-controls {
    margin-bottom: 1rem;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.current-sorts {
    font-size: 0.9em;
    color: #666;
    flex: 1;
}

/* Çà »ö»ó ¹ø°¥¾Æ°¡±â */
tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.cell-text {
    display: block;
    width: 100%;
    padding-right: .8em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

/* Á¤º¸ ¾ÆÀÌÄÜ */
.info-icon {
    display: none;
    margin-left: 2px;
    color: #007bff;
    cursor: help;
    position: absolute;
    right: 0.15rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    z-index: 10;
}

/* ÅؽºÆ®°¡ ³ÑÄ¥ ¶§ info-icon Ç¥½Ã */
.has-overflow .info-icon {
    display: inline !important;
}

/* ¼¿¿¡ ¸¶¿ì½º È£¹ö½Ã info-icon Ç¥½Ã */
td:hover .info-icon {
    display: inline;
}

/* Çì´õÀÇ info-iconÀº Ç×»ó Ç¥½Ã */
th .info-icon {
    display: inline;
    position: static;
    margin-left: 2px;
    color: #007bff;
    cursor: help;
    font-size: 0.75rem;
    transform: none;
    z-index: 10;
}

th:hover .info-icon {
    display: inline;
}

th .info-icon:hover {
    color: #0056b3;
}

/* tdÀÇ overflow »óÅ¿¡¼­ info-icon °­Á¦ Ç¥½Ã */
td.has-overflow .info-icon {
    display: inline-block !important;
}

.hover-tooltip {
    position: absolute;
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    pointer-events: none;
    z-index: 1000;
    white-space: pre-line;
    word-wrap: break-word;
    max-width: 90vw;
    min-width: 200px;
    line-height: 1.4;
}

    .hover-tooltip br {
        display: block;
        margin: 0.2em 0;
    }

    .hover-tooltip ul {
        margin: 0;
        padding-left: 0.4em;
    }

    .hover-tooltip li {
        margin: 0.2em 0;
        line-height: 1.3;
    }

.pagination a.prev,
.pagination a.next {
    position: relative;
    width: 32px;
    height: 32px;
    display: inline-block;
    text-align: center;
    line-height: 32px;
}

    .pagination a.prev::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 6px 8px 6px 0;
        border-color: transparent #333 transparent transparent;
    }

    .pagination a.next::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 6px 0 6px 8px;
        border-color: transparent transparent transparent #333;
    }

    .pagination a.prev:hover::before {
        border-color: transparent #007bff transparent transparent;
    }

    .pagination a.next:hover::after {
        border-color: transparent transparent transparent #007bff;
    }

    .pagination a.prev:not([href])::before,
    .pagination a.next:not([href])::before {
        border-color: transparent #ccc transparent transparent;
    }

    .pagination a.prev:not([href])::after,
    .pagination a.next:not([href])::after {
        border-color: transparent transparent transparent #ccc;
    }

/* À¯Æ¿¸®Æ¼ Ŭ·¡½º */
.d-flex {
    display: flex;
}

.justify-content-between {
    justify-content: space-between;
}

.align-items-center {
    align-items: center;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

/* td À§Ä¡ ¼³Á¤ Á¦°Å - À§¿¡¼­ ÀÌ¹Ì Á¤ÀÇµÊ */