/* ============================================================
   페이지 전체 — 공통 헤더 없이 «독립 문서»로 선다.
   여백(문서 배경)까지 올블랙. body.chz-page 안에서만 적용된다.
   ============================================================ */
/* ★ shop-final.min.css 가 `body{background:#fff!important}` 로 못을 박아 둔다.
   공통 CSS 를 고치지 않고(다른 페이지 영향 금지) 이 페이지 스코프에서만 되받아친다. */
html.chz-page{background:#0a0a0b !important}
body.chz-page{
    background:#0a0a0b !important;
    margin:0;
    /* iOS 오버스크롤 시 드러나는 흰 여백 제거 */
    overscroll-behavior-y:none;
}
body.chz-page .chz-shell{background:#0a0a0b;min-height:100vh}
/* ★ PC 폭 — 상품 상세페이지와 «똑같이» 760px 중앙정렬 (실측: 1440·1920 둘 다 760).
   여백은 문서 배경(올블랙)이 그대로 보인다. */
@media (min-width:800px){
    /* [2026-08-30] 760 + 좌우 여백 16×2 = 792.
       «내용» 폭은 그대로 760 이다(상품 상세와 동일) — 늘린 건 여백뿐. */
    body.chz-page .chz-shell{max-width:792px;margin-inline:auto}
}

/* 전용 상단바 — 얇고 어둡게. 공통 헤더 대체 */
.chz-topbar{
    position:sticky;top:0;z-index:60;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    height:52px;padding:0 8px;
    background:rgba(10,10,11,.86);
    backdrop-filter:saturate(140%) blur(10px);
    -webkit-backdrop-filter:saturate(140%) blur(10px);
    border-bottom:1px solid #1c1c20;
}
.chz-topbar__btn{
    display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;
    color:#c9ccd2;text-decoration:none;border-radius:8px;
}
.chz-topbar__btn:hover{background:#17171a;color:#fff}
.chz-topbar__name{
    flex:1 1 auto;text-align:center;min-width:0;
    font-size:12px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
    color:#e7e8ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* 하단 네비바 — 이 페이지에서만 다크로 */
/* 하단 네비바도 공통 CSS 가 !important 로 흰 배경을 고정한다 → 스코프 안에서만 덮는다 */
body.chz-page .v2shop-bottom-nav{
    background:rgba(10,10,11,.94) !important;
    border-top:1px solid #1c1c20 !important;
    box-shadow:none !important;
    backdrop-filter:saturate(140%) blur(10px);
    -webkit-backdrop-filter:saturate(140%) blur(10px);
}
body.chz-page .v2shop-bottom-nav,
body.chz-page .v2shop-bottom-item{color:#9a9ea6 !important}
body.chz-page .v2shop-bottom-item svg{stroke:#9a9ea6 !important}
body.chz-page .v2shop-bottom-item.is-active,
body.chz-page .v2shop-bottom-item:hover{color:#f4f4f6 !important}
body.chz-page .v2shop-bottom-item.is-active svg,
body.chz-page .v2shop-bottom-item:hover svg{stroke:#f4f4f6 !important}
body.chz-page .v2-bottom-cart-badge{background:#c9ccd2 !important;color:#0a0a0b !important}

/* ============================================================
   배때지 V2 · 전문관 «크롬하츠» 전용 스타일
     BLACK / CHARCOAL / SILVER / GOTHIC / LUXURY EDITORIAL

   ★ 모든 선택자는 .chz 하위로만 존재한다. 전역 태그(body,h1,a,img …)를
     단독으로 건드리지 않는다 → 다른 페이지에 영향이 없다.
   ★ 이 파일은 크롬하츠 템플릿에서만 로드된다. 다른 전문관은 자기 CSS 를 쓴다.
   ============================================================ */

.chz{
    --chz-bg:#0a0a0b;
    --chz-bg2:#121214;
    --chz-line:#232327;
    --chz-line2:#2f2f35;
    --chz-silver:#c9ccd2;
    --chz-silver-2:#8e929b;
    --chz-white:#f4f4f6;
    --chz-dim:#6f737c;

    /* ★ 좌우 여백 16 (2026-08-30 지시 — 종전 0 은 목록·본문이 화면 끝에 붙었다).
       히어로 «사진/영상» 은 여전히 셸 폭을 꽉 채운다(--chz-pad 를 쓰지 않는다).
       여백을 타는 건 그 «안의 내용» — 헤더·필터·레일·격자·문구·푸터다.
       값은 breadcrumb(.chz-bc)가 원래 쓰던 16 과 같게 맞췄다. */
    --chz-pad:16px;
    --chz-gap:12px;

    background:var(--chz-bg);
    color:var(--chz-white);
    font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Apple SD Gothic Neo",
                "Noto Sans KR",Arial,sans-serif;
    /* 가로 overflow 원천 차단 — 내부 레일은 자기 박스 안에서만 스크롤한다 */
    overflow-x:clip;
    max-width:100%;
}
.chz *,.chz *::before,.chz *::after{box-sizing:border-box}
.chz img{max-width:100%}

/* ---------- 공통 섹션 틀 ---------- */
.chz-sec{padding:44px 0 8px}
.chz-sec--tight{padding-top:26px}

/* breadcrumb — 구조화 데이터와 같은 경로를 화면에도 얇게 노출 */
.chz-bc{
    display:flex;flex-wrap:wrap;align-items:center;gap:6px;
    padding:14px 16px 0;font-size:11px;color:var(--chz-dim);
}
.chz-bc a{color:var(--chz-silver-2);text-decoration:none}
.chz-bc a:hover{color:var(--chz-white);text-decoration:underline}
.chz-bc strong{color:var(--chz-silver);font-weight:700}
.chz-bc span{color:var(--chz-line2)}

@media (min-width:768px){
    .chz-bc{font-size:12px;padding-top:18px}
}
.chz-wrap{width:100%;margin:0 auto;padding:0 var(--chz-pad)}

.chz-head{margin:0 0 18px;padding:0 var(--chz-pad)}
/* [2026-08-30] 종전엔 «부모 0 + 글자 16» 이었다. 이제 부모(.chz-head/.chz-wrap)가
   --chz-pad 로 16 을 주므로 여기서 또 주면 32 가 된다 — 0 으로 돌린다. */
.chz-head__en,.chz-head__ko,.chz-head__desc,.chz-head__rule{padding-left:0;padding-right:0}
.chz-head>a.chz-chip{margin-right:0}
.chz-filter{padding-left:16px;padding-right:16px}
.chz-foot{padding-left:16px;padding-right:16px}
.chz-head__en{
    display:block;font-size:11px;font-weight:800;letter-spacing:.26em;
    text-transform:uppercase;color:var(--chz-silver-2);
}
.chz-head__ko{
    display:block;margin-top:7px;font-size:19px;font-weight:800;
    letter-spacing:-.01em;color:var(--chz-white);
}
.chz-head__desc{
    margin:8px 0 0;font-size:12.5px;line-height:1.65;color:var(--chz-dim);
    max-width:62ch;
}
.chz-head__rule{
    display:block;width:34px;height:1px;margin-top:14px;
    background:linear-gradient(90deg,var(--chz-silver) 0%,transparent 100%);
}

/* ---------- HERO ---------- */
.chz-hero{position:relative;background:#000;overflow:hidden}
/* 영상/이미지 영역 크기를 먼저 확보한다 → CLS 0 */
.chz-hero .v2sp-hero{position:relative;width:100%;aspect-ratio:3/4;background:#000}
.chz-hero .v2sp-hero__video,
.chz-hero .v2sp-hero__fallback img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;display:block;
}
.chz-hero .v2sp-hero__video{opacity:0;transition:opacity .5s ease}
.chz-hero .v2sp-hero__video.is-ready{opacity:1}
/* 영상 실패 시에만 드러난다 */
.chz-hero .v2sp-hero__fallback{position:absolute;inset:0;opacity:0;pointer-events:none}
.chz-hero .v2sp-hero__fallback.is-on{opacity:1}
.chz-hero__scrim{
    position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 40%,rgba(10,10,11,.55) 100%);
}
/* 문구를 겹칠 때만 아래쪽을 더 어둡게 해 가독성을 확보한다 */
.chz-hero.is-overlay .chz-hero__scrim{
    background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 34%,rgba(10,10,11,.92) 100%);
}

/* HERO 위 텍스트 — 영상에 합성하지 않고 HTML 레이어로 얹는다 */
/* HERO 문구 — 위치를 관리자가 고른다(pr_hero_text_pos).
   기본은 «영상 아래»(below). 영상 안에 이미 로고/문구가 들어 있는 경우
   겹쳐 쓰면 두 겹으로 보이기 때문이다. */
.chz-hero__body{
    position:relative;z-index:3;
    margin-top:0;padding:26px var(--chz-pad) 30px;
    text-align:center;
}
/* overlay = 영상 위로 끌어올려 겹치기 */
.chz-hero__body.is-overlay{margin-top:-88px;padding-top:0}
.chz-hero__en{
    font-size:26px;font-weight:800;line-height:1.1;letter-spacing:.14em;
    text-transform:uppercase;
    background:linear-gradient(180deg,#ffffff 0%,#b9bdc6 62%,#7e828b 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.chz-hero__en small{display:block;font-size:12px;letter-spacing:.34em;margin-top:9px;font-weight:700}
.chz-hero__ko{
    margin:14px 0 0;font-size:15px;font-weight:700;color:var(--chz-silver);
    letter-spacing:-.01em;
}
.chz-hero__meta{
    margin:14px 0 0;font-size:10.5px;font-weight:700;letter-spacing:.2em;
    color:var(--chz-silver-2);text-transform:uppercase;
    display:flex;flex-wrap:wrap;gap:6px 10px;justify-content:center;
}
.chz-hero__meta span{white-space:nowrap}
.chz-hero__meta span+span::before{content:"·";margin-right:10px;color:var(--chz-line2)}

/* ---------- 가로 레일 (모바일 슬라이드) ---------- */
.chz-rail{
    display:flex;gap:var(--chz-gap);
    overflow-x:auto;overflow-y:hidden;
    padding:0 var(--chz-pad) 6px;margin:0;list-style:none;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.chz-rail::-webkit-scrollbar{display:none}
.chz-rail>li{scroll-snap-align:start;flex:0 0 auto;width:46%;min-width:150px;max-width:260px}

/* ---------- 상품 카드 (각지고 어둡게 — 둥근 흰 카드 금지) ---------- */
.chz-card{display:block;text-decoration:none;color:inherit;position:relative}
.chz-card__img{
    position:relative;display:block;width:100%;aspect-ratio:1/1;
    background:var(--chz-bg2);
    border:1px solid var(--chz-line);
    overflow:hidden;
}
.chz-card__img img{width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .5s ease,filter .5s ease;filter:saturate(.92) contrast(1.03)}
.chz-card:hover .chz-card__img img{transform:scale(1.04);filter:saturate(1) contrast(1.06)}
.chz-card__noimg{
    position:absolute;inset:0;display:grid;place-items:center;
    font-size:11px;letter-spacing:.12em;color:var(--chz-dim);
}
.chz-card__body{padding:11px 1px 0}
.chz-card__cat{
    display:block;font-size:9.5px;font-weight:800;letter-spacing:.2em;
    text-transform:uppercase;color:var(--chz-silver-2);
}
/* ★ 행·열 정렬 — 사진은 전부 1:1 로 «같은 크기»,
   제목은 2줄 고정칸, 가격블록도 고정칸으로 잡아
   제목이 1줄이든 2줄이든 · 원가표시가 있든 없든 가격 줄이 같은 높이에 온다. */
.chz-card__cat{height:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chz-card__title{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    margin:6px 0 0;font-size:12.5px;font-weight:600;line-height:1.45;color:var(--chz-white);
    word-break:break-word;
    height:calc(12.5px * 1.45 * 2);       /* 정확히 2줄 */
}
.chz-card__foot{display:block;margin-top:8px;height:32px}
.chz-card__price{
    display:block;font-size:13px;font-weight:800;
    letter-spacing:-.01em;color:var(--chz-silver);line-height:1.35;
}
.chz-card__price.is-ask{color:var(--chz-dim);font-weight:700}
.chz-card__cny,
.chz-card__foot .v2-price-cny{
    display:block;margin-top:1px;font-size:10.5px;line-height:1.3;color:var(--chz-dim);
    /* 공용 가격 컴포넌트가 밝은 배경 기준이라 어두운 배경에 맞춰 색만 덮는다(마크업 무변경) */
    background:none;padding:0;
}

/* ---------- SIGNATURE (에디토리얼) ---------- */
.chz-sig{padding:0}
/* 그리드와 «완전히 같은» 좌우 기준을 쓴다 — 음수마진 트릭을 쓰면 한쪽만 어긋난다 */
.chz-sig__rail{
    display:flex;gap:14px;overflow-x:auto;padding:0 var(--chz-pad) 6px;margin:0;
    scroll-snap-type:x proximity;scrollbar-width:none;list-style:none;
}
.chz-sig__rail::-webkit-scrollbar{display:none}
/* ★ 지시(2026-08-21): 모바일·태블릿·PC «전부 2개»가 딱 맞게 보인다.
   폭을 %로 두면 gap 때문에 2.x 장이 되므로 gap 을 빼고 정확히 나눈다. */
.chz-sig__rail>li{
    flex:0 0 calc((100% - 14px) / 2);
    width:calc((100% - 14px) / 2);
    max-width:none;
    scroll-snap-align:start;
}
.chz-sig-card{display:block;text-decoration:none;color:inherit}
/* ★ display:block 이 빠지면 <span> 이 inline 이라 width/aspect-ratio 가 «무시된다».
   그러면 사진마다 원본 비율대로 높이가 제각각이 된다(실측 277 vs 260).
   전체 컬렉션 카드(.chz-card__img)는 처음부터 block 이라 멀쩡했다. */
.chz-sig-card__img{
    position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden;
    background:var(--chz-bg2);border:1px solid var(--chz-line);
}
.chz-sig-card__img img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.05) saturate(.9)}
.chz-sig-card__no{
    position:absolute;left:12px;top:10px;z-index:2;
    font-size:30px;font-weight:800;line-height:1;letter-spacing:-.03em;
    color:rgba(255,255,255,.16);
}
.chz-sig-card__body{display:block;padding:13px 2px 0}
.chz-sig-card__title{
    margin:0;font-size:14px;font-weight:700;line-height:1.45;color:var(--chz-white);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    height:calc(14px * 1.45 * 2);          /* 2줄 고정 — 카드 하단선 정렬 */
}
.chz-sig-card__price{display:block;margin-top:8px;font-size:13.5px;font-weight:800;color:var(--chz-silver)}
.chz-sig-card__price.is-ask{color:var(--chz-dim)}

/* ---------- ALL COLLECTION ---------- */
.chz-filter{
    display:flex;gap:7px;overflow-x:auto;padding:0 var(--chz-pad) 4px;margin:0 0 16px;
    scrollbar-width:none;
}
.chz-filter::-webkit-scrollbar{display:none}
.chz-chip{
    flex:0 0 auto;display:inline-block;text-decoration:none;
    padding:8px 13px;font-size:11.5px;font-weight:700;letter-spacing:.02em;
    color:var(--chz-silver-2);background:transparent;
    border:1px solid var(--chz-line2);
}
.chz-chip.is-on{color:#0a0a0b;background:var(--chz-silver);border-color:var(--chz-silver)}
.chz-chip i{font-style:normal;margin-left:5px;font-size:10px;opacity:.62}
/* 2·3단계 분류 — 1단계보다 한 톤 낮춰 계층이 보이게 */
.chz-filter--sub{margin-top:-8px;margin-bottom:14px}
.chz-filter--sub .chz-chip{
    padding:6px 11px;font-size:11px;font-weight:600;
    border-color:#24242a;color:#7e828b;
}
.chz-filter--sub .chz-chip.is-on{
    color:#0a0a0b;background:#8e929b;border-color:#8e929b;font-weight:800;
}

.chz-grid{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px var(--chz-gap);
    padding:0 var(--chz-pad);margin:0;list-style:none;
}

.chz-more{
    display:block;margin:30px var(--chz-pad) 0;padding:15px 10px;
    text-align:center;text-decoration:none;
    font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
    color:var(--chz-silver);border:1px solid var(--chz-line2);background:transparent;
}
.chz-more:hover{border-color:var(--chz-silver);color:#fff}

.chz-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.chz-empty{
    padding:44px var(--chz-pad);text-align:center;
    font-size:13px;color:var(--chz-dim);
}

.chz-foot{
    margin-top:52px;padding:26px var(--chz-pad) 40px;
    border-top:1px solid var(--chz-line);
    font-size:11px;line-height:1.8;color:var(--chz-dim);
}
.chz-foot a{color:var(--chz-silver-2)}

/* ============================================================
   태블릿 (>=768px)
   ============================================================ */
@media (min-width:768px){
    .chz{--chz-pad:16px;--chz-gap:16px}   /* 여백은 전 구간 16 로 통일 (셸 792 계산과 물린다) */
    .chz-hero .v2sp-hero{aspect-ratio:16/9}
    .chz-hero__body{padding-bottom:40px}
    .chz-hero__body.is-overlay{margin-top:-118px}
    .chz-hero__en{font-size:44px;letter-spacing:.16em}
    .chz-hero__en small{font-size:14px}
    .chz-hero__ko{font-size:18px}
    .chz-hero__meta{font-size:11.5px}
    .chz-sec{padding:64px 0 10px}
    .chz-head__ko{font-size:24px}
    .chz-head__en{font-size:12px}
    .chz-rail>li{width:30%;max-width:none}
    .chz-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px var(--chz-gap)}
    .chz-card__title{font-size:13.5px;height:calc(13.5px * 1.45 * 2)}
}

/* ============================================================
   PC (>=1200px) — 컨테이너는 760px 로 고정돼 있으므로
   «폭»을 늘리지 않고 타이포·여백만 조금 키운다.
   (지시: 상품 상세페이지 폭과 동일하게)
   ============================================================ */
@media (min-width:1200px){
    .chz-sec{padding:72px 0 12px}
    .chz-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}
    .chz-head__ko{font-size:26px}
    .chz-head__desc{margin-top:10px;font-size:13px}
    .chz-hero__en{font-size:46px}
    .chz-hero__ko{font-size:19px}
    .chz-more{max-width:420px;margin-inline:auto}
    .chz-foot{padding-bottom:56px}
}

/* 애니메이션 최소화 선호 */
@media (prefers-reduced-motion:reduce){
    .chz-card__img img{transition:none}
    .chz-hero .v2sp-hero__video{transition:none}
}