/* ============================================================
   bgu1
   ============================================================ */
@font-face{
    font-family:'Jalnan';
    src:url('/assets/fonts/JalnanGothic.woff2') format('woff2');
    font-weight:normal;
    font-display:swap;
}

@font-face{
    font-family:'Pretendard';
    src:url('/assets/fonts/Pretendard-Regular.woff2') format('woff2');
    font-weight:400;
    font-display:swap;
}
@font-face{
    font-family:'Pretendard';
    src:url('/assets/fonts/Pretendard-Medium.woff2') format('woff2');
    font-weight:500;
    font-display:swap;
}
@font-face{
    font-family:'Pretendard';
    src:url('/assets/fonts/Pretendard-Bold.woff2') format('woff2');
    font-weight:700;
    font-display:swap;
}

@font-face{
    font-family:'SUIT';
    src:url('/assets/fonts/SUIT-Regular.woff2') format('woff2');
    font-weight:400;
    font-display:swap;
}
@font-face{
    font-family:'SUIT';
    src:url('/assets/fonts/SUIT-Medium.woff2') format('woff2');
    font-weight:500;
    font-display:swap;
}
@font-face{
    font-family:'SUIT';
    src:url('/assets/fonts/SUIT-Bold.woff2') format('woff2');
    font-weight:700;
    font-display:swap;
}
@font-face{
    font-family:'SUIT';
    src:url('/assets/fonts/SUIT-Thin.woff2') format('woff2');
    font-weight:100;
    font-display:swap;
}

:root{
    --bg:#0a0707;
    --bg-card:#130d0d;
    --bg-elev:#160d0d;
    --crimson:#e24b4a;
    --crimson-dark:#a32d2d;
    --crimson-light:#f0706f;
    --coral:#f0997b;
    --fill-a:#3a1410;
    --fill-b:#5e1f1c;
    --text:#f5e8e8;
    --text-soft:#e0c4c4;
    --text-mute:#a8a29e;
    --text-meta:#6b6360;
    --line:rgba(226,75,74,.12);
    --line-strong:rgba(226,75,74,.2);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
    font-family:system-ui,-apple-system,'Apple SD Gothic Neo',Segoe UI,Roboto,sans-serif;
    -webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

.container{width:100%;margin:0 auto;}

/* ---------- 헤더 ---------- */
.site-header{
    display:flex;align-items:center;gap:18px;
    padding:16px 24px;
    background:linear-gradient(180deg,rgba(35,12,12,.6),rgba(10,7,7,.92));

}
.logo{font-family:'Jalnan',system-ui,sans-serif;font-weight:800;letter-spacing:1px;flex-shrink:0;
    display:inline-flex;align-items:baseline;}
.logo-bam{font-size:55px;background:linear-gradient(135deg,var(--crimson-dark),var(--crimson),var(--coral));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.logo-guide{font-size:40px;color:#fff;}
.header-search{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:9px;}
.header-search form{width:60%;min-width:220px;display:flex;align-items:center;gap:10px;
    background:var(--bg-elev);border:1px solid transparent;border-radius:999px;padding:8px 8px 8px 20px;
    background-image:linear-gradient(var(--bg-elev),var(--bg-elev)),linear-gradient(135deg,var(--crimson-dark),var(--crimson),var(--coral));
    background-origin:border-box;background-clip:padding-box,border-box;}
.header-search input{flex:1;background:transparent;border:0;outline:0;color:var(--text);font-size:14px;}
.header-search input::placeholder{color:#7a6a6a;}
.header-search form > i{color:var(--crimson-light);font-size:17px;flex-shrink:0;}
.search-go{display:flex;align-items:center;justify-content:center;flex-shrink:0;
    width:36px;height:36px;border:0;border-radius:999px;cursor:pointer;
    background:linear-gradient(135deg,var(--crimson-dark),var(--crimson));transition:filter .2s;}
.search-go:hover{filter:brightness(1.12);}
.search-go i{color:#fff;font-size:17px;}
/* 인기 검색어 */
.pop-search{width:60%;min-width:220px;max-width:100%;display:flex;align-items:center;gap:10px;}
.pop-search-label{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--crimson);
    font-weight:500;flex-shrink:0;}
.pop-search-label i{font-size:14px;}
.pop-search-tags{display:flex;gap:8px;overflow-x:auto;min-width:0;flex:1;scrollbar-width:none;-ms-overflow-style:none;}
.pop-search-tags::-webkit-scrollbar{display:none;}
.pop-tag{display:flex;align-items:center;gap:6px;font-size:12px;color:#c4a0a0;white-space:nowrap;
    background:var(--bg-elev);border:1px solid rgba(226,75,74,.18);padding:6px 13px 6px 8px;
    border-radius:999px;transition:border-color .2s,color .2s;flex-shrink:0;}
.pop-tag:hover{border-color:rgba(226,75,74,.4);color:var(--crimson-light);}
.pop-rank{color:var(--crimson);font-weight:700;font-style:italic;}

/* 언어 드롭다운 */
.lang-dd{position:relative;flex-shrink:0;display:flex;}
.lang-current{display:flex;align-items:center;gap:8px;background:var(--bg-elev);
    border:1px solid rgba(226,75,74,.28);border-radius:10px;padding:8px 12px;cursor:pointer;}
/* 고객센터 텔레그램  */
.cs-telegram{--cs-icon:26px;
    display:flex;align-items:center;gap:9px;flex-shrink:0;text-decoration:none;
    background:var(--bg-elev);border:1px solid rgba(34,158,217,.35);border-radius:10px;
    padding:7px 13px;transition:border-color .2s;}
.cs-telegram:hover{border-color:rgba(34,158,217,.6);}
.cs-tg-icon{display:flex;align-items:center;justify-content:center;
    width:var(--cs-icon);height:var(--cs-icon);border-radius:50%;background:#229ED9;flex-shrink:0;}
.cs-tg-icon i{color:#fff;font-size:calc(var(--cs-icon) * 0.58);}
.cs-tg-text{display:flex;flex-direction:column;line-height:1.25;}
.cs-tg-label{font-size:10px;color:#7a6a6a;}
.cs-tg-id{font-size:13px;color:var(--text-soft);}
.lang-badge{font-size:10px;font-weight:700;background:var(--crimson-dark);color:#fff;
    padding:2px 5px;border-radius:3px;letter-spacing:.5px;}
/* 동그란 국기  */
.lang-flag{--flag-size:26px;
    width:var(--flag-size);height:var(--flag-size);border-radius:50%;
    object-fit:cover;flex-shrink:0;border:1px solid rgba(255,255,255,.15);
    box-shadow:0 1px 3px rgba(0,0,0,.4);}
.lang-name{font-size:13px;color:var(--text-soft);}
.lang-dd .chev{color:var(--text-mute);font-size:14px;}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;background:#160e0e;
    border:1px solid rgba(226,75,74,.22);border-radius:10px;overflow:hidden;min-width:150px;
    box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:50;display:none;}
.lang-dd.open .lang-menu{display:block;}
.lang-menu a{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-soft);}
.lang-menu a:hover{background:rgba(226,75,74,.12);color:var(--crimson-light);}
.lang-menu a.on{background:rgba(226,75,74,.12);color:var(--crimson-light);}
.lang-menu .lang-badge{background:#3a3a3a;}
.lang-menu a.on .lang-badge{background:var(--crimson-dark);}

/* ---------- 카테고리 메뉴 ---------- */
.cat-nav-wrap{background:radial-gradient(ellipse at top,rgba(226,75,74,.06),transparent 70%);}
.cat-nav{display:grid;grid-template-columns:repeat(6,1fr);     padding: 0 5px 5px;}

.cat-item{position:relative;text-align:center;font-size:17px;padding:15px 10px; font-family:'SUIT',system-ui,-apple-system,'Apple SD Gothic Neo',Segoe UI,Roboto,sans-serif; font-weight: 600;
    background:#15100f;color:var(--text-soft);cursor:pointer;overflow:hidden;
    border-right:1px solid var(--line);border-bottom:1px solid var(--line);
    transition:background .25s,color .25s;}
.cat-item span{position:relative;z-index:1;transition:color .3s,letter-spacing .3s;}
.cat-item::before{content:"";position:absolute;inset:0;
    background:linear-gradient(135deg,var(--fill-a),var(--fill-b));
    transform:translateY(101%);transition:transform .35s cubic-bezier(.2,.8,.2,1);z-index:0;}
.cat-item::after{content:"";position:absolute;left:50%;bottom:9px;width:0;height:2px;
    background:var(--crimson);transform:translateX(-50%);transition:width .3s;border-radius:2px;z-index:1;}
.cat-item:not(.active):hover span{color:#ffd4d3;letter-spacing:.5px;}
.cat-item:not(.active):hover::before{transform:translateY(0);}
.cat-item:not(.active):hover::after{width:46%;}
.cat-item.active{background:linear-gradient(145deg,var(--crimson-dark),var(--crimson));cursor:default;}
.cat-item.active span{color:#fff;font-weight:600;}

/* ---------- 배너 ---------- */
.banner-row{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:5px 0;}
.banner-slot{aspect-ratio:1200/150;overflow:hidden;background:#140c0c;
    display:flex;align-items:center;justify-content:center;}
.banner-slot img{width:100%;height:100%;object-fit:cover;}

/* 데스크탑 배너는 데스크탑만, 모바일 배너는 모바일만 */
.banner-mobile{display:none;}
.banner-mobile .banner-slot{aspect-ratio:600/230;}  /* 모바일 배너 3:1 */

/* ---------- 섹션 공통 ---------- */
.section{padding:6px 24px 18px;}
.section-head{display:flex;align-items:center;gap:9px;margin-bottom:16px;}
.section-head .ttl{font-size:16px;font-weight:600;color:var(--crimson-light);}
.section-head .sub{font-size:11px;color:#7a6a6a;}
.section-head i{color:var(--crimson);font-size:19px;}
.section-divider{height:2px;margin:0 24px;
    background:linear-gradient(90deg,transparent,rgba(226,75,74,.5),transparent);}

/* 카드 공통 */
.vcard{overflow:hidden;background:var(--bg-card);
    border:1px solid var(--line);cursor:pointer;transition:transform .25s,border-color .25s;}
.vcard:hover{transform:translateY(-4px);border-color:rgba(240,112,111,.45);}
.vthumb{aspect-ratio:272/199;background:linear-gradient(135deg,#1a0e0e,#2a1212);
    position:relative;display:flex;align-items:center;justify-content:center;}
.vthumb img{width:100%;height:100%;object-fit:cover;}
.vthumb .ph{color:rgba(240,112,111,.3);font-size:20px;}
.vinfo{padding:9px 10px;}
.vtitle{font-size:15px;color:#f0e0e0;line-height:1.4;margin-bottom:6px;height:2.8em; text-align: center;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; font-family:'Pretendard',system-ui,-apple-system,'Apple SD Gothic Neo',Segoe UI,Roboto,sans-serif;
    -webkit-font-smoothing:antialiased;}
.vmeta{font-size:10px;color:var(--text-meta);display:flex;align-items:center;justify-content:space-between;flex-direction:row-reverse;}
.vmeta .dot{display:none;}


/* ---------- 카드 NEW 뱃지 ---------- */
.badge-new{font-size:9px;font-weight:700;color: #ffffff;background:var(--crimson);
    padding:1px 5px;border-radius:4px;margin-left:4px;letter-spacing:.5px;}


/* 메인 최신 인기 영상*/
.best-card .vtitle{
    font-size:12px;
}


/* ---------- 베스트 슬라이드 ---------- */
.best-head .ttl{color:var(--crimson-light);}
.best-viewport{overflow:hidden;padding:4px 24px 4px;cursor:grab;}
.best-viewport.grabbing{cursor:grabbing;}
.best-track{display:flex;gap:12px;width:max-content;will-change:transform;}
.best-card{flex:0 0 160px;}
.best-card .rank{position:absolute;top:0;left:0;width:30px;height:30px;
    display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;
    font-style:italic;color:#fff;background:linear-gradient(135deg,var(--crimson-dark),var(--crimson));
    border-bottom-right-radius:10px;z-index:2;}
.best-card .rank.r1{background:linear-gradient(135deg,var(--crimson),var(--coral));
    box-shadow:0 0 12px rgba(240,112,111,.5);}
.best-hint{text-align:center;font-size:10px;color:#5a504d;margin-top:6px;}

/* ---------- 날짜 몇시간전 색깔 ---------- */
.date-fresh{color:#fff;}
.date-recent{color:rgba(255,255,255,.7);}
.date-old{}

/* ---------- 최신 영상 반응형 그리드 ---------- */
.latest-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;}
@media (min-width:768px){ .latest-grid{grid-template-columns:repeat(3,1fr);} }
@media (min-width:1024px){ .latest-grid{grid-template-columns:repeat(4,1fr);} }
@media (min-width:1440px){ .latest-grid{grid-template-columns:repeat(7,1fr);} }
.latest-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.latest-head .ttl{font-size:16px;font-weight:600;color:#f0b3b3;}
.latest-head .ttl .sub{font-size:12px;color:var(--text-mute);font-weight:400;}
.latest-more{font-size:12px;color:var(--crimson);cursor:pointer;display:flex;align-items:center;gap:3px;}


/* ===== 카테고리별 · 화면별 표시 줄 수 제어 ===== */
/* kor: 7열2줄 4열3줄 3열3줄 2열4줄 */
@media (min-width:1440px){ .cat-kor .vcard:nth-child(n+15){display:none;} }
@media (min-width:1024px) and (max-width:1439.98px){ .cat-kor .vcard:nth-child(n+13){display:none;} }
@media (min-width:768px) and (max-width:1023.98px){ .cat-kor .vcard:nth-child(n+10){display:none;} }
@media (max-width:767.98px){ .cat-kor .vcard:nth-child(n+9){display:none;} }

/* asia: 7열1줄 4열2줄 3열2줄 2열1줄 */
@media (min-width:1440px){ .cat-asia .vcard:nth-child(n+8){display:none;} }
@media (min-width:1024px) and (max-width:1439.98px){ .cat-asia .vcard:nth-child(n+9){display:none;} }
@media (min-width:768px) and (max-width:1023.98px){ .cat-asia .vcard:nth-child(n+7){display:none;} }
@media (max-width:767.98px){ .cat-asia .vcard:nth-child(n+3){display:none;} }

/* bj: 7열1줄 4열2줄 3열2줄 2열2줄 */
@media (min-width:1440px){ .cat-bj .vcard:nth-child(n+8){display:none;} }
@media (min-width:1024px) and (max-width:1439.98px){ .cat-bj .vcard:nth-child(n+9){display:none;} }
@media (min-width:768px) and (max-width:1023.98px){ .cat-bj .vcard:nth-child(n+7){display:none;} }
@media (max-width:767.98px){ .cat-bj .vcard:nth-child(n+5){display:none;} }

/* japan: 7열1줄 4열2줄 3열2줄 2열1줄 */
@media (min-width:1440px){ .cat-japan .vcard:nth-child(n+8){display:none;} }
@media (min-width:1024px) and (max-width:1439.98px){ .cat-japan .vcard:nth-child(n+9){display:none;} }
@media (min-width:768px) and (max-width:1023.98px){ .cat-japan .vcard:nth-child(n+7){display:none;} }
@media (max-width:767.98px){ .cat-japan .vcard:nth-child(n+3){display:none;} }

/* west: 7열1줄 4열2줄 3열2줄 2열1줄 */
@media (min-width:1440px){ .cat-west .vcard:nth-child(n+8){display:none;} }
@media (min-width:1024px) and (max-width:1439.98px){ .cat-west .vcard:nth-child(n+9){display:none;} }
@media (min-width:768px) and (max-width:1023.98px){ .cat-west .vcard:nth-child(n+7){display:none;} }
@media (max-width:767.98px){ .cat-west .vcard:nth-child(n+3){display:none;} }

/* ---------- 푸터 ---------- */
.site-footer{padding:14px 24px 28px;text-align:center;border-top:1px solid rgba(226,75,74,.1);margin-top:8px;}
.site-footer span{font-size:11px;color:#57534e;}

/* ---------- 반응형 ---------- */
@media (max-width:1024px){
    .cat-nav{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:768px){
    .site-header{flex-wrap:wrap;gap:12px;padding:14px 16px;}
    .logo-bam{font-size:31px;}
    .logo-guide{font-size:22px;}
    .header-search{order:3;flex-basis:100%;}
    .header-search form{width:100%;}
    .pop-search{width:100%;}
    .cat-nav{grid-template-columns:repeat(3,1fr);}

    .banner-row{grid-template-columns:1fr 1fr;}    .latest-grid{gap:4px;}   /* 모바일: 텔레그램은 로고만, 언어선택은 국기만 (글자 숨김) + 우측 끝 정렬 */

    .banner-desktop{display:none;}   /* 모바일: 데스크탑 배너 숨김 */
    .banner-mobile{display:block;}   /* 모바일: 모바일 배너 표시 */

    .cs-tg-text{display:none;}
    .cs-telegram{padding:7px;margin-left:auto;}
    .lang-name{display:none;}
    .lang-current{padding:7px 9px;}
    .section {
        padding: 6px 5px 18px;
    }
    .cat-item { font-size: 12px;}


}
@media (max-width:480px){
    .cat-nav{grid-template-columns:repeat(3,1fr);}
    .best-card{flex-basis:140px;}
    .section {
        padding: 6px 5px 18px;
    }
}


@media (max-width:320px){
    .search-go{display:none;}   /* 아주 좁은 화면: 검색 버튼 숨김 (엔터로 검색) */
}

@media (min-width:769px) and (max-width:1100px){
    .header-search form{width:100%;min-width:0;}
    .pop-search{width:100%;min-width:0;}
    .cs-tg-text{display:none;}        /* 텔레그램은 아이콘만 */
    .cs-telegram{padding:7px;}

}

/* ============================================================
   영상 상세 페이지
   ============================================================ */
.lecture-detail{padding:8px 24px 40px;max-width:1000px;margin:0 auto;}
.video-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;
    border-radius:12px;overflow:hidden;margin-bottom:20px;border:1px solid var(--line);}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.lecture-head{margin-bottom:18px;}
.lecture-cat{display:inline-block;font-size:12px;color:var(--crimson-light);
    background:rgba(226,75,74,.1);border:1px solid var(--line);
    padding:4px 12px;border-radius:999px;margin-bottom:10px;}
.lecture-title{font-size:22px;font-weight:700;line-height:1.4;margin:0 0 10px;color:var(--text);}
.lecture-meta{font-size:13px;color:var(--text-mute);display:flex;align-items:center;gap:8px;}
.lecture-meta i{font-size:14px;vertical-align:-2px;}
.lecture-meta .dot{color:#4a4441;}
.lecture-body{font-size:15px;line-height:1.8;color:var(--text-soft);
    background:var(--bg-card);border:1px solid var(--line-soft);border-radius:12px;
    padding:20px 22px;margin-bottom:24px;white-space:pre-line;}
.lecture-nav{display:flex;flex-direction:column;gap:8px;margin-top:24px;}
.lec-nav-item{display:flex;align-items:center;gap:14px;padding:14px 18px;
    background:var(--bg-card);border:1px solid var(--line-soft);border-radius:10px;
    transition:border-color .2s,background .2s;}
a.lec-nav-item:hover{border-color:var(--crimson);background:rgba(226,75,74,.05);}
.lec-nav-item .dir{font-size:12px;color:var(--text-mute);flex-shrink:0;width:90px;
    display:flex;align-items:center;gap:4px;}
.lec-nav-item .t{font-size:14px;color:var(--text-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lec-nav-item.disabled{opacity:.4;}
.lec-nav-item.disabled .t{color:var(--text-mute);}

@media (max-width:768px){
    .lecture-detail{padding-left:16px;padding-right:16px;}
    .lecture-title{font-size:18px;}
}

/* ---------- 페이지 나누기 ---------- */
.pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin:32px 0 8px;}
.pagination .pg{display:flex;align-items:center;justify-content:center;min-width:38px;height:38px;
    padding:0 10px;border-radius:8px;background:var(--bg-card);border:1px solid var(--line);
    color:var(--text-soft);font-size:13px;transition:all .2s;}
.pagination .pg:hover{border-color:var(--crimson);color:var(--text);}
.pagination .pg.on{background:linear-gradient(135deg,var(--crimson-dark),var(--crimson));
    border-color:transparent;color:#fff;font-weight:600;}
.pagination .pg-gap{color:var(--text-mute);padding:0 4px;}



/* ---------- 검색 결과 묶음 ---------- */
.search-group{margin-bottom:32px;}
.search-group-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;
    padding-bottom:10px;border-bottom:1px solid var(--line);}
.search-group-head .sg-name{font-size:16px;font-weight:600;color:var(--crimson-light);}
.search-group-head .sg-name:hover{text-decoration:underline;}
.search-group-head .sg-count{font-size:12px;color:var(--text-mute);}
.search-group-head .sg-more{margin-left:auto;font-size:12px;color:var(--crimson);
    display:flex;align-items:center;gap:3px;}
.search-group-head .sg-more:hover{color:var(--crimson-light);}

/* ---------- 인기 영상 탭 ---------- */
.pop-tabs{display:flex;gap:8px;margin-bottom:20px;border-bottom:1px solid var(--line);padding-bottom:0;}
.pop-tab{padding:11px 22px;font-size:14px;color:var(--text-soft);border-bottom:2px solid transparent;
    margin-bottom:-1px;transition:color .2s,border-color .2s;}

@media (max-width:768px){
    .pop-tab{padding:11px 3px;}
}


.pop-tab:hover{color:var(--text);}
.pop-tab.on{color:var(--crimson-light);font-weight:600;border-bottom-color:var(--crimson);}
/* 인기 영상 카드의 순위 배지도 .latest-grid 안에서 보이게 */
.latest-grid .vthumb .rank{position:absolute;top:0;left:0;width:28px;height:28px;
    display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;
    font-style:italic;color:#fff;background:linear-gradient(135deg,var(--crimson-dark),var(--crimson));
    border-bottom-right-radius:10px;z-index:2;}
.latest-grid .vthumb .rank.r1{background:linear-gradient(135deg,var(--crimson),var(--coral));
    box-shadow:0 0 12px rgba(240,112,111,.5);}

/* ---------- 카테고리 메뉴: 인기 + 호버 서브메뉴 ---------- */
.cat-item.cat-popular{position:relative;padding:0;overflow:visible;background:#15100f;}
/* 안쪽 박스: 차오름 배경(::before)을 여기 가둠 → 애니메이션은 다른 칸과 동일하게 작동.
   바깥 .cat-popular는 overflow:visible 이라 서브메뉴만 칸 밖으로 내보냄. */
.cat-popular-main{display:block;position:relative;width:100%;height:100%;padding:17px 6px;
    color:inherit;overflow:hidden;z-index:1;}
.cat-popular-main span{position:relative;z-index:1;transition:color .3s,letter-spacing .3s;}
.cat-item.cat-popular::before,
.cat-item.cat-popular::after{display:none;} /* 바깥 칸엔 효과 없음(안쪽 박스가 담당) */
.cat-popular-main::before{content:"";position:absolute;inset:0;
    background:linear-gradient(135deg,var(--fill-a),var(--fill-b));
    transform:translateY(101%);transition:transform .35s cubic-bezier(.2,.8,.2,1);z-index:0;}
.cat-popular-main::after{content:"";position:absolute;left:50%;bottom:9px;width:0;height:2px;
    background:var(--crimson);transform:translateX(-50%);transition:width .3s;border-radius:2px;z-index:1;}
.cat-item.cat-popular:not(.active):hover .cat-popular-main::before{transform:translateY(0);}
.cat-item.cat-popular:not(.active):hover .cat-popular-main::after{width:46%;}
.cat-item.cat-popular:not(.active):hover .cat-popular-main span{color:#ffd4d3;letter-spacing:.5px;}
.cat-item.cat-popular.active{background:linear-gradient(145deg,var(--crimson-dark),var(--crimson));}
.cat-item.cat-popular.active .cat-popular-main span{color:#fff;font-weight:600;}
/* 서브메뉴 */
.cat-submenu{position:absolute;display:none;top:100%;left:0;min-width:100%;background:#160e0e;
    border:1px solid var(--line-strong);border-top:0;border-radius:0 0 8px 8px;
    overflow:hidden;z-index:60;box-shadow:0 8px 20px rgba(0,0,0,.5);}
.cat-item.cat-popular:hover .cat-submenu{display:block;}
.cat-submenu a{display:block;padding:11px 16px;font-size:13px;color:var(--text-soft);
    white-space:nowrap;transition:background .2s,color .2s;}
.cat-submenu a:hover{background:rgba(226,75,74,.15);color:var(--crimson-light);}
/* 모바일: 호버 없음 → 서브메뉴 항상 숨기고 인기칸은 일반 링크처럼 */
@media (max-width:768px){
    .cat-submenu,
    .cat-item.cat-popular:hover .cat-submenu{display:none;}
}

/* ---------- 헤더 배너 wrap ---------- */
.banner-wrap{padding:0 5px;}
.banner-slot.banner-empty{background:#140c0c;border:1px dashed #2a1212;}
a.banner-slot{cursor:pointer;transition:opacity .2s;}
a.banner-slot:hover{opacity:.9;}
@media (max-width:768px){

}


/* ---------- 상세페이지 하단 배너 (3줄: 고정+랜덤) ----------
   배너 권장 크기 400×100 (4:1). 최대폭은 --vb-width 한 곳에서 조절 */
.view-banner-wrap{--vb-width:400px;
    width:100%;padding:10px 0 6px;border-top:1px solid var(--line);margin-top:8px;
    display:flex;flex-direction:column;gap:8px;}
.view-banner-row{display:flex;justify-content:center;align-items:center;padding:0 16px;}
.view-banner{display:block;width:100%;max-width:var(--vb-width);aspect-ratio:400/100;
    border-radius:8px;overflow:hidden;transition:opacity .2s;
    background:#140c0c;border:1px solid var(--line);}
a.view-banner:hover{opacity:.9;}
.view-banner img{display:block;width:100%;height:100%;object-fit:cover;}
@media (max-width:479.98px){
    .view-banner-row{padding:0 12px;}
}