/* ============================================================
   부스트랩5 basic 1.1 + 그누보드 5.6
   ============================================================ */

:root {
    --main-bg:          #0a0a0a;
    --main-panel:       #111111;
    --main-dark:        #0d0d0d;
    --main-card-bg:     #161616;
    --main-border:      #1a1a1a;
    --main-border-mid:  #2a2a2a;
    --main-text-pri:    #e0e0e0;
    --main-text-sec:    #cccccc;
    --main-text-mute:   #555555;
    --main-text-hint:   #444444;
    --main-accent-blue: #6aadff;
    --main-accent-red:  #ff4444;
    --main-logo-em:     #e53935;
    --main-dur-bg:      rgba(0,0,0,0.78);
    --rec-badge-bg:  #1a2a4a;
    --rec-badge-c:   #6aadff;
    --rec-cb-bg:     #1a3a6a;
    --rec-cb-c:      #7ac4ff;
    --rec-cb-border: #2a5a9a;
    --top-badge-bg:  #3a0a0a;
    --top-badge-c:   #ff4444;
    --top-cb-bg:     #3a0a0a;
    --top-cb-c:      #ff6060;
    --top-cb-border: #6a1010;
    --card-min-width: 280px;
}

main { background-color: #0a0a0a !important; }
body.main-page {
    background-color: #0a0a0a !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body.main-page main {
    background-color: #0a0a0a !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.main-page main,
main { padding-top: 0 !important; margin-top: 0 !important; }

#main-wrap {
    background: var(--main-bg);
    color: var(--main-text-pri);
    font-size: 13px;
    min-height: 100vh;
    margin-top: 0;
}
#main-wrap a { text-decoration: none; color: inherit; }

#main-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--main-panel);
    border-bottom: 1px solid var(--main-border);
    position: sticky;
    top: 0;
    z-index: 200;
}
.main-logo { font-size: 20px; font-weight: 700; color: #fff; white-space: nowrap; flex-shrink: 0; letter-spacing: -0.5px; }
.main-logo em { color: var(--main-logo-em); font-style: normal; }
.site-logo .logo-front { color: #ff0000; }
.site-logo .logo-back  { color: #ffdf00; }

.main-search-wrap { flex: 1; display: flex; justify-content: center; }
.main-search-box {
    display: flex; align-items: center; gap: 8px;
    background: #1a1a1a; border: 1px solid var(--main-border-mid);
    border-radius: 22px; padding: 6px 14px; width: 400px; max-width: 100%;
    transition: border-color 0.2s;
}
.main-search-box:focus-within { border-color: var(--main-accent-blue); }
.main-search-box i { color: var(--main-text-mute); font-size: 15px; flex-shrink: 0; }
.main-search-box input[type="text"] {
    background: none; border: none; outline: none; box-shadow: none;
    color: var(--main-text-sec); font-size: 13px; flex: 1; width: 100%; padding: 0;
}
.main-search-box input[type="text"]::placeholder { color: var(--main-text-mute); }
.main-search-box button {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--main-text-mute); display: flex; align-items: center; transition: color 0.2s;
}
.main-search-box button:hover { color: var(--main-accent-blue); }

#main-nav {
    display: flex; align-items: center; gap: 4px; padding: 8px 16px;
    background: var(--main-dark); border-bottom: 1px solid var(--main-border);
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
#main-nav::-webkit-scrollbar { display: none; }
#main-nav a {
    color: var(--main-text-mute); font-size: 12px; padding: 4px 12px;
    border-radius: 16px; white-space: nowrap; border: 1px solid transparent;
    transition: all 0.2s; flex-shrink: 0;
}
#main-nav a:hover, #main-nav a.active { color: #fff; background: #1e1e1e; border-color: #333; }

#main-highlight { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--main-border); }
.hl-col { padding: 12px 16px; }
.hl-col.rec { border-right: 1px solid var(--main-border); }
.hl-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.hl-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #fff; }
.hl-ico-rec { color: var(--main-accent-blue); font-size: 13px; }
.hl-ico-top { color: var(--main-accent-red); font-size: 13px; }
.hl-badge-rec { background: var(--rec-badge-bg); color: var(--rec-badge-c); font-size: 10px; padding: 2px 7px; border-radius: 8px; }
.hl-badge-top { background: var(--top-badge-bg); color: var(--top-badge-c); font-size: 10px; padding: 2px 7px; border-radius: 8px; }
.main-more-btn {
    font-size: 11px; padding: 3px 9px; border-radius: 6px;
    border: 1px solid var(--main-border-mid); background: #1a1a1a; color: #888;
    transition: all 0.2s; white-space: nowrap;
}
.main-more-btn:hover { border-color: #444; color: #ccc !important; background: #222; }
.hl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.v-card { cursor: pointer; display: block; color: var(--main-text-sec); border: 1px solid #2a2a2a; overflow: hidden; transition: border-color .15s; }
.v-card:hover { border-color: #444; }
.v-thumb {
    width: 100%; aspect-ratio: 16 / 9; background: var(--main-card-bg);
    border-radius: 0; overflow: hidden; position: relative; margin-bottom: 6px;
}
.v-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.v-card:hover .v-thumb img { transform: scale(1.03); }
.v-thumb-fallback { width: 100%; height: 100%; background: #1a1a2e; }
.v-play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.28); opacity: 0; transition: opacity 0.2s;
}
.v-card:hover .v-play { opacity: 1; }
.v-play i { font-size: 26px; color: #fff; }
.v-dur {
    position: absolute; bottom: 5px; right: 6px; background: var(--main-dur-bg);
    color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; line-height: 1.5;
}
.v-badge {
    position: absolute; top: 6px; left: 6px; font-size: 9px; font-weight: 700;
    padding: 2px 6px; border-radius: 4px; letter-spacing: 0.04em; line-height: 1.4;
}
.v-badge.rec { background: var(--rec-cb-bg); color: var(--rec-cb-c); border: 1px solid var(--rec-cb-border); }
.v-badge.top { background: var(--top-cb-bg); color: var(--top-cb-c); border: 1px solid var(--top-cb-border); }
.v-title {
    font-size: 14px; color: #f0f0f0; font-weight: 800; line-height: 1.4; margin-bottom: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 25px;
    text-align: center; letter-spacing: -.2px;
}
.v-card:hover .v-title { color: var(--main-text-pri); }
.v-meta { font-size: 11px; color: var(--main-text-hint); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 10px 5px 10px;}
.v-meta .v-date-recent { color: #f0f0f0; }
.v-meta i { font-size: 11px; vertical-align: -1px; }
.v-meta .m-rec { color: var(--main-accent-blue); }
.v-meta .m-top { color: var(--main-accent-red); }
.v-empty { color: var(--main-text-mute); font-size: 12px; padding: 8px 0; }

.board-section { padding: 0 16px 24px; }
.board-sec-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0 8px; border-top: 1px solid var(--main-border); margin-top: 4px;
}
.board-sec-title { font-size: 13px; font-weight: 600; color: #bbb; }
.board-sec-more { font-size: 11px; color: var(--main-text-hint); transition: color 0.2s; }
.board-sec-more:hover { color: #888 !important; }

.v-grid, .vc-grid {
    display: grid; gap: 6px;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width), 1fr));
}
.board-section .v-title { font-size: 12px; }
.board-section .v-meta  { font-size: 11px; }
.board-section .v-play i { font-size: 24px; }

.vc-section { padding: 0 14px 24px; }
.vc-sec-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0 8px; border-top: 1px solid var(--main-border); margin-top: 4px;
}
.vc-sec-title { font-size: 16px; font-weight: 300; color: #ffffff;     font-family: KOHIBaeum, "Noto Sans KR", sans-serif;}
.vc-sec-title a { color: inherit; }
.vc-sec-title a:hover { color: #fff; }
.vc-more-btn {
    font-size: 11px; padding: 3px 9px; border-radius: 6px;
    border: 1px solid var(--main-border-mid); background: #1a1a1a; color: #888;
    transition: all 0.2s; white-space: nowrap;
}
.vc-more-btn:hover { border-color: #444; color: #ccc !important; background: #222; }
.vc-empty { color: var(--main-text-mute); font-size: 12px; padding: 8px 0; grid-column: 1 / -1; }

.v-badge-notice, .v-badge-hot, .v-badge-new {
    position: absolute; top: 6px; font-size: 9px; font-weight: 700;
    padding: 2px 5px; border-radius: 4px; line-height: 1.4;
}
.v-badge-notice { right: 6px; background: #1a3a6a; color: #7ac4ff; border: 1px solid #2a5a9a; }
.v-badge-hot    { left: 6px;  background: #3a1800; color: #ffaa60; border: 1px solid #6a3000; }
.v-badge-new    { left: 6px;  background: #1a3a1a; color: #60ff80; border: 1px solid #2a6a2a; }

/* ============================================================
   공통 사이트 헤더
   ============================================================ */
#site-header {
    background: #0f0a04;
    border-bottom: 1px solid #3d2a0a;
    position: static;
    z-index: 200;
}
#site-header-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px 0 20px;
    background: #0f0a04;
    border-bottom: 1px solid #2a1e08;
}
.site-logo {
    font-size: 40px; font-weight: 500; color: #f0e0a0;
    white-space: nowrap; flex-shrink: 0; letter-spacing: -0.5px; text-decoration: none;
    text-shadow: 0 0 18px rgba(200,150,12,0.45), 0 0 40px rgba(200,140,0,0.2);
    font-family: 'HakgyoansimRikodeo', 'Noto Sans KR', sans-serif;}


.site-logo em {
    color: #c8960c; font-style: normal;
    text-shadow: 0 0 16px rgb(255 255 255 / 70%), 0 0 36px rgb(255 0 0 / 35%);
}
.site-logo em:hover { color: #f0e0a0; text-decoration: none; }

.site-search-wrap { flex: 1; display: flex; justify-content: center; }
.site-search-box {
    display: flex; align-items: center; gap: 8px;
    background: #1a1206; border: 1px solid #3d2a0a;
    border-radius: 22px; padding: 6px 16px; width: 400px; max-width: 100%;
    transition: border-color 0.2s;
}
.site-search-box:focus-within { border-color: #c8960c; }
.site-search-box i { color: #8a6020; font-size: 15px; flex-shrink: 0; }
.site-search-box input[type="text"] {
    background: none; border: none; outline: none; box-shadow: none;
    color: #d4a840; font-size: 13px; flex: 1; width: 100%; padding: 0;
}
.site-search-box input[type="text"]::placeholder { color: #4a3410; }
.site-search-box button {
    background: none; border: none; padding: 0; cursor: pointer;
    color: #6b4e20; display: flex; align-items: center; transition: color 0.2s;
}
.site-search-box button:hover { color: #c8960c; }

.site-header-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-telegram-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: #a8d4f5; background: #0d1f3a; border: 1px solid #1e4a7a;
    padding: 5px 12px; border-radius: 20px; font-size: 13px;
    text-decoration: none; font-weight: 500;
    transition: background 0.2s, border-color 0.2s;
}
.header-telegram-link:hover { background: #122a4e; border-color: #2a6aaa; color: #c8e8ff; }
.header-telegram-link svg { flex-shrink: 0; }

/* 데스크탑에서 돋보기 숨김 */
.mobile-search-btn { display: none; }

.yf-telegram {
    display: inline-flex; align-items: center; gap: 6px;
    color: #c8a84b; text-decoration: none; font-size: 13px; transition: color 0.2s;
}
.yf-telegram:hover { color: #e8c96a; }







/* ============================================================
   게시판 네비게이션 6×2
   ============================================================ */
#site-nav { background: #0b0804; border-top: 1px solid #1a1206; }
.site-nav-row { display: grid; grid-template-columns: repeat(6, 1fr); }
.site-nav-row:first-child { border-bottom: 1px solid #1a1206; }
.site-nav-row a {
    position: relative; display: flex; align-items: center; justify-content: center;
    padding: 15px 8px; font-size: 16px; font-weight: 300; color: #a07838;
    white-space: nowrap; text-decoration: none !important; letter-spacing: 0.08em;
    border-right: 1px solid #1a1206; transition: color 0.2s, background 0.2s; overflow: hidden;
    font-family: 'KOHIBaeum', 'Noto Sans KR', sans-serif;

}
.site-nav-row a:last-child { border-right: none; }
.site-nav-row a::before {
    content: ''; position: absolute; inset: 0; background: #1e1508;
    transform: scaleY(0); transform-origin: bottom; transition: transform 0.2s ease;
}
.site-nav-row a span { position: relative; z-index: 1; }
.site-nav-row a:hover::before { transform: scaleY(1); }
.site-nav-row a:hover { color: #e4c987; text-decoration: none !important; }
.site-nav-row a.active {
    color: #f5d878; font-weight: 800; background: #1e1508;
    text-decoration: none !important; letter-spacing: 0.1em;
}
.site-nav-row a.active::after {
    content: ''; position: absolute; bottom: 0; left: 20%; right: 20%;
    height: 2px; background: #c8960c; border-radius: 2px 2px 0 0;
}
.site-nav-row:last-child a { font-weight: 700; }
.site-nav-row:last-child a::before { display: none; }


/* ============================================================
   2행 메뉴 CSS 수정
   ============================================================ */



.site-nav-row a[data-key="tutorial"] { background: #2e1c00; color: #ffc200; }
.site-nav-row a[data-key="tutorial"]:hover { background: #3e2600; color: #ffd740; }

.site-nav-row a[data-key="la1"] { background: #2a0606; color: #ff3c3c; }
.site-nav-row a[data-key="la1"]:hover { background: #3a0808; color: #ff6868; }

.site-nav-row a[data-key="la2"] { background: #052005; color: #39ff14; }
.site-nav-row a[data-key="la2"]:hover { background: #0a2c0a; color: #66ff44; }

.site-nav-row a[data-key="la3"] { background: #1e0630; color: #e040fb; }
.site-nav-row a[data-key="la3"]:hover { background: #280840; color: #f06aff; }

.site-nav-row a[data-key="la4"] { background: #030e2a; color: #2979ff; }
.site-nav-row a[data-key="la4"]:hover { background: #081836; color: #5c9eff; }

.site-nav-row a[data-key="la5"] { background: #221004; color: #ff6d00; }
.site-nav-row a[data-key="la5"]:hover { background: #2e1608; color: #ff9a3c; }

.site-nav-row a[data-key="la6"] { background: #040e22; color: #1900ff; }
.site-nav-row a[data-key="la6"]:hover { background: #081a2e; color: #3c63ff; }

/* ============================================================
   게시판 리스트 스킨
   ============================================================ */
#board-list-wrap { background: var(--main-bg); color: var(--main-text-pri); min-height: 60vh; padding-bottom: 40px; }
.bl-header { padding: 0; }
.bl-title-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px 10px; border-bottom: 1px solid var(--main-border);
}
.bl-title { font-size: 16px; font-weight: 300; color: #ffffff; margin: 0; font-family: KOHIBaeum, "Noto Sans KR", sans-serif; }
.bl-title-meta { font-size: 11px; color: var(--main-text-mute); display: flex; gap: 8px; }
.bl-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px; background: var(--main-dark); border-bottom: 1px solid var(--main-border);
    gap: 8px; flex-wrap: wrap;
}
.bl-toolbar-left, .bl-toolbar-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bl-btn {
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; font-size: 12px;
    border-radius: 5px; border: 1px solid var(--main-border-mid); background: #1a1a1a; color: #888;
    cursor: pointer; text-decoration: none; transition: all 0.2s; white-space: nowrap;
}
.bl-btn:hover { border-color: #444; color: #ccc; background: #222; text-decoration: none; }
.bl-btn-primary { background: #1e2a1e; border-color: #3a6a3a; color: #6aaa6a; }
.bl-btn-primary:hover { background: #2a3a2a; color: #8acc8a; }
.bl-btn-danger { background: #1e0a0a; border-color: #4a1010; color: #aa4444; }
.bl-btn-danger:hover { background: #2a1010; color: #cc6666; }
.bl-dropdown { position: relative; }
.bl-grid {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width), 1fr));
    padding: 14px 14px;
}
.bl-card-wrap { position: relative; }
.bl-checkbox { position: absolute; top: 8px; left: 8px; z-index: 10; }
.bl-checkbox input { cursor: pointer; }
.bl-ca-badge {
    position: absolute; top: 6px; right: 6px; font-size: 10px; font-weight: 600;
    padding: 2px 7px; border-radius: 4px; background: #2a1e08; border: 1px solid #5a3e10;
}
.bl-ca-badge a { color: #c8960c; text-decoration: none; }
.bl-icon-wrap { position: absolute; bottom: 6px; left: 6px; display: flex; gap: 3px; flex-wrap: wrap; }
.bl-icon {
    font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 3px;
    background: rgba(0,0,0,0.7); color: #ccc; border: 1px solid #333; line-height: 1.4;
}
.bl-icon-new { background: #1a3a1a; color: #60ff80; border-color: #2a6a2a; }
.bl-icon-hot { background: #3a1010; color: #ff6060; border-color: #6a2020; }
.bl-empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--main-text-mute); font-size: 14px; }
.bl-paging { display: flex; justify-content: center; padding: 20px 20px 10px; }
.bl-paging .pg_wrap { display: flex; gap: 4px; align-items: center; }
.bl-paging a, .bl-paging strong {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 6px; border-radius: 5px; font-size: 12px;
    border: 1px solid var(--main-border-mid); background: #1a1a1a; color: #888;
    text-decoration: none; transition: all 0.2s;
}
.bl-paging a:hover { border-color: #c8960c; color: #e8c060; background: #1e1508; }
.bl-paging strong { border-color: #c8960c; color: #e8c060; background: #1e1508; font-weight: 600; }
.bl-bottom { display: flex; justify-content: flex-end; padding: 0 20px 20px; }

/* ============================================================
   게시판 뷰 스킨
   ============================================================ */
#bv-wrap { background: var(--main-bg); color: var(--main-text-pri); max-width: 960px; margin: 0 auto; padding-bottom: 40px; }
.bv-header { padding: 20px 20px 16px; border-bottom: 1px solid var(--main-border); }
.bv-category { font-size: 11px; font-weight: 600; color: #c8960c; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.bv-title-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.bv-ca-badge {
    font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px;
    background: #2a1e08; color: #c8960c; border: 1px solid #5a3e10;
    white-space: nowrap; flex-shrink: 0; margin-top: 3px;
}
.bv-title { font-size: 24px !important; font-weight: 800 !important; color: #ffffff !important; line-height: 1.4 !important; margin: 0 0 14px 0 !important; letter-spacing: -0.3px; }
.bv-meta-row { display: flex !important; align-items: center; justify-content: flex-start !important; gap: 6px; flex-wrap: wrap; font-size: 13px !important; color: #888888 !important; }
.bv-sep { color: #333; }
.bv-good { color: var(--main-accent-red); }
.bv-writer { color: #c8960c; font-weight: 500; text-decoration: none; font-size: 13px; }
.bv-writer:hover { color: #e8c060; }
.bv-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 20px; background: var(--main-dark); border-bottom: 1px solid var(--main-border);
    flex-wrap: wrap; gap: 6px;
}
.bv-toolbar-left, .bv-toolbar-right { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.bv-btn {
    display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; font-size: 12px;
    border-radius: 5px; border: 1px solid var(--main-border-mid); background: #1a1a1a; color: #888;
    text-decoration: none; cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.bv-btn:hover { border-color: #444; color: #ccc; background: #222; text-decoration: none; }
.bv-btn-danger { border-color: #4a1010; color: #aa4444; background: #1e0a0a; }
.bv-btn-danger:hover { color: #cc6666; background: #2a1010; }
.bv-content { padding: 20px; min-height: 200px; line-height: 1.8; color: var(--main-text-sec); font-size: 14px; word-break: break-word; }
.bv-content iframe { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; border: none; display: block; margin: 0 auto; background: #000; }
.bv-content img { max-width: 100%; height: auto; }
.bv-good-wrap { display: flex; justify-content: center; gap: 12px; padding: 20px; border-top: 1px solid var(--main-border); border-bottom: 1px solid var(--main-border); }
.bv-good-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px; border-radius: 8px;
    border: 1px solid #3a1a1a; background: #1e0a0a; color: #ff6060; font-size: 14px;
    font-weight: 500; cursor: pointer; text-decoration: none; transition: all 0.2s;
}
.bv-good-btn:hover { background: #2a1010; border-color: #6a2020; color: #ff8080; text-decoration: none; }
.bv-nogood-btn { border-color: #1a1a3a; background: #0a0a1e; color: #6080ff; }
.bv-nogood-btn:hover { background: #10102a; border-color: #2020aa; color: #8090ff; }
.bv-attach, .bv-links { margin: 0 20px 12px; border: 1px solid var(--main-border); border-radius: 6px; overflow: hidden; }
.bv-attach-title { padding: 8px 14px; background: var(--main-dark); font-size: 12px; font-weight: 600; color: #888; border-bottom: 1px solid var(--main-border); }
.bv-attach-list { list-style: none; margin: 0; padding: 0; }
.bv-attach-list li { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid var(--main-border); gap: 10px; flex-wrap: wrap; }
.bv-attach-list li:last-child { border-bottom: none; }
.bv-attach-link { font-size: 12px; color: var(--main-text-sec); text-decoration: none; }
.bv-attach-link:hover { color: #c8960c; }
.bv-attach-meta { font-size: 11px; color: var(--main-text-mute); white-space: nowrap; }
.bv-prevnext { margin: 12px 20px; border: 1px solid var(--main-border); border-radius: 6px; overflow: hidden; }
.bv-prevnext-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--main-border); text-decoration: none; transition: background 0.2s; }
.bv-prevnext-item:last-child { border-bottom: none; }
.bv-prevnext-item:hover { background: var(--main-dark); }
.bv-prevnext-label { font-size: 11px; color: #c8960c; white-space: nowrap; flex-shrink: 0; }
.bv-prevnext-title { font-size: 12px; color: var(--main-text-sec); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 767.98px) {
    #main-highlight     { grid-template-columns: 1fr; }
    .hl-col.rec         { border-right: none; border-bottom: 1px solid var(--main-border); }
    .v-grid, .vc-grid   { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    .bl-grid            { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); padding: 12px; }
    .bl-toolbar         { padding: 8px 14px; }
    .bl-title-row       { padding: 12px; }
    .site-nav-row       { grid-template-columns: repeat(3, 1fr); }
    .site-nav-row a     { padding: 12px 6px; font-size: 12px; border-bottom: 1px solid #1a1206; }
    .v-title { font-size: 12px;}
    /* 헤더 레이아웃 — 로고 좌측, 버튼들 우측 끝 */
    #site-header-top {
        justify-content: space-between;
        padding: 10px 14px;
        gap: 0;
    }

    .main-best-slide {

        margin: 0 0 5px;
    }




    .best-slide-head {
        margin: 0 0 3px;
        border-top: 1px solid #1a1a1a;
        padding-top: 12px;
    }




    /* 검색창 숨김 */
    .site-search-wrap { display: none; }

    /* 우측 버튼 묶음 */
    .site-header-right {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
    }

    /* 돋보기 + 텔레그램 동일 크기 */
    .mobile-search-btn,
    .header-telegram-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 50%;
        font-size: 16px;
        text-decoration: none;
        transition: background 0.2s;
    }
    .mobile-search-btn {
        color: #a16b00;
        background: #0f0a04;
        border: 1px solid #ffc2000f;
    }
    .mobile-search-btn:hover { background: #122a4e; border-color: #2a6aaa; color: #c8e8ff; }

    /* 텔레그램 텍스트 숨김, 원형으로 */
    .header-telegram-link span { display: none; }
    .header-telegram-link {
        color: #a8d4f5;
        background: #0f0a04;
        border: 1px solid #ffc2000f;
    }
    .header-telegram-link:hover { background: #122a4e; border-color: #2a6aaa; color: #c8e8ff; }
}

@media (max-width: 479.98px) {
    #main-header        { padding: 8px 12px; }
    .main-logo          { font-size: 17px; }
    .hl-col             { padding: 10px 12px; }
    .hl-grid            { gap: 8px; }
    .v-grid, .vc-grid   { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .board-section,
    .vc-section         { padding: 0 12px 20px; }
    .bl-grid            { grid-template-columns: repeat(2, 1fr); gap: 2px; padding: 2px; }
    .bv-header          { padding: 12px; }
    .bv-toolbar         { padding: 8px 12px; }
    .bv-content         { padding: 14px 12px; }
    .bv-title           { font-size: 15px !important; }
    .bv-attach,
    .bv-links,
    .bv-prevnext        { margin: 0 12px 10px; }
    #site-header-top    { gap: 8px; padding: 8px 10px; }
    .site-logo          { font-size: 17px; }
    .site-nav-row       { grid-template-columns: repeat(3, 1fr); }
    .site-nav-row a     { padding: 10px 4px; font-size: 11px; }
}

.v-meta { justify-content: flex-start; }
.v-date-recent { color: #f0f0f0; }


/* ============================================================
   ★ 베스트 / 추천 슬라이드 (통합본)
   - 데스크탑 + 모바일 공통: JS 무한 자동 슬라이드
   - JS가 .slide-viewport 에 .is-desktop-slider 클래스를 붙이고
     .best-slide-track 을 transform 으로 이동시킴
   ============================================================ */

.main-best-slide { margin: 0 0 28px; padding: 0 14px; }

.best-slide-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.best-slide-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 300; color: #fff;
    font-family: 'KOHIBaeum', 'Noto Sans KR', sans-serif;
}
.best-slide-label .bi-trophy-fill { color: #c8960c; font-size: 25px; }
.best-slide-badge {
    background: #c8960c; color: #fff;
    font-size: 11px; font-weight: 300;
    padding: 2px 8px; border-radius: 20px;
}
.rec-badge { background: #e03e3e; }

/* 뷰포트 — 무한 슬라이드 컨테이너 (넘치는 부분 잘림) */
.slide-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-width: 0;
}

/* 트랙 — flex, JS가 transform 으로 이동 */
.best-slide-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    width: max-content;
    will-change: transform;
    /* 세로 스와이프는 페이지 스크롤로, 가로는 JS가 처리 */
    touch-action: pan-y;
}

/* 카드 — 폭 고정 (데스크탑 기본) */
.best-slide-card {
    flex: 0 0 200px;
    width: 200px;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    text-decoration: none;
    color: inherit;
}
.best-slide-card.vc-hidden { display: none !important; }

.best-slide-track img {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}
.best-slide-track.is-dragging { cursor: grabbing; }

/* 데스크탑 슬라이더 활성 시 grab 커서 */
.slide-viewport.is-desktop-slider .best-slide-track { cursor: grab; }
.slide-viewport.is-desktop-slider .best-slide-track.is-dragging { cursor: grabbing; }

/* 좌우 화살표 (기본 숨김, 데스크탑에서만 표시) */
.slide-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 60px;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    border-radius: 4px;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.slide-nav:hover { background: rgba(0, 0, 0, 0.8); }
.slide-nav-prev { left: 4px; }
.slide-nav-next { right: 4px; }

/* 순위 뱃지 */
.bsr {
    position: absolute; top: 6px; left: 6px;
    font-size: 11px; font-weight: 800;
    padding: 2px 7px; border-radius: 4px;
    z-index: 2; color: #fff;
}
.bsr-1 { background: #FFD700; color: #000; }
.bsr-2 { background: #C0C0C0; color: #000; }
.bsr-3 { background: #CD7F32; }
.bsr-4, .bsr-5, .bsr-6, .bsr-7, .bsr-8, .bsr-9, .bsr-10 { background: #444; }
.bsr-rec { background: #e03e3e; }

/* 메타 컬러 */
.meta-hit { color: #c8960c; font-weight: 700; }
.meta-rec { color: #e03e3e; font-weight: 700; }

/* 데스크탑: 화살표 표시 */
@media (min-width: 768px) {
    .slide-viewport.is-desktop-slider .slide-nav { display: flex; }
}

/* 모바일: 카드 폭 축소 + 화살표 숨김 (자동/터치 슬라이드는 유지) */
@media (max-width: 767.98px) {
    .best-slide-card { flex: 0 0 160px; width: 160px; }
    .slide-nav { display: none !important; }
    .main-best-slide { margin: 0 0 5px; padding: 0 10px; }
    .best-slide-label { font-size: 15px; }
}

/* 아주 좁은 화면 */
@media (max-width: 479.98px) {
    .best-slide-card { flex: 0 0 150px; width: 150px; }
}

/* 넓은 화면 */
@media (min-width: 1600px) {
    .best-slide-card { flex: 0 0 240px; width: 240px; }
}


/* ============================================================
   웹폰트
   ============================================================ */
@font-face {
    font-family: 'HakgyoansimRikodeo';
    src: url('fonts/HakgyoansimRikodeoOTFR.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KOHIBaeum';
    src: url('fonts/KOHIBaeum.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}




/* =============================================
   페이징 커스텀 CSS

   ============================================= */


.bl-paging .pg_wrap .pg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* 공통 버튼 베이스 */
.bl-paging .pg_current,
.bl-paging .pg_page,
.bl-paging .pg_page.pg_end {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* 현재 페이지 (활성)
   SCSS의 .pg_wrap .pg .pg_current 선택자(클래스 3개)와 동일 깊이로 맞춰 우선순위 확보 */
.bl-paging .pg_wrap .pg .pg_current {
    background: #c8922a !important;
    color: #fff8ee !important;
    font-weight: 600;
    border: 1.5px solid #c8922a;
    cursor: default;
}

/* 일반 페이지 번호 버튼 */
.bl-paging .pg_page {
    background: transparent !important;
    color: #c8922a;
    border: 1.5px solid #4a3010;
}

.bl-paging .pg_page:hover {
    background: #2e1c08;
    border-color: #c8922a;
    color: #d4a240;
}

/* 끝으로 이동 버튼 (화살표) */
.bl-paging .pg_page.pg_end {
    color: #7a5a28;
    border: 1.5px solid #3a2408;
}

.bl-paging .pg_page.pg_end:hover {
    background: #2e1c08;
    color: #c8922a;
    border-color: #c8922a;
}

.bl-paging .pg_page.pg_end i {
    font-size: 13px;
}


/* 반응형2 */
@media (max-width: 767.98px) {

    .board-section, .vc-section {
        padding: 0 5px 20px;
    }

    .v-grid, .vc-grid {

        gap: 3px;
    }

    .v-title {
        font-size: 14px;
    }

    .site-logo {
        font-size: 30px;
    }

    #site-header-top {
        gap: 8px;
        padding: 3px 10px;
    }

}


/* ============================================================
   vc-grid: 화면 폭에 따라 자동으로 카드 개수가 정해지는 그리드
   - --vc-card-min 값으로 한 줄 카드 개수 조절
   - data-rows 속성과 JS가 함께 동작해 N줄까지만 표시
   ============================================================ */

.vc-grid {
    --vc-card-min: 200px;   /* 카드 최소 폭 (작게=한 줄 多, 크게=한 줄 少) */
    --vc-gap: 14px;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--vc-card-min), 1fr));
    gap: var(--vc-gap);
}

/* JS가 줄 수 초과 카드에 붙이는 클래스 */
.vc-grid > .v-card.vc-hidden {
    display: none !important;
}

/* 화면이 매우 좁을 때 카드 최소 폭을 줄여서 2개라도 들어가게 */
@media (max-width: 480px) {
    .vc-grid {
        --vc-card-min: 150px;
        --vc-gap: 10px;
    }
}

/* 화면이 매우 넓을 때 카드 폭을 키워서 너무 많이 들어가지 않게 */
@media (min-width: 1600px) {
    .vc-grid {
        --vc-card-min: 230px;
    }
}


/* ===== 위로가기 버튼 (블랙 + 골드 테마) ===== */
.gotop {
    /* 위치 */
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 999;

    /* 크기 & 모양 */
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(212, 175, 55, 0.6);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* 골드 그라데이션 */
    background: linear-gradient(135deg, #d4af37 0%, #f4d06f 50%, #b8860b 100%);
    color: #1a1a1a;

    /* 그림자 & 광택 */
    box-shadow:
            0 4px 14px rgba(212, 175, 55, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);

    /* 폰트 */
    font-size: 1.1rem;
    line-height: 1;

    /* 초기 상태: 숨김 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;

    cursor: pointer;
}

/* 스크롤 시 노출 */
.gotop.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 호버: 더 밝은 골드 */
.gotop:hover {
    background: linear-gradient(135deg, #f4d06f 0%, #ffe28a 50%, #d4af37 100%);
    box-shadow:
            0 6px 20px rgba(212, 175, 55, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transform: translateY(-3px);
    color: #000;
}

/* 클릭 */
.gotop:active {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(212, 175, 55, 0.4);
}

/* 키보드 포커스 */
.gotop:focus-visible {
    outline: 2px solid #f4d06f;
    outline-offset: 3px;
}

/* 아이콘 호버 시 살짝 위로 */
.gotop i {
    font-weight: 700;
    transition: transform 0.25s ease;
}

.gotop:hover i {
    transform: translateY(-2px);
}

/* 모바일 대응 */
@media (max-width: 576px) {
    .gotop {
        right: 16px;
        bottom: 16px;
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }
}


/* ============================================================
   게시판 리스트 — 한 줄 카드 개수 고정 (2/3/4/6)
   페이지당 24개에 최적화
   ============================================================ */

/* 모바일: 2개 */
.bl-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* 태블릿 (768px ~): 3개 */
@media (min-width: 768px) {
    .bl-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* 노트북 (1024px ~): 4개 */
@media (min-width: 1024px) {
    .bl-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* 데스크탑 (1440px ~): 6개 */
@media (min-width: 1440px) {
    .bl-grid {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}


/* 모바일에서 제목 2줄 넘으면 ... 처리 */
@media (max-width: 767px) {
    .vc-grid .v-title {
        display: -webkit-box;
        -webkit-line-clamp: 1;        /* 1로 바꾸면 한 줄 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}