html, body {
    margin: 0; padding: 0; box-sizing: border-box;
    font-family: 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    background-color: #1F1F1F; /* 다크 배경 */
    color: #e0e0e0; /* 밝은 글자색 */
    font-size: 14px; line-height: 1.5;
}
*, *::before, *::after { box-sizing: inherit; }
a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; padding-left: 0; margin: 0; }
input, textarea, select, button { font: inherit; color: inherit; margin: 0; padding: 0; border: none; background: none; outline: none; }
.container { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; }

.card {
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #1e1e1e; /* 카드 배경 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.bj-thumbnail img { width: 100%; height: auto; object-fit: cover; }
.bj-thumbnail { position: relative; overflow: hidden; border-radius: 10px; }
.bj-thumbnail img { border-radius: 10px; }
.bj-info { padding-top: 3px; }
.bj-info .bj-name { font-weight: 600; margin-bottom: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #f1f1f1; }

.py-4 { padding-bottom: 0 !important; }
.bj-name { font-weight: bold; color: #f1f1f1; }
.viewer-icon { color: #ff5252; }
.time-text { color: #b0b0b0; font-size: 0.9rem; }
.bj_list_div { margin-bottom: 5px; }

#loading {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(18, 18, 18, 0.9);
    display: flex; justify-content: center; align-items: center;
    z-index: 9999;
}
#loading .spinner {
    border: 4px solid #333;
    border-top: 4px solid #00bcd4;
    border-radius: 50%;
    width: 50px; height: 50px;
    animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }


.paging {text-align: center; margin: 20px 0;}
#paging ul {list-style: none; padding: 0; margin: 0; display: inline-flex; gap: 8px;}
#paging ul li {display: inline-block; padding: 8px 14px; font-size: 14px; color: #555; background: #f1f1f1; border-radius: 6px; cursor: pointer; transition: background 0.3s, color 0.3s;}
#paging ul li:hover {background: #e0e0e0; color: #000;}
#paging ul li.page_selected {background: linear-gradient(135deg, #6a11cb, #2575fc); color: #fff; font-weight: bold;}
#paging ul li.next, #paging ul li.last {background: #dcdcdc; font-weight: bold; display: flex; align-items: center; gap: 4px;}
#paging ul li.next:hover, #paging ul li.last:hover {background: #c0c0c0;}
#paging ul li.next::after {content: "â–¶"; font-size: 12px;}
#paging ul li.last::after {content: "⏩"; font-size: 12px;}