.bb-rank-card {
    background: #151515;
    color: #ddd;
    border-radius: 14px;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}
.bb-rank-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(0,0,0,.35);
}

.bb-rank-badge{
    position:absolute;
    top:10px; left:10px;
    z-index:3;
    width:36px; height:36px;
    border-radius:10px;
    background:#ff2d55;
    color:#fff;
    font-weight:800;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 3px 10px rgba(255,45,85,.35);
}

.bb-card-body{
    padding-top: .85rem; padding-bottom: .4rem;
}
.bb-site-name{
    font-size:1.05rem;
    font-weight:800;
    color: #e3e3e3;
    text-decoration:none;
}
.bb-site-name:hover{ text-decoration:underline; }

.bb-domain{
    font-size:.85rem;
    color: #888888;
    margin-top:.25rem;
}

.bb-card-footer{
    background:transparent;
    border-top:1px solid rgba(255,255,255,.08);
    font-size:.9rem;
}
.bb-views i{ margin-right:4px; }

/* 체크박스 위치 보정 */
.top-image .checkbox-wrap{
    top:10px; right:10px; left:auto;
}

/* 뱃지 묶음 위치 */
.badge-wrap{
    right:10px; bottom:10px;
}


/* 썸네일 위 관리자 전용 글수정 버튼 */
.bb-edit-btn{
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 5;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    opacity: .95;
}
.bb-edit-btn:hover{ opacity: 1; }


/* === Fixed thumbnail box (150x80) === */
.bb-thumb-wrap{
    width:150px; height:80px;
    margin:16px auto 8px;
    border-radius:10px;
    overflow:hidden;
    background:#0f0f10;
    outline:1px solid rgba(255,255,255,.06);
    display:flex; align-items:center; justify-content:center;
}
.bb-thumb-wrap img{
    width:100%; height:100%;
    object-fit:cover;              /* 꽉 차게 */
    display:block;
    image-rendering:-webkit-optimize-contrast;
}

/* === Card polish === */
.bb-rank-card{
    background:#111; color:#e9ecef;
    border-radius:16px;
    overflow:hidden;
    transition:transform .15s ease, box-shadow .15s ease;
}
.bb-rank-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

/* rank badge 더 미니멀하게 */
.bb-rank-badge{
    position:absolute; top:10px; left:10px; z-index:5;
    width:28px; height:28px; border-radius:8px;
    background:#ff3260; color:#fff; font-weight:800; font-size:.95rem;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 3px 10px rgba(255,50,96,.35);
}

/* 제목/도메인 타이포 */
.bb-card-body{ padding:.85rem .9rem .6rem; }
.bb-site-name{ color:#fff; font-weight:800; font-size:1rem; text-decoration:none; }
.bb-site-name:hover{ text-decoration:underline; }
.bb-domain{ color:#9aa0a6; font-size:.82rem; margin-top:.2rem; }

/* 푸터를 살짝 띠처럼 */
.bb-card-footer{
    background:linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.25));
    border-top:0; color:#e9ecef;
    padding:.55rem .9rem;
}
.bb-views i{ margin-right:6px; }

/* 체크박스/뱃지 위치 보정 */
.top-image .checkbox-wrap{ top:10px; right:10px; left:auto; }
.badge-wrap{ right:10px; bottom:10px; }

/* 관리자 글수정 버튼(있다면) */
.bb-edit-btn{
    position:absolute; right:10px; bottom:10px; z-index:6;
    box-shadow:0 4px 12px rgba(0,0,0,.25); opacity:.95;
}
.bb-edit-btn:hover{ opacity:1; }


/* ==== 썸네일: 좌우 꽉 차게 (높이만 고정) ==== */
:root { --bb-thumb-h: 80px; } /* 필요하면 80→100~120 등으로 조절 */

.bb-thumb-wide { position: relative; overflow: hidden; border-top-left-radius: 16px; border-top-right-radius: 16px; }
.bb-thumb-wide .bb-thumb-link img{
    width: 100%;
    height: var(--bb-thumb-h);
    object-fit: cover;       /* 좌우 꽉, 위아래 잘라내기 */
    display: block;
}

/* 체크박스/아이콘 위치 */
.top-image .checkbox-wrap{ top:10px; right:10px; left:auto; z-index:4; position:absolute; }
.badge-wrap{ right:10px; bottom:10px; z-index:4; }
.bb-edit-btn{ position:absolute; right:10px; bottom:10px; z-index:5; box-shadow:0 4px 12px rgba(0,0,0,.25); }

/* 카드 스타일 */
.bb-rank-card{
    background:#111; color:#e9ecef;
    border-radius:16px; overflow:hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    transition: transform .15s ease, box-shadow .15s ease;
}
.bb-rank-card:hover{ transform: translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.28); }

/* 제목/도메인 + 배지 */
.bb-card-body{ background:#171717; padding:.85rem .9rem .6rem; }
.bb-rank-badge.in-body{
    position: static; width:32px; height:32px; min-width:32px;
    border-radius:10px; background:#ff3260; color:#fff; font-weight:800; font-size:.95rem;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 3px 10px rgba(255,50,96,.35);
}
.bb-site-name{ color:#fff; font-weight:800; font-size:1rem; text-decoration:none; }
.bb-site-name:hover{ text-decoration:underline; }
.bb-domain{ color:#9aa0a6; font-size:.82rem; margin-top:.2rem; }

/* 푸터 바 */
.bb-card-footer{
    background:#0f0f0f; color:#e9ecef; border-top:0;
    padding:.55rem .9rem;
}
.bb-views i{ margin-right:6px; }


/* board list grid fix */
.board-wrap .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

.board-wrap .row > .col {
    flex: 0 0 auto !important;
}

/* 단계별 컬럼 수 강제 (xl에서 5칸) */
@media (min-width: 576px)  { .board-wrap .row > .col { width: 50%; } }          /* 2 */
@media (min-width: 768px)  { .board-wrap .row > .col { width: 33.3333%; } }     /* 3 */
@media (min-width: 992px)  { .board-wrap .row > .col { width: 25%; } }          /* 4 */
@media (min-width: 1200px) { .board-wrap .row > .col { width: 20%; } }          /* 5 */
@media (min-width: 1400px) { .board-wrap .row > .col { width: 20%; } }          /* 5 유지 */


/* 그리드 복구 */
.board-wrap .row { display:flex; flex-wrap:wrap; }



/* sm: 2열 */
@media (min-width: 576px){
    .board-wrap .row > .col { flex: 0 0 50% !important; width:50% !important; }
}
/* md: 3열 */
@media (min-width: 768px){
    .board-wrap .row > .col { flex: 0 0 33.3333% !important; width:33.3333% !important; }
}
/* lg: 4열 */
@media (min-width: 992px){
    .board-wrap .row > .col { flex: 0 0 25% !important; width:25% !important; }
}
/* xl 이상: 5열 */
@media (min-width: 1200px){
    .board-wrap .row > .col { flex: 0 0 20% !important; width:20% !important; }
}
/* 1400px 이상도 5열 유지 */
@media (min-width: 1400px){
    .board-wrap .row > .col { flex: 0 0 20% !important; width:20% !important; }
}


/* 카드 바디 구조 */
.bb-card-body{
    background:#111;   /* 이미지 아래 어두운 바 */
    padding:.8rem .9rem .75rem;
}

/* 1줄: 랭크 + 제목 + 변동배지 */
.bb-row-top{ gap:.5rem; }
.bb-rank-badge.in-body{
    position:static; width:32px; height:32px; min-width:32px;
    border-radius:10px; background:#ff3260; color:#fff;
    font-weight:800; font-size:.95rem; display:flex; align-items:center; justify-content:center;
    box-shadow:0 3px 10px rgba(255,50,96,.35);
}
.bb-site-name{
    color:#fff; font-weight:800; font-size:1.06rem; text-decoration:none;
}
.bb-site-name:hover{ text-decoration:underline; }

/* 변동배지: 오른쪽 작은 알약 */
.bb-delta-pill{
    display:flex; align-items:center; justify-content:center;
    height:24px; min-width:28px; padding:0 10px;
    border-radius:999px; font-weight:800; font-size:.8rem; line-height:1;
    background:#1e1e1f; color:#9aa0a6;
}
.bb-delta-pill.up   { background:rgba(0,200,83,.18);  color:#00d16a; }
.bb-delta-pill.down { background:rgba(255,82,82,.18); color:#ff6b6b; }
.bb-delta-pill.new  { background:rgba(124,77,255,.18); color:#b388ff; }
.bb-delta-pill.same { background:#1e1e1f; color:#8a8a8a; } /* '—' 모양 */

/* 2줄: 도메인/뷰 */
.bb-row-meta{ font-size:.9rem; }
.bb-domain{ color:#9aa0a6; }
.bb-views{ color:#e9ecef; }
.bb-views i{ opacity:.9; }

/* 썸네일: 상단 꽉 차게 (필요시 높이 조절) */
:root { --bb-thumb-h: 100px; } /* 80~120으로 취향껏 */
.bb-thumb-wide{ position:relative; overflow:hidden; border-top-left-radius:16px; border-top-right-radius:16px; }
.bb-thumb-wide .bb-thumb{ width:100%; height:var(--bb-thumb-h); object-fit:cover; display:block; }

.hero-title {

    background-color: rgb(255 255 255) !important;
}


.hero-title .hero-logo{
    width: min(90%, 360px);   /* 최대 360px, 화면 좁으면 90% */
    height: auto;
    display: block;
    margin: 0 auto;
 

}

.hero-subtitle{
    font-weight: 700;
    font-size: clamp(1rem, 1.5vw + .8rem, 1.25rem);
}

.hero-desc{
    font-size: .95rem;
}

@media (prefers-color-scheme: dark){
    .hero-desc{ color: #b5b7ba !important; }
}


.hero-title {
    position: relative; /* 버튼 위치 기준 */
}

.telegram-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid #ddd;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    color: #333;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.telegram-btn:hover {
    background: #eaf6ff;
    border-color: #0088cc;
    color: #0088cc;
}

.telegram-btn img {
    width: 22px;
    height: 22px;
}


/* 모바일 환경에서 위치 변경 */
@media (max-width: 768px) {
    .telegram-btn {
    display: none;
    }
}



/* 리스트 헤더 박스 */
.board-header-box {

    text-align: center;
    position: relative;
}

/* 제목 */
.board-header-box .board-title {
    font-size: 2rem;
    font-weight: 800;
    color: #222;
    margin: 0;
}

/* 액션 버튼 (우측 상단) */
.board-header-actions {
    position: absolute;
    top: 12px;
    right: 16px;
    display: flex;
    gap: 0.4rem;
}

.board-header-actions .btn {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 4px 8px;
    background: #f9f9f9;
    transition: all 0.2s ease;
}

.board-header-actions .btn:hover {
    background: #2b79ff;
    color: #fff !important;
    border-color: #2b79ff;
}

/* 작은 화면 대응 */
@media (max-width: 576px) {
    .board-header-box .board-title {
        font-size: 1.5rem;
    }
    .board-header-actions {
        top: 8px;
        right: 10px;
    }
}


.list-group-item {

    border: 0;
    border-radius: 15px;
}

.row>* {

    padding-right: 3px !important;
    padding-left: 3px !important;
    margin-top: 10px !important;
}

h1 {
    font-family: esamanru;
}

.footer-linkcom {
    text-align: center;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.8em;
    margin: 30px auto;
    max-width: 800px;
    padding-top: 15px;

}

.footer-linkcom a {
    color: #ffca00;
    font-weight: bold;
    text-decoration: none;
}

.footer-linkcom a:hover {
    text-decoration: underline;
}


.header-banner-item{
    background:#111; overflow:hidden; padding:0; line-height:0;
}

/* 4:1 비율 박스 */
.header-banners .rb-aspect{
    position:relative; width:100%; padding-top:25%; /* 4:1 */
    overflow:hidden; background:#111;
}

/* 배경이미지로 꽉 채우기 */
.header-banners .rb-aspect.rb-bg{
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;     /* ✅ 여백 없이 꽉 채움 */
}

/* aspect-ratio 지원 시 더 깔끔 */
@supports (aspect-ratio: 4 / 1){
    .header-banners .rb-aspect{ padding-top:0; aspect-ratio:4 / 1; }
}

@media (max-width: 768px) {
    .hero-title .hero-logo {
        width: min(90%, 250px);

    }



}


/* 모바일 전용 (화면 너비 991px 이하일 때 적용) */
@media (max-width: 991px) {
    .ttm-menu {
        flex-wrap: nowrap !important;   /* 줄바꿈 방지 */
        overflow-x: auto;               /* 가로 스크롤 활성화 */
        white-space: nowrap;            /* 한 줄 유지 */
        -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
    }

    .ttm-menu .nav-item {
        flex: 0 0 auto; /* 아이템들이 줄어들지 않게 */
    }
}


.logo-top{
    font-family: lotte ;
    font-size: 30px !important;
}


/* ===== Header Base ===== */
.site-header { width: 100%; }

/* ===== Topbar ===== */
.topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #0b1220;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar-inner{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    min-height:34px;
}

.telegram-btn{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border-radius:12px;
    text-decoration:none;
    color:#eaf2ff;
    background: rgba(42,132,255,.14);
    border: 1px solid rgba(42,132,255,.28);
}
.telegram-btn img{ width:28px; height:28px; object-fit:contain; }
.telegram-btn span{ font-size:12px; line-height:1.1; font-weight:700; }

/* ===== Mainbar ===== */
.mainbar{
    background: #ffffff;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.mainbar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:14px 0;
}

/* Left brand */
.brand{ flex: 0 0 auto; }
.brand-link{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
}
.brand-logo{

    object-fit:contain;
    display:block;
}
.brand-title{
    margin:0;
    font-family: lotte;
    font-size:55px !important;          /* 핵심 */
    font-weight:900;
    letter-spacing:-0.6px;
    color:#eaf2ff;
    line-height:1;
}


@media (max-width: 760px) {

    .brand-title{

        font-size:35px !important;
    }

}

.brand-link{
    display:flex;
    align-items:center;
    gap:16px;   /* 기존 12 → 16 */
}
@media (max-width: 900px){
    .brand-logo{
        width:48px;
        height:48px;
    }
    .brand-title{
        font-size:26px;
    }
}



/* Center area */
.header-center{
    flex: 1 1 auto;
    max-width: 680px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

/* Search */
.header-search{
    display:flex;
    gap:10px;
}
.search-input{
    flex:1;
    height:44px;
    padding:0 14px;
    border-radius:14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color:#ffffff;
    outline:none;
}
.search-input::placeholder{ color: rgba(255,255,255,.55); }

.search-btn{
    height:44px;
    padding:0 16px;
    border-radius:14px;
    border: 1px solid rgba(42,132,255,.45);
    background: rgba(42,132,255,.22);
    color:#eaf2ff;
    font-weight:900;
    cursor:pointer;
}

/* Keyword rolling row */
.keyword-roll{
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 5px;
    border-radius:14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
}

.keyword-label{
    flex: 0 0 auto;
    font-size:12px;
    font-weight:900;
    color:#b9d6ff;
    padding:6px 10px;
    border-radius:999px;
    background-color: #ffd637;
    border: 1px solid #ffffff;
}

.keyword-viewport{
    position:relative;
    flex: 1 1 auto;
    height:22px;
    overflow:hidden;
}

.keyword-list{
    list-style:none;
    margin:0;
    padding:0;
    transform: translateY(0);
    transition: transform .35s ease;
}
.keyword-list li{
    height:22px;
    display:flex;
    align-items:center;
    gap:10px;
    color:#eaf2ff;
    font-size:13px;
    white-space:nowrap;
}
.keyword-list .rank{
    width:18px;
    text-align:center;
    font-weight:900;
    color: #ff0000;
}
.keyword-list .kw{
    font-weight:800;
    opacity:.95;
}

.keyword-actions{
    flex: 0 0 auto;
    display:flex;
    gap:6px;
}
.kw-btn{
    width:30px;
    height:30px;
    border-radius:10px;
    border: 1px solid #858585;
    background: rgba(255,255,255,.06);
    color:#858585;
    cursor:pointer;
}

/* Right spacer */
.header-right{ width: 44px; height: 44px; }

/* ===== Responsive ===== */
@media (max-width: 900px){
    .mainbar-inner{ flex-direction:column; align-items:stretch; }
    .header-right{ display:none; }
    .brand-link{ justify-content:center; }
    .header-center{ max-width: 100%; }
}


/* 실시간 인기검색어: 검색수 표시 */
.keyword-list li{
    display:flex;
    align-items:center;
    gap:10px;
}

.keyword-list .kw{
    color: #ff0000;
    text-decoration:none;
    font-weight:800;
    opacity:.95;
}

.keyword-list .kw:hover{
    text-decoration:underline;
}

.keyword-list .kwc{
    margin-left:auto;
    font-weight:900;
    color: rgba(0, 0, 0, 0.75);
    font-variant-numeric: tabular-nums;
}

.keyword-list .kw-muted{
    color: rgba(255,255,255,.65);
}


/* 라벨 + 배지 + 드롭다운 래퍼 */
.keyword-label-wrap{
    position: relative;
    display:flex;
    align-items:center;
    gap:8px;
    flex: 0 0 auto;
}

/* 배지 */
.keyword-badge{
    font-size:11px;
    font-weight:900;
    color:#eaf2ff;
    padding:6px 10px;
    border-radius:999px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
}

/* 드롭다운 박스 */
.keyword-dropdown{
    position:absolute;
    top: calc(100% + 10px);
    left: 0;

    padding:12px 12px 10px;
    border-radius:14px;
    background: rgba(10,16,32,.98);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
    z-index: 3000;

    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

/* hover 시 열림 */
.keyword-roll:hover .keyword-dropdown,
.keyword-label-wrap:hover .keyword-dropdown{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 드롭다운 타이틀 */
.kwdd-title{
    font-size:12px;
    font-weight:900;
    color: rgba(255,255,255,.85);
    margin-bottom:8px;
}

/* 드롭다운 리스트 */
.keyword-dropdown-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.keyword-dropdown-list li{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    color:#eaf2ff;
}

.keyword-dropdown-list .rank{
    width:18px;
    text-align:center;
    font-weight:900;
    color:#7fb3ff;
}

.keyword-dropdown-list .kw{
    color:#eaf2ff;
    text-decoration:none;
    font-weight:800;
    opacity:.95;
}

.keyword-dropdown-list .kw:hover{
    text-decoration:underline;
}

.keyword-dropdown-list .kwc{
    margin-left:auto;
    font-weight:900;
    color: rgba(255,255,255,.75);
    font-variant-numeric: tabular-nums;
}

/* 모바일에서는 hover가 애매하니 드롭다운 숨김(원하면 클릭형으로 바꿔줄게요) */
@media (max-width: 900px){
    .keyword-dropdown{ display:none; }
}


/* 라벨 래퍼 폭을 기준으로 드롭다운도 동일 폭 */
.keyword-label-wrap{
    position: relative;
    display:flex;
    align-items:center;
    gap:8px;
    flex: 0 0 auto;
}

/* ✅ 드롭다운: 탭(라벨 래퍼)과 같은 너비로 */
.keyword-dropdown{
    position:absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 100%;              /* 핵심 */
    min-width: 0;             /* 기존 min-width 무력화 */
    max-width: none;          /* 기존 max-width 무력화 */

    padding:12px 12px 10px;
    border-radius:14px;
    background: rgba(10,16,32,.98);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
    z-index: 3000;

    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}


/* ===== 드롭다운 폭 강제(탭과 동일) ===== */
.keyword-label-wrap{
    position: relative;
    display: inline-flex;     /* ✅ 핵심: 내용폭만큼만 */
    align-items:center;
    gap:8px;
}

/* 드롭다운: 탭과 동일 폭 */
.keyword-label-wrap .keyword-dropdown{
    left: 0;
    width: 100% !important;   /* ✅ 강제 */
    min-width: 100% !important;
    max-width: 100% !important;
}

/* ✅ 강제: 드롭다운 폭을 탭(라벨+배지)과 동일하게 */
.keyword-roll .keyword-label-wrap{
    position: relative !important;
    display: inline-flex !important;   /* 내용폭만큼만 */
    width: fit-content !important;     /* 탭 폭 고정 */
    flex: 0 0 auto !important;
}

.keyword-roll .keyword-label-wrap .keyword-dropdown{
    left: 0 !important;
    width: 100% !important;            /* 탭 폭 그대로 */
    min-width: unset !important;       /* 예전 min-width 무력화 */
    max-width: unset !important;
}

/* [FIX] 실시간 탭(라벨+배지) 폭을 내용만큼으로 고정 */
.keyword-roll #kwLabelWrap{
    position: relative !important;
    display: inline-flex !important;   /* ✅ 내용폭만큼 */
    width: auto !important;
    flex: 0 0 auto !important;         /* ✅ 절대 늘어나지 않게 */
    align-items: center !important;
}

/* [FIX] 드롭다운 폭 = 탭 폭 */
.keyword-roll #kwLabelWrap > #kwDropdown{
    left: 0 !important;
    right: auto !important;
    width: 100% !important;            /* ✅ 탭 폭 그대로 */
    min-width: 100% !important;        /* ✅ 예전 min-width(260) 완전 무력화 */
    max-width: 100% !important;
}

/* ✅ 드롭다운 폭 계산을 '겉박스' 기준으로 */
.keyword-roll #kwLabelWrap > #kwDropdown{
    box-sizing: border-box !important;
}


/* ✅ header-center를 기준으로 absolute 포지션 잡기 */
.header-center{ position: relative; }

/* keyword-roll도 기준이 되게(안전) */
.keyword-roll{ position: relative; }

/* ✅ 드롭다운: header-center(=부모) 폭 100% */
.keyword-dropdown.kwdd-wide{
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);     /* keyword-roll 아래로 */
    width: 100%;
    box-sizing: border-box;

    padding:12px 12px 10px;
    border-radius:14px;
    background: rgba(10,16,32,.98);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
    z-index: 3000;

    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

/* ✅ hover 시 열림: 실시간 탭에 올려도 열리고, 드롭다운에 올려도 유지 */
#kwLabelWrap:hover ~ #kwDropdown,
#kwDropdown:hover{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


.title-badge{
    width:40px;
    height:40px;
    vertical-align:middle;
    margin-right: 5px;

}


/* bw-title이 a여도 span처럼 보이게 */
a.bw-title{
    all: unset;              /* 핵심 */
    font-weight: 800;
    letter-spacing: .2px;
    font-size: 16px;
    font-family: 'Pretendard';
    cursor: pointer;
}

/* hover만 살짝 */
a.bw-title:hover{
    opacity:.85;
}


@media (min-width: 768px) {
    .col-md-5th {
        flex: 0 0 20%;
        max-width: 20%;
    }
}


.footer {
    background-color: #0a0f1b; /* 원하는 색 */
}


.bb-site-status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:.85rem;
    font-weight:700;
    padding:4px 10px;
    border-radius:999px;
    white-space:nowrap;
}

.bb-site-status i{ font-size:.7rem; }

.bb-site-status.up{
    color:#0b5ed7;              /* 파란 */
    background:rgba(13,110,253,.10);
}

.bb-site-status.down{
    color:#dc3545;              /* 빨강 */
    background:rgba(220,53,69,.10);
}

.bb-site-status.unknown{
    color:#6c757d;              /* 회색 */
    background:rgba(108,117,125,.10);
}

.bb-domain-host{
    font-weight:600;
    color:#212529;
}
.bb-site-status-text{
    letter-spacing:-0.2px;
}


.bb-site-status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:.85rem;
    font-weight:800;
    padding:5px 10px;
    border-radius:999px;
    white-space:nowrap;
}
.bb-site-status i{ font-size:.7rem; }

.bb-site-status.up{
    color:#0b5ed7;
    background:rgba(13,110,253,.12);
}
.bb-site-status.down{
    color:#dc3545;
    background:rgba(220,53,69,.12);
}
.bb-site-status.unknown{
    color:#6c757d;
    background:rgba(108,117,125,.12);
}



/* ✅ 접속불가 카드 살짝 어둡게 */
.bb-card-down{
    opacity:.6;
    filter:saturate(.4);
}


/* ✅ truncate가 먹게 만드는 핵심 */
.bb-titlebox{ min-width:0; overflow:hidden; }

/* 제목은 기존대로 */
.bb-site-name{ display:block; }

/* ✅ 도메인 줄임표 + 색 분리 */
.bb-domain-under{
    display:block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    font-size:0.85rem;       /* 기존 도메인 크기 유지 */
    color:rgba(255,255,255,.65) !important;  /* 검정 카드 위 가독성 */
    font-weight:600;
    line-height:1.2;
    margin-top:2px;
}


/* =========================
   Header Base
========================= */
.site-header {
    background: #ffffff;
    border-bottom: 1px solid #e9e9e9;
    font-family: 'Pretendard', sans-serif;
}

.mainbar {
    padding: 0;
}

.mainbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* =========================
   Brand
========================= */
.brand {
    display: flex;
    align-items: center;
}

.brand-logo {
    height: 120px;
    width: auto;
    display: block;
}

@media (max-width: 768px) {
    .brand-logo {
        height: 60px;
    }


    .mainbar-inner {

        padding: 0;
        gap: 3px;
    }

    .keyword-roll {

        height: 35px;
    }

    .keyword-label {

        padding: 3px 10px;
    }

    .brand{

        display: none;
    }

    .topbar-inner {

        height: 70px !important;
        align-items: start !important;
        padding: 4px 0 0 0;
    }

    .topbar-left {

        display: none !important;

    }

    .header-search {

        height:40px;
    }
}

@media (max-width: 768px) {
    .keyword-roll {
        display: none !important;/* PC용 숨김 */
    }
}

/* ===== 모바일 전용 인기검색어 ===== */
.keyword-roll-mobile {
    display: none;
}

@media (max-width: 768px) {

    /* PC용 숨김 */
    .keyword-roll {
        display: none !important;
    }

    /* topbar 높이 자동으로 */
    .topbar-inner {
        height: auto !important;
        flex-wrap: wrap;
        align-items: center !important;
        padding: 6px 0 !important;
        gap: 6px;
    }

    /* 인기검색어 바: topbar-inner 아래 full width */
    .keyword-roll-mobile {
        display: flex !important;
        align-items: center;
        gap: 8px;
        width: 100%;
        height: 32px;
        padding: 0 10px;
        box-sizing: border-box;
        background: #FFE100;
        border-top: 1px solid rgba(0,0,0,.08);
        border-radius: 10px;
    }

    .keyword-roll-mobile .keyword-label-wrap {
        display: inline-flex !important;
        align-items: center;
        flex: 0 0 auto;
        padding: 0;
    }

    .keyword-roll-mobile .keyword-label {
        display: inline-flex;
        align-items: center;
        font-weight: 900;
        font-size: 10px;
        color: #111;
        padding: 2px 8px;
        background: rgba(0,0,0,.12);
        border: 1px solid rgba(0,0,0,.18);
        border-radius: 999px;
        white-space: nowrap;
    }

    .keyword-roll-mobile .keyword-viewport {
        flex: 1 1 auto;
        height: 20px;
        overflow: hidden;
        min-width: 0;
    }

    .keyword-roll-mobile .keyword-list {
        list-style: none;
        margin: 0;
        padding: 0;
        transition: transform .35s ease;
    }

    .keyword-roll-mobile .keyword-list li {
        height: 20px;
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }

    .keyword-roll-mobile .keyword-list .rank {
        font-weight: 800;
        font-size: 11px;
        color: #ff0000;
        width: 14px;
        text-align: center;
        flex-shrink: 0;
    }

    .keyword-roll-mobile .keyword-list .kw {
        font-size: 12px;
        font-weight: 800;
        color: #111;
        text-decoration: none;
    }

    .keyword-roll-mobile .keyword-list .kwc {
        font-size: 11px;
        color: #ff0000;
        margin-left: 4px;
        flex-shrink: 0;
    }

    .keyword-roll-mobile .keyword-actions {
        flex: 0 0 auto;
        display: flex;
        gap: 2px;
    }

    .keyword-roll-mobile .kw-btn {
        background: rgba(0,0,0,.10);
        border: 1px solid rgba(0,0,0,.15);
        border-radius: 5px;
        width: 20px;
        height: 20px;
        font-size: 12px;
        cursor: pointer;
        color: #111;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .keyword-roll-mobile {
        height: 24px !important;   /* 32 → 24 */
        padding: 0 6px !important;
    }

    .keyword-roll-mobile .keyword-label {
        font-size: 9px !important;
        padding: 1px 6px !important;
    }

    .keyword-roll-mobile .keyword-viewport {
        height: 16px !important;
    }

    .keyword-roll-mobile .keyword-list li {
        height: 16px !important;
        font-size: 11px !important;
    }

    .keyword-roll-mobile .keyword-list .rank {
        font-size: 10px !important;
    }

    .keyword-roll-mobile .keyword-list .kw {
        font-size: 11px !important;
    }

    .keyword-roll-mobile .kw-btn {
        width: 16px !important;
        height: 16px !important;
        font-size: 10px !important;
    }
}



@media (min-width: 769px) {
.brand-m {

    display: none;
}}

/* =========================
   Search Area
========================= */
.header-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-search {
    width: 100%;
    max-width: 400px;
    display: flex;
    align-items: stretch;
    border: 2px solid #fddf00;
    border-radius: 30px;
    overflow: hidden;
    background: #fff;
}

.search-input {
    flex: 1;
    padding: 14px 16px;
    border: none;
    outline: none;
    font-size: 15px;
    color: #222;
}

.search-input::placeholder {
    color: #999;
}

.search-btn {
    padding: 0 28px;
    background: #555;
    color: #fff;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

.search-btn:hover {
    background: #222;
}

/* =========================
   Keyword Roll
========================= */
.keyword-roll {

    display: flex;
    align-items: center;
    font-size: 13px;
    color: #ffe100;
    position: relative;
    background-color: #FFE100FF;
}

.keyword-label-wrap {
    display: flex;
    align-items: center;
    margin-right: 12px;
}

.keyword-label {
    font-weight: 700;
    color: #111;
    margin-right: 6px;
}

.keyword-badge {
    font-size: 11px;
    background: #f1f1f1;
    padding: 3px 8px;
    border-radius: 20px;
    color: #666;
}

.keyword-viewport {
    overflow: hidden;
    height: 20px;
}

.keyword-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.keyword-list li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rank {
    font-weight: 700;
    color: #111;
}

.kw {
    color: #333;
}

.kwc {
    color: #aaa;
    font-size: 12px;
}

/* 좌우 버튼 */
.keyword-actions {
    margin-left: 12px;
}

.kw-btn {
    background: none;
    border: 1px solid #ddd;
    width: 26px;
    height: 22px;
    font-size: 14px;
    cursor: pointer;
    color: #555;
    margin-left: 4px;
}

.kw-btn:hover {
    background: #f3f3f3;
}

/* =========================
   Dropdown
========================= */
.keyword-dropdown {
    position: absolute;
    top: 30px;
    left: 0;
    background: #fff;
    width: 320px;
    border: 1px solid #e6e6e6;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    padding: 16px;
    display: none;
    z-index: 50;
}

.keyword-dropdown.active {
    display: block;
}

.kwdd-title {
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 14px;
    color: #111;
}

.keyword-dropdown-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.keyword-dropdown-list li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid #f2f2f2;
}


/* 상단 바 */
.topbar {
    width: 100%;
    background: #111;
    color: #fff;
    font-size: 13px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.topbar-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 36px; /* 슬림하게 */
}

/* 좌측 */
.topbar-left {
    display: flex;
    gap: 8px;
    align-items: center;
    font-weight: 500;
}

.topbar-location {
    color: #aaa;
    font-weight: 600;
}

.topbar-time {
    color: #4d4d4d;
    font-weight: 700;
}

/* 우측 텔레그램 버튼 */
.tg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #229ED9;
    color: #fff;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    transition: 0.2s ease;
}

.tg-btn svg {
    width: 14px;
    height: 14px;
}

.tg-btn:hover {
    background: #1b8dc5;
}


.jm-top-btn{
    background: linear-gradient(135deg, #ffe100, #ffcc00);
    border: none;
    color: #111;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(255, 225, 0, 0.35);
    transition: all .25s ease;
}

.jm-top-btn:hover{
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(255, 225, 0, 0.55);
    background: linear-gradient(135deg, #fff200, #ffd000);
}

.jm-top-btn i{
    font-size: 18px;
}


/* ✅ TOP 버튼: 화면 안으로 고정 (기존 .gotop 값 무시) */
#gotop.gotop{
    right: 16px !important;
    bottom: 16px !important;
    left: auto !important;
    top: auto !important;
    z-index: 9999;
}

/* 혹시 부모에 transform이 걸려 fixed가 꼬이면 이게 도움이 됨 */
#gotop{
    transform: none !important;
}


/* =========================
   ✅ 24시간 TOP10 드롭다운 스타일
   (노랑+다크, 글로우, 깔끔한 호버)
   ========================= */

/* 래퍼가 기준점이 되게 */
.keyword-roll{
    position: relative;
    z-index: 60;
}

/* 라벨 영역(“24시간 실시간”)도 버튼처럼 */
.keyword-label-wrap{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 14px;



    user-select: none;
    cursor: default;
}

.keyword-label-wrap .keyword-label{
    font-weight: 900;
    letter-spacing: -.3px;
    color: #111;
}



/* 드롭다운 패널 */
.keyword-dropdown.kwdd-wide{
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 360px;                /* 스샷 느낌 유지 */
    border-radius: 16px;
    overflow: hidden;
    z-index: 9999;

    /* 다크 유리 느낌 + 브랜드 포인트 */
    background: linear-gradient(180deg, rgba(12,16,24,.96) 0%, rgba(8,10,16,.98) 100%);
    border: 1px solid rgba(255,212,0,.18);
    box-shadow:
            0 22px 60px rgba(0,0,0,.55),
            0 0 0 1px rgba(255,255,255,.04) inset;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 상단 타이틀 바 */
.keyword-dropdown .kwdd-title{
    padding: 12px 14px;
    font-weight: 900;
    letter-spacing: -.2px;
    color: #fff;

    background:
            linear-gradient(90deg, rgba(255,212,0,.22) 0%, rgba(255,212,0,.04) 55%, rgba(255,0,0,.08) 100%),
            rgba(255,255,255,.02);

    border-bottom: 1px solid rgba(255,255,255,.08);
}

/* 위쪽 삼각형(말풍선 느낌) */
.keyword-dropdown::before{
    content:"";
    position:absolute;
    top:-8px;
    right: 26px;
    width: 16px;
    height: 16px;
    transform: rotate(45deg);
    background: rgba(12,16,24,.96);
    border-left: 1px solid rgba(255,212,0,.16);
    border-top: 1px solid rgba(255,212,0,.16);
}

/* 리스트 기본 */
.keyword-dropdown-list{
    list-style: none;
    margin: 0;
    padding: 8px;
}

/* 한 줄 */
.keyword-dropdown-list li{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 12px;
    color: rgba(255,255,255,.92);

    /* 줄 구분선 느낌(가볍게) */
    border: 1px solid transparent;
}

/* 링크 */
.keyword-dropdown-list li .kw{
    color: rgba(255,255,255,.92);
    text-decoration: none;
    font-weight: 800;
    letter-spacing: -.2px;
    flex: 1;
}

/* 우측 카운트 */
.keyword-dropdown-list li .kwc{
    font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,.75);
    font-weight: 800;
}

/* 순위(배지처럼) */
.keyword-dropdown-list li .rank{
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;

    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: #111;

    background: rgba(255,212,0,.92);
    box-shadow: 0 8px 18px rgba(0,0,0,.35);
}

/* TOP3만 살짝 강조 */
.keyword-dropdown-list li:nth-child(1) .rank{
    background: linear-gradient(180deg, #ffd700 0%, #ffb300 100%);
}
.keyword-dropdown-list li:nth-child(2) .rank{
    background: linear-gradient(180deg, #e8eef7 0%, #b9c5d6 100%);
}
.keyword-dropdown-list li:nth-child(3) .rank{
    background: linear-gradient(180deg, #ffb07a 0%, #ff7a3c 100%);
}

/* 호버: 노랑 라인 + 다크 강조 */
.keyword-dropdown-list li:hover{
    background: linear-gradient(90deg, rgba(255,212,0,.18) 0%, rgba(255,212,0,.06) 35%, rgba(255,255,255,.02) 100%);
    border-color: rgba(255,212,0,.18);
    box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.keyword-dropdown-list li:hover .kw{
    color: #fff;
}
.keyword-dropdown-list li:hover .kwc{
    color: rgba(255,255,255,.92);
}

/* 클릭/탭 포커스 접근성 */
.keyword-dropdown-list li .kw:focus{
    outline: none;
}
.keyword-dropdown-list li:has(.kw:focus){
    background: linear-gradient(90deg, rgba(255,212,0,.22) 0%, rgba(255,212,0,.08) 40%, rgba(255,255,255,.02) 100%);
    border-color: rgba(255,212,0,.24);
}

/* 모바일/좁은 화면에서 패널 폭 줄이기 */
@media (max-width: 480px){
    .keyword-dropdown.kwdd-wide{ width: min(92vw, 360px); right: 0; }
}



.keyword-roll-mobile {
    display: none;
}

@media (max-width: 768px) {
    .keyword-roll-mobile {
        display: flex;
        width: 100%;
       
        padding-bottom: 6px;
    }
}

/* 텔레그램 + 인기검색어 묶음 */
.topbar-right-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    .keyword-roll-mobile {
        display: flex !important;
        align-items: center;
        gap: 6px;
        height: 24px;
        padding: 0 6px;
        box-sizing: border-box;
        background: #FFE100;
        border-radius: 6px;
        width: auto; /* ✅ 텔레그램 버튼 너비에 맞게 */
        min-width: 0;
    }

    /* 텔레그램 버튼 너비 기준으로 맞추기 */
    .topbar-right-group .tg-btn,
    .topbar-right-group .keyword-roll-mobile {
        width: 100%; /* 묶음 안에서 같은 폭 */
    }
}


@media (max-width: 768px) {
    .topbar-inner {
        height: auto !important;
        flex-wrap: nowrap !important;  /* ✅ 줄바꿈 방지 */
        align-items: center !important;
        padding: 6px 0 !important;
        justify-content: space-between;
    }

    /* 로고(brand-m)는 왼쪽 */
    .topbar-inner .brand-m {
        flex: 0 0 auto;
    }

    /* 텔레그램+인기검색어 묶음은 오른쪽 */
    .topbar-right-group {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
    }
}


@media (max-width: 768px) {

    /* 텔레그램 버튼 크기 */
    .topbar-right-group .tg-btn {
        padding: 4px 10px;
        font-size: 11px;
        gap: 4px;
        border-radius: 8px;
    }

    .topbar-right-group .tg-btn svg {
        width: 11px;
        height: 11px;
    }

    /* 인기검색어 바 크기 */
    .keyword-roll-mobile {
        height: 22px;
        padding: 0 6px;
        gap: 5px;
        border-radius: 6px;
    }

    .keyword-roll-mobile .keyword-label {
        font-size: 9px;
        padding: 1px 5px;
    }

    .keyword-roll-mobile .keyword-viewport {
        height: 16px;
    }

    .keyword-roll-mobile .keyword-list li {
        height: 16px;
        font-size: 11px;
        gap: 5px;
    }

    .keyword-roll-mobile .keyword-list .rank {
        font-size: 10px;
        width: 12px;
    }

    .keyword-roll-mobile .keyword-list .kw {
        font-size: 11px;
    }

    .keyword-roll-mobile .keyword-list .kwc {
        font-size: 10px;
    }

    .keyword-roll-mobile .kw-btn {
        width: 18px;
        height: 18px;
        font-size: 11px;
    }
}


@media (max-width: 768px) {
    .topbar-inner {
        height: auto !important;
        flex-wrap: nowrap !important;
        align-items: center !important;

        justify-content: space-between;
        overflow: hidden; /* ✅ 넘침 방지 */
        box-sizing: border-box;
        width: 100%;
    }

    /* 로고 왼쪽 고정, 줄어들 수 있게 */
    .topbar-inner .brand-m {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
    }

    /* 오른쪽 묶음: 넘치지 않게 */
    .topbar-right-group {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
        min-width: 0;
        max-width: 55%; /* ✅ 화면의 절반 조금 넘게만 */
    }

    /* 텔레그램 버튼 */
    .topbar-right-group .tg-btn {
        padding: 4px 8px;
        font-size: 11px;
        gap: 4px;
        border-radius: 8px;
        white-space: nowrap;
        width: 100px;
    }

    .topbar-right-group .tg-btn svg {
        width: 11px;
        height: 11px;
        flex-shrink: 0;
    }

    /* 인기검색어 */
    .topbar-right-group .keyword-roll-mobile {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }
}


#hd_pop .hd_pops {
    position: fixed !important;

}

@media (max-width: 575.98px) {
    #hd_pop .hd_pops {
        top: 28em !important;
        right: 10px !important;
        width: auto !important;

    }
}


#hd_pop .hd_pops {
    bottom: 100px !important;
    right: 10px !important;
    top:unset !important;
    left:unset !important;
}




     /* ===== 전체 래퍼 ===== */
 .board-basic-view .bb-panel{
     border:0;
     border-radius:18px;
     box-shadow:0 8px 30px rgba(0,0,0,.06);
 }

/* ===== 헤더(카테고리+제목) 가운데 정렬 ===== */
.board-basic-view .view-head{
    text-align:center;
    border:0 !important;
    border-radius:18px;
    background:linear-gradient(180deg,#ffffff 0%,#fff8ef 100%);
    box-shadow:0 8px 30px rgba(0,0,0,.06);
}
.board-basic-view .view-head .board-subject{
    display:inline-block;
    font-size:.85rem;
    font-weight:700;
    letter-spacing:.04em;
    color:#ff7a18;
    background:#fff1e0;
    padding:4px 14px;
    border-radius:999px;
    margin-bottom:12px;
}
.board-basic-view .view-title{
    text-align:center;
    font-weight:800;
    line-height:1.35;
    margin:0;
    color:#222;
}
.board-basic-view .view-title .badge{ vertical-align:middle; }

/* ===== 상단 버튼바 ===== */
.board-basic-view .button-wrap{
    border:0 !important;
    border-radius:14px;
    box-shadow:0 4px 16px rgba(0,0,0,.05);
}

/* ===== 본문 패널 ===== */
.board-basic-view .view-contents{
    border:0 !important;
    border-radius:18px;
    box-shadow:0 8px 30px rgba(0,0,0,.06);
}

/* ===== 사이트 바로가기 버튼 (노랑→빨강) ===== */
.bb-go-wrap{ text-align:center; padding:34px 15px 14px; }

.bb-go-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    max-width:92%;
    padding:22px 52px;
    font-size:1.65rem;
    font-weight:900;
    line-height:1.2;
    color:#fff !important;
    text-decoration:none;
    letter-spacing:.01em;
    border-radius:60px;
    text-shadow:0 2px 6px rgba(180,0,0,.35);
    background:linear-gradient(135deg,#ffd200 0%,#ff9500 42%,#ff3d00 100%);
    background-size:200% 200%;
    box-shadow:0 12px 30px rgba(255,90,0,.45);
    overflow:hidden;
    animation:bbGoGlow 2.2s ease-in-out infinite, bbGoFlow 6s ease infinite;
    transition:transform .15s ease, box-shadow .15s ease;
}
.bb-go-btn:hover{
    transform:translateY(-3px) scale(1.03);
    box-shadow:0 18px 44px rgba(255,61,0,.6);
    color:#fff !important;
}
.bb-go-btn:active{ transform:translateY(0) scale(.99); }

.bb-go-btn .bb-go-ico{ font-size:1.5rem; display:inline-flex; }
.bb-go-btn .bb-go-arrow{ transition:transform .2s ease; }
.bb-go-btn:hover .bb-go-arrow{ transform:translateX(6px); }

/* 빛 흐르는 효과 */
.bb-go-btn::before{
    content:"";
    position:absolute;
    top:0; left:-150%;
    width:60%; height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);
    transform:skewX(-20deg);
    animation:bbGoShine 3s ease-in-out infinite;
}

@keyframes bbGoGlow{
    0%,100%{ box-shadow:0 12px 30px rgba(255,90,0,.45); }
    50%{ box-shadow:0 12px 46px rgba(255,61,0,.72); }
}
@keyframes bbGoFlow{
    0%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
}
@keyframes bbGoShine{
    0%{ left:-150%; }
    60%,100%{ left:150%; }
}

/* 버튼 아래 wr_4 설명 (가운데) */
.bb-go-desc{
    max-width:760px;
    margin:58px auto 12px;
    text-align:center;
    font-size:1.06rem;
    line-height:1.85;
    color:#444;
    word-break:break-word;
}

/* ===== 이전/다음 업체 (깔끔한 텍스트 카드) ===== */
.bb-nav .bb-nav-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    height:100%;
    min-height:74px;
    padding:16px 20px;
    background:#fff;
    border:1px solid #f0ede8;
    border-radius:14px;
    text-decoration:none;
    color:#333;
    box-shadow:0 3px 12px rgba(0,0,0,.05);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bb-nav .bb-nav-card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(255,90,0,.16);
    border-color:#ffd8b0;
}
.bb-nav .bb-nav-card.next{ text-align:right; align-items:flex-end; }
.bb-nav .bb-nav-label{
    display:inline-flex; align-items:center; gap:4px;
    font-size:.78rem; font-weight:800; color:#ff5a00;
}
.bb-nav .bb-nav-title{
    display:block; width:100%; font-weight:600; color:#333;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bb-nav .bb-nav-empty{
    display:flex; align-items:center; justify-content:center;
    height:100%; min-height:74px;
    border:1px dashed #e3ded7; border-radius:14px;
    color:#bbb; font-size:.9rem;
}

@media (max-width:576px){
    .bb-go-btn{ font-size:1.25rem; padding:18px 32px; }
    .bb-go-desc{ font-size:.98rem; }
}


/* =====================================================
   상단 버튼 툴바 (목록 / 도구 버튼)
   gallery-view.css 맨 아래에 붙여넣기
   ===================================================== */
.board-basic-view .bb-toolbar{
    gap:8px;
    border:0;
    border-radius:14px;
    box-shadow:0 4px 16px rgba(0,0,0,.05);
}

/* ── 목록으로 버튼 ── */
.board-basic-view .bb-btn-list{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 24px;
    font-size:.98rem;
    font-weight:700;
    line-height:1;
    color:#fff;
    text-decoration:none;
    border-radius:999px;
    background:linear-gradient(135deg,#ff9d2f 0%,#ff6a00 100%);
    box-shadow:0 6px 16px rgba(255,106,0,.30);
    transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.board-basic-view .bb-btn-list:hover{
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(255,106,0,.42);
    filter:brightness(1.04);
}
.board-basic-view .bb-btn-list:active{ transform:translateY(0); }

/* ── 우측 도구 버튼들 ── */
.board-basic-view .bb-tools{ gap:6px; }

.board-basic-view .bb-tool{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:8px 14px;
    font-size:.9rem;
    font-weight:600;
    line-height:1;
    color:#555;
    text-decoration:none;
    background:#f6f6f8;
    border:1px solid #ececf0;
    border-radius:999px;
    transition:color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.board-basic-view .bb-tool:hover{
    color:#222;
    background:#fff;
    border-color:#ffd2a8;
    box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.board-basic-view .bb-tool .bi{ font-size:1rem; }

/* 삭제 버튼 강조 */
.board-basic-view .bb-tool.danger{ color:#d9534f; }
.board-basic-view .bb-tool.danger:hover{ color:#c9302c; border-color:#f3b6b3; }

@media (max-width:576px){
    .board-basic-view .bb-btn-list{ padding:9px 18px; }
    .board-basic-view .bb-tool{ padding:8px 11px; }
}