/* ============================================================
   배때지 V2 · 셀러브리티 페이지 (/v2/celebrity.php)
   .v2cel-* 스코프 한정. 공용 카드/캐러셀은 v2-carousel.css 재사용.
   ============================================================ */

.v2cel{
    --cel-ink:#16161a;
    --cel-sub:#6b6b74;
    --cel-line:#eceef1;
    --cel-accent:#16161a;
}

/* ---------------- A. 상단 히어로 ---------------- */
.v2cel-hero{
    position:relative;
    display:flex;align-items:center;
    overflow:hidden;
    background:#2a2a30;
    height:var(--cel-hero-h,240px);
}
.v2cel-hero picture,
.v2cel-hero img{position:absolute;inset:0;width:100%;height:100%;display:block}
.v2cel-hero img{object-fit:cover}
.v2cel-hero__ov{position:absolute;inset:0}
.v2cel-hero__tx{
    position:relative;z-index:1;
    width:100%;max-width:1120px;margin:0 auto;
    padding:0 18px;
}
.v2cel-hero__tx h1{
    margin:0;font-size:24px;font-weight:800;letter-spacing:-.5px;line-height:1.25;
}
.v2cel-hero__tx p{margin:8px 0 0;font-size:13.5px;line-height:1.6;opacity:.94}

/* 히어로 미등록 시의 기본 텍스트 헤더 (가짜 이미지 만들지 않음) */
.v2cel-plainhead{padding:26px 18px 18px;border-bottom:1px solid var(--cel-line)}
.v2cel-plainhead h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--cel-ink)}
.v2cel-plainhead p{margin:7px 0 0;font-size:13px;color:var(--cel-sub);line-height:1.6}

/* ---------------- 본문 래퍼 ---------------- */
.v2cel-wrap{max-width:1180px;margin:0 auto;padding:0 16px 56px}

/* ---------------- B. 검색 ---------------- */
.v2cel-search{display:flex;gap:8px;margin:18px 0 14px}
.v2cel-search form{display:flex;gap:8px;flex:1 1 auto;min-width:0}
.v2cel-search input{
    flex:1 1 auto;min-width:0;min-height:44px;padding:10px 14px;
    border:1px solid var(--cel-line);border-radius:10px;background:#fff;
    font-size:15px;font-family:inherit;color:var(--cel-ink);
}
.v2cel-search input:focus{outline:2px solid #3d5afe;outline-offset:-1px;border-color:#3d5afe}
.v2cel-search button{
    flex:0 0 auto;min-height:44px;padding:0 18px;border-radius:10px;
    border:1px solid var(--cel-accent);background:var(--cel-accent);color:#fff;
    font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;
}

/* ---------------- C. 페이지 정보 ---------------- */
.v2cel-info{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    padding:12px 0 14px;border-bottom:1px solid var(--cel-line);margin-bottom:16px;
}
.v2cel-info h2{margin:0;font-size:17px;font-weight:800;color:var(--cel-ink)}
.v2cel-info .cnt{font-size:13px;color:var(--cel-sub);font-weight:700}
.v2cel-info .sp{flex:1 1 auto}
.v2cel-share{
    display:inline-flex;align-items:center;gap:6px;
    min-height:36px;padding:0 13px;border-radius:9px;
    border:1px solid var(--cel-line);background:#fff;color:var(--cel-sub);
    font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;
}
.v2cel-share:hover{border-color:#c9cbd3;color:var(--cel-ink)}
.v2cel-share svg{width:15px;height:15px}

/* ---------------- D. 셀럽 랭킹 TOP5 ---------------- */
.v2cel-rank{margin-bottom:22px}
.v2cel-rank h3{margin:0 0 12px;font-size:15px;font-weight:800;color:var(--cel-ink)}
.v2cel-rank ol{
    list-style:none;margin:0;padding:0 0 4px;
    display:flex;gap:14px;overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none;
}
.v2cel-rank ol::-webkit-scrollbar{display:none}
.v2cel-rank li{flex:0 0 auto;width:76px}
.v2cel-rank a{display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;color:inherit}
.v2cel-rank .ph{
    position:relative;width:68px;height:68px;border-radius:50%;
    overflow:hidden;background:#f2f3f5;border:1px solid var(--cel-line);
    display:grid;place-items:center;
}
.v2cel-rank .ph img{width:100%;height:100%;object-fit:cover;display:block}
.v2cel-rank .ph .ini{font-size:19px;font-weight:800;color:var(--cel-ink)}
.v2cel-rank .no{
    position:absolute;left:0;top:0;z-index:1;
    width:20px;height:20px;border-radius:50%;
    background:var(--cel-accent);color:#fff;
    display:grid;place-items:center;font-size:11px;font-weight:800;
}
.v2cel-rank .nm{
    font-size:12px;font-weight:700;color:var(--cel-ink);text-align:center;
    width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.v2cel-rank a.on .ph{border-color:var(--cel-accent);box-shadow:0 0 0 2px var(--cel-accent)}

/* ---------------- 선택된 셀럽 헤더 ---------------- */
.v2cel-sel{
    display:flex;gap:14px;align-items:flex-start;
    padding:14px;border:1px solid var(--cel-line);border-radius:14px;
    background:#fafbfc;margin-bottom:18px;
}
.v2cel-sel__ph{
    flex:0 0 68px;width:68px;height:68px;border-radius:50%;
    overflow:hidden;background:#f2f3f5;display:grid;place-items:center;
}
.v2cel-sel__ph img{width:100%;height:100%;object-fit:cover;display:block}
.v2cel-sel__ph .ini{font-size:22px;font-weight:800}
.v2cel-sel__tx{flex:1 1 auto;min-width:0}
.v2cel-sel__tx h2{margin:0;font-size:18px;font-weight:800;color:var(--cel-ink)}
.v2cel-sel__tx .en{font-size:12px;color:var(--cel-sub);font-weight:700;margin-top:2px}
.v2cel-sel__tx p{margin:8px 0 0;font-size:13px;color:var(--cel-sub);line-height:1.6}
.v2cel-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.v2cel-tag{
    display:inline-block;padding:4px 10px;border-radius:999px;
    background:#fff;border:1px solid var(--cel-line);
    font-size:11.5px;font-weight:700;color:var(--cel-sub);
}
.v2cel-tag.brand{background:var(--cel-accent);color:#fff;border-color:var(--cel-accent);text-decoration:none}
.v2cel-clear{
    flex:0 0 auto;align-self:center;
    min-height:34px;padding:0 13px;border-radius:9px;
    border:1px solid var(--cel-line);background:#fff;color:var(--cel-sub);
    font-size:12.5px;font-weight:700;text-decoration:none;
    display:inline-flex;align-items:center;
}

/* ---------------- E. 카테고리 탭 ---------------- */
.v2cel-cats{
    display:flex;gap:7px;margin-bottom:14px;padding-bottom:2px;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.v2cel-cats::-webkit-scrollbar{display:none}
.v2cel-cats a{
    flex:0 0 auto;display:inline-flex;align-items:center;height:36px;padding:0 15px;
    border:1px solid var(--cel-line);border-radius:999px;background:#fff;
    font-size:13px;font-weight:700;color:var(--cel-sub);text-decoration:none;white-space:nowrap;
}
.v2cel-cats a:hover{border-color:#d6d9de;color:var(--cel-ink)}
.v2cel-cats a.on{background:var(--cel-accent);border-color:var(--cel-accent);color:#fff}

/* ---------------- F. 필터 ---------------- */
.v2cel-filterbar{display:flex;gap:8px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.v2cel-filterbtn{
    display:inline-flex;align-items:center;gap:6px;
    min-height:40px;padding:0 14px;border-radius:10px;
    border:1px solid var(--cel-line);background:#fff;color:var(--cel-ink);
    font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;
}
.v2cel-filterbtn svg{width:15px;height:15px}
.v2cel-filterbtn.has{border-color:var(--cel-accent);background:var(--cel-accent);color:#fff}
.v2cel-chips{display:flex;gap:6px;flex-wrap:wrap}
.v2cel-chip{
    display:inline-flex;align-items:center;gap:5px;
    padding:5px 10px;border-radius:999px;background:#f2f3f6;
    font-size:12px;font-weight:700;color:var(--cel-sub);text-decoration:none;
}
.v2cel-chip b{color:var(--cel-ink)}

/* 필터 패널 — 모바일 하단 모달 / PC 드롭다운 */
.v2cel-filter{
    position:fixed;inset:0;z-index:80;
    display:flex;align-items:flex-end;justify-content:center;
    background:rgba(15,15,20,.5);
}
.v2cel-filter[hidden]{display:none}
.v2cel-filter__box{
    width:100%;max-width:560px;max-height:86vh;
    background:#fff;border-radius:16px 16px 0 0;
    display:flex;flex-direction:column;overflow:hidden;
}
.v2cel-filter__head{
    display:flex;align-items:center;gap:10px;
    padding:14px 16px;border-bottom:1px solid var(--cel-line);
}
.v2cel-filter__head h3{margin:0;font-size:15px;font-weight:800;flex:1 1 auto}
.v2cel-filter__close{
    width:32px;height:32px;border-radius:8px;border:1px solid var(--cel-line);
    background:#fff;font-size:17px;line-height:1;cursor:pointer;color:var(--cel-sub);
}
.v2cel-filter__body{flex:1 1 auto;overflow-y:auto;padding:14px 16px 18px}
.v2cel-filter__group{margin-bottom:18px}
.v2cel-filter__group > label{display:block;font-size:12.5px;font-weight:800;margin-bottom:8px}
.v2cel-filter__opts{display:flex;gap:7px;flex-wrap:wrap}
.v2cel-filter__opts label{
    display:inline-flex;align-items:center;
    padding:8px 13px;border-radius:999px;
    border:1px solid var(--cel-line);background:#fff;
    font-size:13px;font-weight:600;cursor:pointer;
}
.v2cel-filter__opts input{position:absolute;opacity:0;pointer-events:none}
.v2cel-filter__opts input:checked + span{color:#fff}
.v2cel-filter__opts label:has(input:checked){background:var(--cel-accent);border-color:var(--cel-accent);color:#fff}
.v2cel-filter__price{display:flex;gap:8px;align-items:center}
.v2cel-filter__price input{
    flex:1 1 0;min-width:0;min-height:42px;padding:8px 12px;
    border:1px solid var(--cel-line);border-radius:9px;font-size:15px;font-family:inherit;
}
.v2cel-filter__foot{
    padding:12px 16px;border-top:1px solid var(--cel-line);
    display:flex;gap:8px;
}
.v2cel-filter__foot a,
.v2cel-filter__foot button{
    flex:1 1 0;min-height:46px;border-radius:10px;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;text-decoration:none;
    border:1px solid var(--cel-line);background:#fff;color:var(--cel-ink);
}
.v2cel-filter__foot button[type=submit]{
    background:var(--cel-accent);border-color:var(--cel-accent);color:#fff;flex:2 1 0;
}

/* ---------------- G. 상품 그리드 ---------------- */
.v2cel-grid{
    list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(2,1fr);gap:18px 10px;
}
.v2cel-grid > li{display:flex}
.v2cel-empty{
    padding:56px 20px;text-align:center;color:var(--cel-sub);
    font-size:14px;line-height:1.75;
    border:1px dashed var(--cel-line);border-radius:14px;background:#fafbfc;
}
.v2cel-more{
    display:flex;justify-content:center;margin-top:26px;
}
.v2cel-more a{
    min-height:46px;padding:0 26px;border-radius:10px;
    display:inline-flex;align-items:center;
    border:1px solid var(--cel-line);background:#fff;color:var(--cel-ink);
    font-size:14px;font-weight:700;text-decoration:none;
}

/* ---------------- 태블릿 ---------------- */
@media (min-width:768px){
    .v2cel-hero{height:var(--cel-hero-h-tb,300px)}
    .v2cel-hero__tx{padding:0 26px}
    .v2cel-hero__tx h1{font-size:30px}
    .v2cel-hero__tx p{font-size:14.5px}
    .v2cel-wrap{padding:0 24px 64px}
    .v2cel-grid{grid-template-columns:repeat(3,1fr);gap:22px 16px}
    .v2cel-rank li{width:84px}
    .v2cel-rank .ph{width:76px;height:76px}

    /* 필터: 중앙 모달 */
    .v2cel-filter{align-items:center;padding:24px}
    .v2cel-filter__box{border-radius:16px;max-height:80vh}
}

/* ---------------- PC ---------------- */
@media (min-width:1200px){
    .v2cel-hero{height:var(--cel-hero-h-pc,360px)}
    .v2cel-hero__tx{padding:0 32px}
    .v2cel-hero__tx h1{font-size:36px}
    .v2cel-wrap{padding:0 32px 72px}
    .v2cel-grid{grid-template-columns:repeat(4,1fr);gap:26px 18px}
    .v2cel-info h2{font-size:19px}
}

/* 접근성 */
.v2cel-cats a:focus-visible,
.v2cel-rank a:focus-visible,
.v2cel-filterbtn:focus-visible,
.v2cel-share:focus-visible{outline:2px solid #3d5afe;outline-offset:2px}