* {margin:0; padding:0; box-sizing:border-box;} 
html, body {height:auto; background-color:#f8f9fa; color:#212529; line-height:1.5; -webkit-font-smoothing:antialiased;} 
body {font-family:'Apple SD Gothic Neo', sans-serif; background-color:#fff; margin:0; padding:0;} 
img, picture, video, canvas, svg {max-width:100%;} 
input, button, textarea, select {font:inherit; color:inherit; background:none; border:none; outline:none;} 
button {cursor:pointer; white-space:nowrap;} 
a {color:inherit; text-decoration:none;} 
ul, ol {list-style:none;} 
iframe {display:block; width:100%; height:100%; border:none;} 

.container {max-width:600px; margin-top:50px;} 
.card {box-shadow:0 0 10px rgba(0,0,0,0.05); border-radius:12px;} 
.form-control:focus {border-color:#86b7fe; box-shadow:0 0 0 0.2rem rgba(13,110,253,0.25);} 

.d_table {width:100%; border-collapse:collapse; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size:0.9rem; background:#fff; box-shadow:0 0 5px rgba(0,0,0,0.05); border-radius:4px; overflow:hidden;} 
.d_table th, .d_table td {padding:5px 2px; text-align:left; border-bottom:1px solid #dee2e6; vertical-align:middle; _white-space:nowrap;} 
.d_table thead tr {background-color:#f1f3f5; font-weight:600; color:#212529; border-bottom:2px solid #ced4da;} 
.d_table tbody tr:hover {background-color:#e9ecef;} 
.d_table tbody tr.sb_table_tr span {display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} 
.board-checkbox, .target-checkbox {width:25px; height:25px; vertical-align:middle; border:1px solid #fefefe;} 
@media (max-width:576px) {.d_table th, .d_table td {padding:5px 0; font-size:0.85rem;}} 

.paging {position:relative; width:100%; height:50px; padding-top:10px; margin-top:10px; background-color:#fefefe; border-radius:8px;} 
#paging {position:relative; margin:0 auto; display:table; text-align:center; padding:0;} 
#paging ul {margin:0; padding:0;} 
#paging li {list-style:none; display:inline-block; text-align:center; border-radius:5px; margin:2px; padding:5px 2px; cursor:pointer; min-width:40px; font-weight:bold; font-size:13px; background-color:#f2f2f2; color:#333;} 
.page_selected {background-color:#F9EBDE !important; color:#815854 !important;} 

#t_paging {position:relative; margin:0 auto; display:table; text-align:center; padding:0;} 
#t_paging ul {margin:0; padding:0;} 
#t_paging li {list-style:none; display:inline-block; text-align:center; border-radius:5px; margin:2px; padding:5px 2px; cursor:pointer; min-width:40px; font-weight:bold; font-size:13px; background-color:#f2f2f2; color:#333;} 

.sb_table_tr.selected {background-color:#f0f9ff; font-weight:bold;} 
.modal-fullscreen iframe {height:100vh !important;} 

.layout-wrapper {display:flex; flex-direction:column; height:100vh;} 
.header {
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 24px;
  background-color:#fff;
  box-shadow:0 4px 8px rgba(0,0,0,0.08); /* ✅ 헤더 자체에 그림자 */
  position: relative;
  z-index: 10;
}

.logo img {height:36px; cursor:pointer;} 

.search-bar {position:absolute; left:50%; transform:translateX(-50%); width:20%;} 
.search-bar input {width:100%; padding:10px 35px 10px 12px; border:1px solid #ccc; border-radius:30px; background-color:#f8f8f8; font-size:14px;} 
.search-icon {position:absolute; right:12px; top:50%; transform:translateY(-50%); color:#aaa; font-size:18px; pointer-events:none;} 

.header-icons i {font-size:1.4rem; margin-left:16px; cursor:pointer;} 
.content-wrapper {flex:1; display:flex;} 
.sidebar {width:220px; background-color:#f8f9fa; border-right:1px solid #ddd; padding:20px 16px;} 
.sidebar-menu {list-style:none; padding:0; margin:0;} 
.sidebar-menu li {display:flex; align-items:center; gap:8px; padding:10px 8px; font-weight:500; cursor:pointer; border-radius:4px; transition:background 0.2s;} 
.sidebar-menu li:hover {background-color:#f1f1f1;} 
.sidebar-menu li.active {background-color:#E9ECEF; color:#333; font-weight:bold;} 
.sidebar-divider {border-top:1px solid #ccc; margin:16px 0;} 
.bj-ranking {font-size:14px; line-height:1.8; margin-top:10px;} 
.bj-ranking li {list-style:none; padding:2px 0; font-size:14px; cursor:pointer;} 
.more-btn {display:inline-block; margin-top:10px; font-size:13px; color:#007bff; cursor:pointer;} 
.more-btn:hover {text-decoration:underline;} 

.main-container {flex:1; display:flex; flex-direction:column;} 
.section-title {font-size:20px; font-weight:bold; padding:24px;} 
.thumbnail-grid {display:grid; grid-template-columns:repeat(6, 1fr); gap:20px; padding:0 24px;} 
.thumb-box {display:flex; flex-direction:column; font-size:14px;} 
.thumb-box img {width:100%; height:auto; border-radius:8px;} 
.thumb-title {font-weight:bold; margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} 
.thumb-meta {color:#777; font-size:13px;} 
.thumb-meta i {margin-right:3px;} 
@media (max-width:1400px) {.thumbnail-grid {grid-template-columns:repeat(4, 1fr);}} 
@media (max-width:992px) {.thumbnail-grid {grid-template-columns:repeat(3, 1fr);}} 
@media (max-width:768px) {.thumbnail-grid {grid-template-columns:repeat(2, 1fr);} .sidebar {display:none;}} 

.custom-tab .nav-link {border-radius:10px; background-color:#f0f0f0; color:#555; margin:0 5px; transition:all 0.3s ease; border:1px solid #ddd;} 
.custom-tab .nav-link:hover {background-color:#e0e0e0; color:#333;} 
.custom-tab .nav-link.active {background-color:#8c44f9; color:#fff !important; font-weight:bold; box-shadow:0 4px 10px rgba(140,68,249,0.4); border-color:#8c44f9;}