.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: #000000;
    font-size: 14px;
    line-height: 1.8em;
    margin: 30px auto;
    max-width: 800px;
}

.footer-linkcom a {
    color: #4da3ff;
    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; /* 아이템들이 줄어들지 않게 */
    }
}