/* ============================================================
   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: #000000;
    --bg-card: #000000;
    --bg-elev: #000000;
    --crimson: #d5c000;
    --crimson-dark: #937d00;
    --crimson-light: #ffd400;
    --coral: #d5c000;
    --fill-a: #937d00;
    --fill-b: #ffd400;
    --text: #ececec;
    --text-soft: #d8d8d8;
    --text-mute:#a8a29e;
    --text-meta: #535353;
    --line: rgba(48, 48, 48, 0.12);
    --line-strong: rgba(85, 85, 85, 0.2);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background: #000000;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:grid;
    grid-template-columns:1fr auto 1fr;   /* 왼쪽 여백 | 로고 | 오른쪽 */
    align-items:center;gap:16px;
    max-width:1050px;margin:0 auto;padding:14px 5px;
}
.header-left{}  /* 왼쪽 균형용 빈 공간 */




/* ---------- 텔레그램 문의 (3줄) ---------- */
.cs-telegram{
    display:flex;align-items:center;gap:10px;
    padding:8px 16px 8px 12px;
    border-radius:14px;
    background:linear-gradient(145deg, #323232, #000000);
    border:1px solid #333;
    text-decoration:none;
    transition:border-color .25s,transform .2s,box-shadow .25s;
    box-sizing:border-box;
}
.cs-telegram:hover{
    border-color:var(--coral);
    transform:translateY(-1px);
    box-shadow:0 4px 14px rgb(213, 192, 0);
}
.cs-tg-icon{
    display:flex;align-items:center;justify-content:center;
    width:34px;height:34px;flex-shrink:0;border-radius:50%;
    background:linear-gradient(135deg,#2aa8e0,#1e8fc4);
    box-shadow:0 2px 8px rgba(42,168,224,.35);
}
.cs-tg-icon i{color:#fff;font-size:18px;}
.cs-tg-text{display:flex;flex-direction:column;line-height:1.5;}
.cs-tg-label{font-size:10px;color:#9a8785;letter-spacing:.3px;}
.cs-tg-id{font-size:14px;font-weight:700;color:#fff;}
.cs-tg-warn{font-size:11px;color: #ff0000;letter-spacing:.2px; white-space: nowrap;}

/* ---------- 검색창 (텔레그램이랑 높이 맞춤) ---------- */
.header-search{
    display:flex;align-items:center;gap:9px;
    background-image:linear-gradient(145deg,#1e1513,#160e0e),
    linear-gradient(135deg,var(--crimson),var(--coral));
    background-origin:border-box;background-clip:padding-box,border-box;
    border:1px solid transparent;border-radius:14px;
    padding:8px 16px;
    width:230px;
    box-sizing:border-box;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
    transition:box-shadow .25s;
}
.header-search:focus-within{
    box-shadow:0 0 0 2px rgba(226,75,74,.25), inset 0 1px 2px rgba(0,0,0,.4);
}
.header-search > i{color:var(--coral);font-size:15px;flex-shrink:0;}
.header-search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--text);font-size:13px;}
.header-search input::placeholder{color:#8a7573;}

/* 검색창과 텔레그램을 같은 높이로 stretch */
.header-right{justify-self:end;display:flex;align-items:stretch;gap:10px;}

/* ---------- 카테고리 메뉴 ---------- */

/* 타일 상단 은색 하이라이트 바 (원본 디테일) */
.cat-item::before{
    content:"";
    position:absolute;
    left:8px;right:8px;top:6px;
    height:3px;
    opacity:.55;
    pointer-events:none;
    border-radius:2px;
    background:linear-gradient(90deg, rgb(154,162,172) 0%, rgb(182,189,199) 100%);
    z-index:1;
}


.cat-nav-wrap{max-width:1050px;margin:0 auto;}
.cat-nav{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:8px 5px;}

.cat-item{
    --tile-bg-1:#2a2d31;
    --tile-bg-2:#1f2226;
    --tile-br:#32343a;
    display:flex;align-items:center;justify-content:center;
    height:52px;padding:0 10px;
    font-family:'SUIT',system-ui,sans-serif;
    font-weight:700;letter-spacing:.1px;text-align:center;
    color:rgb(230,232,235);
    border-radius:12px;
    background:linear-gradient(180deg,var(--tile-bg-1),var(--tile-bg-2)) padding-box,
    radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.12), rgba(255,255,255,0) 60%) padding-box;
    border:1px solid var(--tile-br);
    box-shadow:rgba(255,255,255,.06) 0 1px 0 inset, rgba(0,0,0,.6) 0 1px 0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    cursor:pointer;position:relative;
    transition:transform .18s,box-shadow .18s,background .18s,color .18s,border-color .18s;
}
.cat-item span{position:relative;z-index:1;}

/* 짝수 위치 타일은 살짝 더 어둡게 (원본처럼) */
.cat-item:nth-child(2n){
    --tile-bg-1:#25282c;
    --tile-bg-2:#191c20;
}

/* 호버: 검은 배경 + 노란 테두리 빛남 */
.cat-item:hover{
    --tile-bg-1:#0f0f0f;
    --tile-bg-2:#050505;
    border-color:#e8c84a;
    box-shadow:0 0 8px rgba(232,200,74,.5), inset 0 0 4px rgba(232,200,74,.2);
    color:#fff;
    transform:translateY(-1px);
}

/* 활성(현재 카테고리) */
.cat-item.active{
    --tile-bg-1:#0f0f0f;
    --tile-bg-2:#050505;
    border-color:#e8c84a;
    box-shadow:0 0 8px rgba(232,200,74,.5);
    color:#fff;
    cursor:default;
}






/* ---------- 섹션 공통 ---------- */
.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, rgb(255, 212, 0),transparent);}

/* 카드 공통 */
.vcard{overflow:hidden;background:var(--bg-card);
    border:1px solid #4e4e4e;cursor:pointer;transition:transform .25s,border-color .25s;}
.vcard:hover{transform:translateY(-4px);border-color: rgba(202, 202, 202, 0.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:20px;font-weight:800;color: #ffdf00;}
.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 5px 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;}

    .header-search{order:3;flex-basis:100%;}
    .header-search form{width:100%;}
    .pop-search{width:100%;}
    .cat-nav{grid-template-columns:repeat(3,1fr);}

    .latest-grid{gap:4px;}


    .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-telegram{padding:7px;}

}




/* ============================================================
   영상 상세 페이지
   ============================================================ */
.lecture-detail{padding:8px 24px 40px;max-width:1000px;margin:0 auto;}
.video-wrap{width:100%;background:transparent;margin-bottom:20px;
    display:flex;flex-direction:column;gap:16px;}
.video-wrap iframe{position:static;width:100%;display:block;border:0;
    border-radius:12px;overflow:hidden;background:#000;border:1px solid var(--line);}
.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:#3b3b3b;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;}
.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);}

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

}

/* ---------- 베스트 메뉴 (타일 스타일 + 서브메뉴) ---------- */
.cat-item.cat-popular{padding:0;overflow:visible;}
.cat-item.cat-popular:hover{z-index:300;}

/* 안쪽 링크가 타일 전체를 채움 */
.cat-popular-main{
    display:flex;align-items:center;justify-content:center;
    width:100%;height:100%;color:inherit;position:relative;z-index:2;
}
.cat-popular-main span{position:relative;z-index:2;}


/* 서브메뉴 — 베스트 타일이랑 톤 맞춤 + 위로 올라오게 */
.cat-submenu{
    position:absolute;display:none;
    top:calc(100% + 4px);left:0;min-width:100%;
    background:#1a1210;
    border:1px solid #e8c84a;
    border-radius:8px;
    overflow:hidden;
    z-index:300;
    box-shadow:0 8px 24px rgba(0,0,0,.6), 0 0 8px rgba(232,200,74,.25);
}
.cat-item.cat-popular:hover .cat-submenu{display:block;}
.cat-submenu a{
    display:block;padding:12px 18px;font-size:13px;
    color:var(--text-soft);white-space:nowrap;
    border-bottom:1px solid rgba(232,200,74,.12);
    transition:background .2s,color .2s;
}
.cat-submenu a:last-child{border-bottom:0;}
.cat-submenu a:hover{background:rgba(232,200,74,.15);color:#e8c84a;}


@media (max-width:480px){
    .cat-item { height: 38px;}
    .cat-nav { gap:3px; padding: 0 5px 5px;}
    .logo img { height :50px; max-width: none;}

    img {
        display: block;
        max-width: 100%;
    }


}


@media (max-width: 768px) {
    .site-header {
        display: flex;
        flex-direction: column;   /* 세로로 쌓기 */
        align-items: center;
        gap: 12px;
    }
    .header-left {
        display: none;
    }
    .header-right {
        display: flex;
        flex-direction: column;   /* 검색+텔레그램도 세로 */
        align-items: center;
        gap: 10px;
        width: 100%;
    }
    .cs-telegram {
        margin-left: 0;           /* 오른쪽으로 밀리는 것 방지 */
    }
    .logo img {
        height: 50px;             /* 모바일 로고 크기 */
    }
}

@media (max-width: 768px) {
    /* 텔레그램 — 얇고 긴 한 줄 (가로 전체) */
    .header-right {
        width: 100%;
    }
    .cs-telegram {
        width: 100%;
        margin-left: 0;
        padding: 8px 14px;
        border-radius: 10px;
        justify-content: center;   /* 가운데 정렬 */
        gap: 8px;
    }
    .cs-tg-label { display: none; }   /* "고객센터 문의" 숨김 */
    .cs-tg-text {
        flex-direction: row;    /* 한 줄로 */
        align-items: center;
        gap: 8px;
    }
    .cs-tg-id {
        font-size: 13px;
        white-space: nowrap;
    }
    .cs-tg-warn {
        display: inline;        /* 사칭 경고 다시 표시 */
        font-size: 11px;
        white-space: nowrap;
    }
    .cs-tg-icon {
        width: 28px;
        height: 28px;
    }
}


@media (max-width: 768px) {
    .cs-telegram {
        width: 100%;
        box-sizing: border-box;   /* padding 포함해서 100% */
        margin-left: 0;
    }
    .header-right {
        width: 100%;
        box-sizing: border-box;
    }
}




/* ---------- 헤더 배너 wrap ---------- */

.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;
    overflow:hidden;transition:opacity .2s;
    background:#140c0c;}
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;}
}


/* ---------- 큰 배너: 1줄에 1개, 데스크탑·모바일 동일 ---------- */
.banner-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    margin:0 auto;
    max-width:1050px;
    padding:0 5px;
}
.banner-row{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    width:100%;
}
.banner-slot{
    display:block;
    width:100%;
    aspect-ratio:1050 / 90;
    overflow:hidden;
}
.banner-slot img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* ---------- 메인 소배너: 1줄에 2개, 데스크탑·모바일 동일 ---------- */
.sub-banner-wrap{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:4px;
    max-width:1050px;
    margin:4px auto;
    padding:0 5px;
}
.sub-banner{display:block;width:100%;}
.sub-banner img{width:100%;height:auto;display:block;}


.logo{justify-self:center;display:inline-flex;align-items:center;}
.logo img{

    width:auto;
    display:block;
}

.latest-head .ttl{
    text-decoration:none;
    color: #ffd400;
    cursor:pointer;
    transition:color .2s;
}
.latest-head .ttl:hover{
    color: #ffffff;
}

.latest-more i{
    font-size:22px;    /* plus 아이콘 크기 — 원하는 만큼 조정 */
}


/* ---------- 사이드 팝업 ---------- */
.side-popup{
    position:fixed;top:300px;right:20px;width:220px;z-index:400;
    background:#141414;
    border:1px solid #2e2a22;

    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(232,200,74,.08);
}
.side-popup img{width:100%;display:block;}

.side-popup-btns{
    display:flex;
    background:#0d0d0d;
    border-top:1px solid #2e2a22;
}
.side-popup-btns button{
    flex:1;
    padding:11px 6px;
    background:transparent;
    border:0;cursor:pointer;
    color:#8a8378;
    font-size:12px;font-weight:600;
    letter-spacing:.2px;
    transition:background .2s,color .2s;
}
/* 24시간 닫기 (왼쪽) — 은은한 구분선 */
.side-popup-btns button:first-child{
    border-right:1px solid #2e2a22;
}
.side-popup-btns button:first-child:hover{
    background:rgba(232,200,74,.08);
    color:#e8c84a;
}
/* 닫기 (오른쪽) — 호버 시 밝게 */
.side-popup-btns button:last-child:hover{
    background:rgba(255,255,255,.05);
    color:#fff;
}

/* 모바일: 오른쪽 아래 작게 */
@media (max-width:768px){
    .side-popup{
        top: auto;
        bottom: 250px;
        right: 10px;
        width: 230px;
    }
    .side-popup-btns button{padding:9px 4px;font-size:11px;}
}


@media (max-width: 768px) {
    .cat-item.hide-below-768 { display: none; }
}
@media (max-width: 480px) {
    .cat-item.hide-below-480 { display: none; }
}




 .footer-text{
     max-width: 720px;
     margin: 0 auto;
     padding: 4px 16px;
     text-align: center;
     font-size: 13px;
     line-height: 1.9;
     color: var(--text-mute);
     word-break: keep-all;
     overflow-wrap: break-word;
     letter-spacing: .2px;
 }

@media (max-width: 560px){
    .footer-text{ font-size: 12px; line-height: 1.85; padding: 4px; }
}



.tutor-wrap {
    width: 100%;
    margin: 20px 0;
    padding: 0 15px;
    box-sizing: border-box;
}




/* ===== 보증업체 카드 ===== */
.tutor-wrap {
    width: 100%;
    margin: 20px 0;
    padding: 0 25px;
    box-sizing: border-box;
}




/* 기본 (큰 화면): 5개 */
.tutor-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }

/* 1400px 이하: 4개 */
@media (max-width: 1400px) {
    .tutor-grid { grid-template-columns: repeat(4, 1fr); }
}
/* 1100px 이하: 3개 */
@media (max-width: 1100px) {
    .tutor-grid { grid-template-columns: repeat(3, 1fr); }
}
/* 768px 이하: 2개 */
@media (max-width: 768px) {
    .tutor-grid { grid-template-columns: repeat(2, 1fr); }
}
/* 480px 이하: 1개 */
@media (max-width: 480px) {
    .tutor-grid { grid-template-columns: 1fr; }
}


.tutor-card {
    background: #151515;
    border: 2px solid #2e2a1f;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    display: flex;
    flex-direction: column;
}
.tutor-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 40px rgba(0,0,0,.6), 0 0 28px rgba(255,221,85,.35);
    border-color: #ffdd55;
}
.tutor-thumb-link img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
    border-radius: 14px 14px 0 0;
}
.tutor-title-box { padding: 15px 17px 13px; text-align: center; }
.tutor-name-label {
    color: #8a7a45; font-size: 13px; font-weight: 500; letter-spacing: .8px; margin-bottom: 5px;
    font-family: 'Pretendard', sans-serif;
}
.tutor-name {
    color: #fff; font-size: 23px; line-height: 1.3;
    font-weight: 700;
    font-family: 'Pretendard', sans-serif;
}
.tutor-price-row { display: flex; margin: 0 17px; border-top: 1px solid #262626; }
.tutor-price-cell { flex: 1; padding: 12px 0; text-align: center; }
.tutor-price-cell:first-child { border-right: 1px solid #262626; }
.tutor-price-label {
    color: #c7c7c7; font-size: 12px; margin-bottom: 4px;
    display:flex; align-items:center; justify-content:center; gap:3px;
    font-family: 'Pretendard', sans-serif;
}
.tutor-price-val {
    color: #e8c84a; font-size: 17px; font-weight: 700;
    font-family: 'SUIT', 'Pretendard', sans-serif;
}
.tutor-price-val.red { color: #e24b4a; }
.tip-wrap { position: relative; display: inline-flex; }
.tip-mark { width:14px; height:14px; border-radius:50%; background:#2e2a1f; color:#c9a83a; font-size:9px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.tip-box {
    position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
    background: #000; color: #e8e8e8; font-size: 11px; line-height: 1.55;
    padding: 10px 13px; border-radius: 8px; border: 1px solid #3a352a;
    width: 210px; max-width: 90vw; text-align: center;
    display: none;
    box-shadow: 0 6px 20px rgba(0,0,0,.7); z-index: 100;
    font-family: 'Pretendard', sans-serif;
}
.tip-box .arrow { position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:#000; }
.tip-box b { color: #ff5a5a; font-weight: 500; }
.tip-wrap:hover .tip-box, .tip-wrap.tip-open .tip-box { display: block; }
.tutor-btns { display: flex; gap: 9px; padding: 15px 17px 17px; }
.tutor-btn {
    text-align: center; padding: 11px; border-radius: 10px; font-size: 14px; font-weight: 500;
    text-decoration: none; cursor: pointer;
    font-family: 'SUIT', 'Pretendard', sans-serif;
}
.tutor-btn.go {
    flex: 1.3;
    background: linear-gradient(135deg,#f0d668,#d4af3c); color: #1a1400;
    border: 2px solid transparent;
    box-shadow: 0 2px 10px rgba(232,200,74,.25);
    transition: background .25s, color .2s, transform .12s, box-shadow .25s, border-color .2s;
    font-weight: 700;
}
.tutor-btn.go:hover {
    background: linear-gradient(135deg,#fff0a8,#f0d055); color: #000;
    transform: translateY(-2px);
    box-shadow: 0 5px 22px rgba(255,221,85,.6);
    border-color: #fff8d8;
    font-weight: 700;
}
.tutor-btn.go:active { transform: scale(.97); }
.tutor-btn.detail {
    flex: 1;
    background: #e24b4a ; color: #ffffff;
    border: 2px solid #3a352a;
    transition: background .2s, color .2s, border-color .2s, transform .12s;
    font-weight: 700;
}
.tutor-btn.detail:hover {
    background: rgba(232,200,74,.14); color: #ffdd55;
    border-color: #ffdd55; transform: translateY(-2px);
    font-weight: 700;
}
.tutor-btn.detail:active { transform: scale(.97); }
@media (max-width: 768px) { .tutor-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tutor-grid { grid-template-columns: 1fr; } }



/* ===== 과외 상세 페이지 ===== */
.td-wrap { padding: 8px 24px 40px; max-width: 1000px; margin: 0 auto; box-sizing: border-box; }
.td-card { background: #141414; border: 2px solid #2e2a1f; border-radius: 18px; overflow: hidden; }
.td-thumb { padding: 24px 24px 0; display: flex; justify-content: center; }
.td-thumb img { width: 280px; max-width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; border-radius: 14px; }
.td-body { padding: 22px; }
.td-title-box { text-align: center; margin-bottom: 20px; }
.td-name-label { color: #8a7a45; font-size: 11px; font-weight: 500; letter-spacing: 1px; margin-bottom: 6px; font-family: 'Pretendard', sans-serif; }
.td-name { color: #fff; font-size: 26px; margin: 0; font-family:'Pretendard', sans-serif; line-height: 1.3; font-weight: 700; }
.td-price-row { display: flex; gap: 12px; margin-bottom: 16px; }
.td-price-cell { flex: 1; background: #0e0e0e; border: 1px solid #262626; border-radius: 12px; padding: 14px; text-align: center; }
.td-price-cell.red-cell { border-color: #3a2020; }
.td-price-label { color: #c3c3c3; font-size: 14px; margin-bottom: 6px; display:flex; align-items:center; justify-content:center; gap:4px; font-family: 'Pretendard', sans-serif; }
.td-price-val { color: #e8c84a; font-size: 21px; font-weight: 700; font-family: 'SUIT', 'Pretendard', sans-serif; }
.td-price-val.red { color: #e24b4a; }
.td-url-row { display: flex; align-items: center; gap: 12px; background: #0e0e0e; border: 1px solid #262626; border-radius: 12px; padding: 12px 16px; }
.td-url-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.td-url-info i { color: #8a7a45; font-size: 18px; flex-shrink: 0; }
.td-url-text { min-width: 0; flex: 1; }
.td-url-label { color: #9c9c9c; font-size: 14px; margin-bottom: 2px; font-family: 'Pretendard', sans-serif; }
.td-url-value { color: #ffffff; font-size: 17px; word-break: break-all; font-family: 'Pretendard', sans-serif; }
.td-url-go { flex-shrink: 0; background: linear-gradient(135deg,#f0d668,#d4af3c); color: #1a1400; padding: 14px 32px; border-radius: 11px; font-size: 16px; font-weight: 700; text-decoration: none; font-family: 'SUIT', 'Pretendard', sans-serif; transition: filter .2s, transform .12s, box-shadow .25s; border: 2px solid transparent; box-shadow: 0 2px 10px rgba(232,200,74,.25); }
.td-url-go:hover { filter: brightness(1.08); transform: translateY(-2px); border-color: #fff8d8; box-shadow: 0 5px 20px rgba(255,221,85,.5); }.td-url-go:hover { filter: brightness(1.08); transform: translateY(-1px); border-color: #fff8d8; }
.td-go-big { display: block; text-align: center; padding: 15px; border-radius: 12px; background: linear-gradient(135deg,#f0d668,#d4af3c); color: #1a1400; font-size: 16px; font-weight: 700; text-decoration: none; margin-top: 16px; font-family: 'SUIT', 'Pretendard', sans-serif; border: 2px solid transparent; transition: filter .2s, transform .12s, box-shadow .25s; }
.td-go-big:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 5px 22px rgba(255,221,85,.5); border-color: #fff8d8; }
.td-detail-box { margin-top: 16px; background: #141414; border: 1px solid #232323; border-radius: 16px; padding: 20px; }
.td-detail-head { color: #8a7a45; font-size: 12px; font-weight: 500; letter-spacing: .5px; margin-bottom: 14px; display: flex; align-items: center; gap: 7px; font-family: 'Pretendard', sans-serif; }
.td-images { display: flex; flex-direction: column; gap: 10px; }
.td-images img { width: 100%; border-radius: 10px; display: block; }
.td-bottom { display: flex; gap: 12px; margin-top: 16px; }
.td-btn { flex: 1; text-align: center; padding: 14px; border-radius: 11px; font-size: 15px; font-weight: 500; text-decoration: none; font-family: 'SUIT', 'Pretendard', sans-serif; transition: all .2s; border: 2px solid transparent; }
.td-btn.back { background: transparent; color: #c8c2b4; border-color: #3a352a; }
.td-btn.back:hover { border-color: #ffdd55; color: #ffdd55; }
.td-btn.go { background: linear-gradient(135deg,#f0d668,#d4af3c); color: #1a1400; }
.td-btn.go:hover { filter: brightness(1.08); border-color: #fff8d8; }
.tip-wrap { position: relative; display: inline-flex; }
.tip-mark { width:14px; height:14px; border-radius:50%; background:#2e2a1f; color:#c9a83a; font-size:9px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.tip-box { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%); background: #000; color: #e8e8e8; font-size: 11px; line-height: 1.55; padding: 10px 13px; border-radius: 8px; border: 1px solid #3a352a; width: 210px; max-width: 90vw; text-align: center; display: none; box-shadow: 0 6px 20px rgba(0,0,0,.7); z-index: 100; font-family: 'Pretendard', sans-serif; }
.tip-box .arrow { position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:#000; }
.tip-box b { color: #ff5a5a; font-weight: 500; }
.tip-wrap:hover .tip-box, .tip-wrap.tip-open .tip-box { display: block; }
@media (max-width: 600px) {
    .td-wrap { padding: 8px 12px 30px; }
    .td-url-row { flex-direction: column; align-items: stretch; }
    .td-url-go { text-align: center; }
    .td-name { font-size: 22px; }
}


/* ===== 보증업체 소개글 ===== */
.tutor-intro {
    background: #141414;
    border: 1px solid #2e2a1f;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 20px;
}
.tutor-intro-line {
    height: 3px;
    background: linear-gradient(90deg, transparent, #e8c84a, transparent);
}
.tutor-intro-body { padding: 24px 22px; text-align: center; }
.tutor-intro-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 14px;
}
.tutor-intro-bar { flex: 1; max-width: 70px; height: 1px; }
.tutor-intro-bar.left { background: linear-gradient(90deg, transparent, #e8c84a); }
.tutor-intro-bar.right { background: linear-gradient(90deg, #e8c84a, transparent); }
.tutor-intro-title {
    color: #e8c84a;
    font-size: 30px;
    letter-spacing: -.3px;
    font-family: 'Jalnan', 'Pretendard', sans-serif;
}
.tutor-intro-text {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.8;
    max-width: 570px;
    margin: 0 auto;
    font-family: 'Pretendard', sans-serif;
}
.tutor-intro-text b { color: #ff5a5a; font-weight: 600; }
@media (max-width: 600px) {
    .tutor-intro-body { padding: 20px 16px; }
    .tutor-intro-title { font-size: 17px; }
    .tutor-intro-text { font-size: 12px; }
    .tutor-intro-bar { max-width: 40px; }
}
/* PC(1025px 이상)에서만 숨김 */
@media (min-width: 1025px) {
    .cat-item.hide-above-1024 { display: none !important; }
}