@charset "utf-8";
/* ============================================================================
 * wi-shop-035 — 비쥬(패션 주얼리몰) 테마 CSS (이 테마의 몫)
 * 여러 테마가 같이 쓰는 부품·화면(리셋·버튼·폼·카드·장바구니·주문서·회원·게시판·내 정보 …)은 common.css 에 있고,
 * 이 파일이 **뒤에** 로드돼 서체·토큰·헤더·푸터·메인·조합 덧칠을 입힌다. 일괄 수정은 common.css 한 곳만 고치면 된다.
 *
 *   0. 폰트   1. 토큰   6. 헤더   7. 푸터   8. 메인(조합 빌더)   9. 목록·상세의 이 테마 덧칠
 * ========================================================================= */

/* ── 0. 폰트 ─────────────────────────────────────────────────────────────
 * 폰트는 전부 테마 안에 있다 — 외부 CDN 을 타지 않는다. 라이선스 전문은 fonts/OFL-*.txt (SIL OFL 1.1).
 *   IBM Plex Sans KR   본문 · 400·500·600·700 (한글 서브셋 KS X 1001 2,350 음절 + 라틴·숫자·문장부호)
 *   Noto Serif KR      제목 · 가격 · 큰 숫자 · 500 한 벌(서브셋 같은 글자). 400~700 으로 선언해 굵게 요청해도 가짜 굵게가 안 생긴다
 *   Cormorant Garamond 로고 · 작은 영문 꼬리표 · 순위 숫자 — 라틴만(500 · 이탤릭 600)
 * ⚠️ Plex 는 700 이 가장 굵다. 800·900 을 적으면 브라우저가 가짜 굵게를 만든다.
 * ⚠️ ★ ☆ → ※ 는 이 서체들에 없다 — 중요한 기호는 글자 대신 SVG 로 그린다.
 * ⚠️ 파일을 갈아끼울 때는 뒤의 ?v= 를 올린다. */
@font-face{font-family:'IBM Plex Sans KR';font-weight:400;font-display:swap;
    src:local('IBM Plex Sans KR'),url('fonts/ibm-plex-sans-kr-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans KR';font-weight:500;font-display:swap;
    src:local('IBM Plex Sans KR Medium'),url('fonts/ibm-plex-sans-kr-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans KR';font-weight:600;font-display:swap;
    src:local('IBM Plex Sans KR SemiBold'),url('fonts/ibm-plex-sans-kr-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans KR';font-weight:700;font-display:swap;
    src:local('IBM Plex Sans KR Bold'),url('fonts/ibm-plex-sans-kr-700.woff2') format('woff2')}
@font-face{font-family:'Noto Serif KR';font-weight:400 700;font-display:swap;
    src:url('fonts/noto-serif-kr-500.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 700;font-display:swap;
    src:url('fonts/cormorant-garamond-500.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 700;font-display:swap;
    src:url('fonts/cormorant-garamond-italic-600.woff2') format('woff2')}

/* ── 1. 토큰 ─────────────────────────────────────────────────────────────
 * 비쥬(패션 주얼리)는 **따뜻한 오프화이트 바탕 + 잉크 + 황동 한 가지**다. 모서리는 직각, 선은 1px.
 * 잉크(--wi-accent = --wi-dark)가 버튼·활성 탭이고, 황동(--wi-brass)은 꼬리표·순위·할인·활성 메뉴 글자에만 쓴다.
 * 색은 전부 이 토큰을 거친다 — 아래 값만 바꾸면 테마 색이 바뀐다. 이름은 역할로 붙인다.
 * ⚠️ 직접 적은 색(`#fff`·`#000`)은 토큰을 따라오지 않는다. 강조색 위의 글자는 var(--wi-on-accent),
 *    어두운 띠(--wi-dark) 위의 글자는 --wi-on-dark 를 쓴다.
 * 대비(WCAG): ink/bg 17.6 · ink-soft/bg 9.3 · mute/bg 5.2(tint 위 4.8) · brass/흰 5.0(bg 위 4.6) ·
 *   on-dark/dark 10.9 · on-accent/accent 17.9 — 기준 미달 0건 */
:root{
    /* 글자 */
    --wi-ink:        #14130f;   /* 본문·제목 */
    --wi-ink-soft:   #45413a;   /* 설명문 */
    --wi-mute:       #6b675e;   /* 보조 링크 */
    --wi-mute-2:     #6b675e;   /* 보조 설명 */
    --wi-faint:      #6b675e;   /* 라벨 */
    --wi-faint-2:    #6b675e;   /* 취소선 가격·크레딧 (4.5:1 이상) */

    /* 바탕 */
    --wi-bg:         #f7f6f3;   /* 페이지 — 끝까지 흰색이다 */
    --wi-surface:    #ffffff;   /* 카드·입력칸 */
    --wi-tint:       #f1ece3;   /* 안내 띠·hover·푸터·분류 바 */
    --wi-tint-2:     #f7f6f3;   /* 상품 이미지 바탕 */
    --wi-tint-3:     #f1ece3;   /* 옅은 포인트색 면 (레드 글자를 얹는다) */
    --wi-warm:       #f1ece3;   /* 서브 배너 바탕 */
    --wi-dark:       #14130f;   /* 잉크 면 — 활성 탭·보조 버튼·순위 배지·툴팁 */

    /* 선 */
    --wi-line:       #e3e0d9;   /* 기본 테두리 */
    --wi-line-2:     #eeebe4;   /* 섹션 구분선(옅은 것) */
    --wi-line-3:     #e3e0d9;   /* 밝은 면 위의 구분선 */
    --wi-line-4:     #14130f;   /* 아웃라인 버튼 — 시안 A 는 잉크 1px 이다 */
    --wi-line-dk:    #2e2c26;   /* 어두운 띠 안의 구분선 */

    /* 어두운 띠(--wi-dark) 위의 글자 */
    --wi-on-dark:      #cfc9bd;
    --wi-on-dark-hi:   #ffffff;
    --wi-on-dark-tint: #c9a46a;   /* 어두운 배너의 형광 강조 */

    /* 강조 — 이 두 줄(+ on-accent)만 바꾸면 테마 색이 바뀐다.
       프리셋: #c9352a 시그널 레드(기본) · #c8102e 토마토 · #1d4ed8 블루 · #6f4630 코코아
       ⚠️ 이 색 위에 얹는 글자는 --wi-on-accent(밝은 색)라, 너무 밝은 색은 고르지 않는다. */
    --wi-accent:       #14130f;
    --wi-accent-hover: #3a3830;
    --wi-on-accent:    #ffffff;
    --wi-sale:         #8a6a3c;   /* 할인율·세일·단위가격 — 포인트색과 같다 */
    --wi-ok:           #1f6b3a;   /* 성공·재고 있음 */
    --wi-star:         #8a6a3c;   /* 별점 별 */

    /* 타이포 — 본문 IBM Plex Sans KR 하나(외부 폰트 없음).
       ⚠️ 이 서체는 700 이 가장 굵다. 800·900 은 쓰지 않는다 — 큰 숫자는 크기와
       자간(--wi-tr-*)으로 민다. 숫자는 폭이 고정된 자리(tabular-nums)로 둔다. */
    --wi-font: 'IBM Plex Sans KR', -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Malgun Gothic", "맑은 고딕", sans-serif;
    --wi-display: 'Noto Serif KR', 'Nanum Myeongjo', 'Batang', '바탕', serif;   /* 제목·가격·큰 숫자 — 명조(500 한 벌만 싣는다) */
    --wi-latin: 'Cormorant Garamond', 'Times New Roman', serif;   /* 로고·작은 영문 꼬리표(라틴만) */
    --wi-brass: #8a6a3c;   /* 황동 — 꼬리표·순위·할인·활성 글자. 흰 면 위 5.0:1 */
    --wi-mono: var(--wi-font);
    --wi-tr-1:      -.032em;    /* 섹션 제목 */
    --wi-tr-2:      -.04em;     /* 큰 제목·배너 */
    --wi-tr-3:      -.045em;    /* 로고·가장 큰 숫자 */
    --wi-fs:         15px;      /* 기준 글자크기 */
    --wi-lh:         normal;

    /* 레이아웃 — 사이드바 없이 가운데 정렬. 콘텐츠 폭은 1312(= max 1440 − 거터 64×2) */
    --wi-side:       0px;
    --wi-max:        1440px;
    --wi-gutter:     clamp(16px, 4.44vw, 64px);
    /* 좁은 화면 하단 구매바(#sit_buy) 높이 — 버튼 50 + 위아래 여백 20 + 선 1 */
    --wi-buybar:     71px;
    /* 장바구니·주문서 하단 고정 바 높이 — 버튼 50 + 위아래 여백 22 + 선 2 */
    --wi-cartbar:    74px;
    /* 하단 탭 바는 없다(시안 A) */
    --wi-tabbar:     0px;
    --wi-sec-gap:    clamp(44px, 5.3vw, 76px);  /* 섹션 사이 */

    /* 분류 색 — 쓰지 않는다(분류에 색 타일을 두지 않는다). 남은 참조를 위해 중립색만 둔다 */
    --wi-fam-1: #f4f6f8;
    --wi-fam-2: #f4f6f8;
    --wi-fam-3: #f4f6f8;
    --wi-fam-4: #f4f6f8;
    --wi-fam-5: #f4f6f8;

    /* 모서리 — 시안 A 는 많이 둥글지 않다. 보드 값: 버튼·검색 12 · 상품사진 12 ·
       테두리 카드 14 · 큰 배너·패널 18 · 종 스위치·칩은 알약. */
    --wi-r-btn:      0;
    --wi-r-img:      0;
    --wi-r-box:      0;
    --wi-r-lg:       0;
    --wi-r-pill:     0;
}

/* ── 6. 헤더 ─────────────────────────────────────────────────────────────
 * 가운데 로고 한 줄 헤더(캔버스 "C안 · 헤더"). 위에서부터 세 덩이다.
 *   .wi-hd-strip  얇은 안내 줄 — 왼쪽 한 줄 안내 · 오른쪽 로그인/내 정보·주문조회·고객센터
 *   .wi-hd-bar    따라오는 줄 — 왼쪽 밑줄 검색 · 가운데 자간 넓은 로고 · 오른쪽 글자 링크(찜·장바구니·내 조합)
 *   .wi-nav       가운데 정렬 글자 메뉴(대분류 + SALE)
 * 900px 이하는 보드 "C안 · 모바일 헤더": ☰ · 로고 · 아이콘 / 늘 열린 검색 / 가로 분류 레일. 하단 탭 바는 없다.
 * 분류 글자에는 사진·색 타일을 쓰지 않는다 → feedback-category-text-only                              */
:root{--wi-hd:78px}
.wi-hd{position:relative;z-index:60}
/* ⚠️ 넓은 화면에서는 이 래퍼가 레이아웃에 없어야 한다(안쪽 sticky 가 래퍼 높이 안에서만 따라오다 같이 밀려 올라간다). */
@media (min-width:901px){ .wi-hd{display:contents}}

.wi-hd-strip{background:var(--wi-surface);border-bottom:1px solid var(--wi-line-2);font-size:11.5px;letter-spacing:.04em;color:var(--wi-mute)}
.wi-hd-strip__in{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:var(--wi-max);margin:0 auto;padding:9px var(--wi-gutter)}
.wi-hd-acct{display:flex;align-items:center;gap:22px}
.wi-hd-acct .wi-hd-ico{color:var(--wi-mute)}
.wi-hd-acct .wi-hd-ico:hover{color:var(--wi-ink)}
.wi-hd-note{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.wi-hd-bar{position:sticky;top:0;z-index:60;background:var(--wi-surface);border-bottom:1px solid var(--wi-line)}
.wi-hd-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;height:78px;max-width:var(--wi-max);margin:0 auto;padding:0 var(--wi-gutter)}
.wi-hd-burger{display:none}

.wi-logo{grid-column:2;justify-self:center;display:flex;align-items:center;color:var(--wi-ink);line-height:1}
.wi-logo__txt{font:500 38px/1 var(--wi-latin);letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;white-space:nowrap}
.wi-logo img{max-height:34px;width:auto}

/* 검색 — 밑줄 하나. 글자 [검색] 버튼은 없다(Enter 로 보낸다) */
.wi-hd-sch{grid-column:1;grid-row:1;justify-self:start;display:flex;align-items:center;gap:10px;width:260px;max-width:100%;padding-bottom:7px;border-bottom:1px solid var(--wi-ink);color:var(--wi-ink)}
.wi-hd-sch__i{flex:none;display:flex}
.wi-hd-sch input{flex:1;min-width:0;padding:0;border:0;background:transparent;outline:0;font-size:12.5px;letter-spacing:.06em;color:var(--wi-ink)}
.wi-hd-sch input::placeholder{color:var(--wi-mute);letter-spacing:.06em}
.wi-hd-sch input::-webkit-search-cancel-button{display:none}
.wi-hd-sch:focus-within{border-bottom-color:var(--wi-brass)}

/* 도구 — 글자 링크. 좁은 화면에서만 아이콘이 나온다 */
.wi-hd-tools{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:26px;font-size:12.5px;letter-spacing:.06em}
.wi-hd-ico{position:relative;display:inline-flex;align-items:flex-start;gap:3px;color:var(--wi-ink);background:none;border:0;padding:0;font:inherit;cursor:pointer}
.wi-hd-ico:hover{color:var(--wi-brass)}
.wi-hd-ico__i{display:none}
.wi-hd-ico .wi-badge{display:inline-block;margin-top:-4px;font-size:10px;font-weight:600;line-height:1;color:var(--wi-brass)}
.wi-hd-combo{padding-bottom:3px;border-bottom:1px solid var(--wi-brass);color:var(--wi-brass)}
.wi-hd-combo b{font-weight:600}
.wi-hd-combo:hover{color:var(--wi-ink);border-bottom-color:var(--wi-ink)}

/* 분류 줄 — 가운데 정렬 글자 */
.wi-nav{position:relative;z-index:59;background:var(--wi-surface);border-bottom:1px solid var(--wi-line)}
.wi-nav__in{display:flex;justify-content:center;max-width:var(--wi-max);margin:0 auto;padding:0 var(--wi-gutter)}
.wi-nav__gnb{display:flex;justify-content:center;gap:46px;padding:16px 0 18px;font-size:13.5px;letter-spacing:.08em;white-space:nowrap}
.wi-nav__gnb a{display:block;color:var(--wi-ink);padding-bottom:3px;border-bottom:1px solid transparent}
.wi-nav__gnb a:hover{color:var(--wi-brass)}
.wi-nav__gnb a.is-on{color:var(--wi-brass);border-bottom-color:var(--wi-brass)}
.wi-nav__gnb a.is-sale{color:var(--wi-brass)}

/* 6-3 좁은 화면 전용 부품 — 넓은 화면에서는 모두 감춘다 */
.wi-cs{display:none}

/* 6-7 좁은 화면 — 보드 "C안 · 모바일 헤더". **하단 탭 바는 두지 않는다.**
 *   1줄 56px  ☰ · 가운데 로고 · 찜 · 장바구니 (로그인·주문조회는 ☰ 서랍 위쪽 계정 줄에 있다)
 *   2줄       검색칸 — 늘 열려 있다
 *   3줄       가로로 밀리는 분류 레일(.wi-nav) */
@media (max-width:900px){
    :root{--wi-hd:56px}
    .wi-hd-strip{display:none}
    .wi-hd-bar{position:sticky;border-bottom:0}
    .wi-hd-in{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"burger logo tools" "sch sch sch";gap:0;height:auto;padding:0 6px 0 4px}
    .wi-hd-burger{grid-area:burger;display:flex;align-items:center;justify-content:center;width:44px;height:56px;color:var(--wi-ink);background:none;cursor:pointer}
    .wi-logo{grid-area:logo;justify-self:center;height:56px}
    .wi-logo__txt{font-size:25px;letter-spacing:.36em;padding-left:.36em}
    .wi-hd-tools{grid-area:tools;gap:0}
    .wi-hd-ico{width:42px;height:56px;align-items:center;justify-content:center;gap:0}
    .wi-hd-ico__i{display:flex}
    .wi-hd-ico__t{display:none}
    .wi-hd-ico .wi-badge{position:absolute;right:4px;top:13px;margin:0;min-width:15px;height:15px;box-sizing:border-box;padding:0 4px;display:flex;align-items:center;justify-content:center;background:var(--wi-dark);color:var(--wi-on-dark-hi);font-size:9.5px}
    .wi-hd-combo{display:none}
    .wi-hd-sch{grid-area:sch;justify-self:stretch;width:auto;margin:0 16px 12px}
    .wi-hd-sch input{font-size:13px}
    .wi-nav{border-bottom:1px solid var(--wi-line)}
    .wi-nav__in{padding:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;justify-content:flex-start}
    .wi-nav__in::-webkit-scrollbar{display:none}
    .wi-nav__gnb{gap:26px;padding:4px 16px 14px;font-size:13.5px}

    /* 카테고리 서랍 — 화면을 덮는다. 위에 계정 링크, 아래에 글자 목록 */
    .wi-cs{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;background:var(--wi-surface);animation:wi-cs-in .25s}
    .wi-cs[hidden]{display:none}
    @keyframes wi-cs-in{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}
    .wi-cs__head{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 6px 16px;font-size:19px;border-bottom:1px solid var(--wi-line-2)}
    .wi-cs__x{width:44px;height:44px;font-size:26px;color:var(--wi-ink)}
    .wi-cs__acct{display:flex;flex-wrap:wrap;gap:6px 16px;padding:12px 16px;border-bottom:1px solid var(--wi-line-2);font-size:14px}
    .wi-cs__acct b{font-weight:700}
    .wi-cs__acct a{color:var(--wi-mute)}
    .wi-cs__body{flex:1;display:flex;min-height:0}
    .wi-cs__l{flex:none;width:132px;overflow-y:auto;background:var(--wi-tint)}
    .wi-cs__tab{display:block;width:100%;height:52px;padding:0 14px;text-align:left;font-size:14.5px;font-weight:500;color:var(--wi-ink)}
    .wi-cs__tab.is-on{background:var(--wi-surface);color:var(--wi-brass);font-weight:700}
    .wi-cs__r{flex:1;min-width:0;overflow-y:auto;padding:18px 16px}
    .wi-cs__pane[hidden]{display:none}
    .wi-cs__pane h4{margin:0 0 10px;font:500 17px var(--wi-display)}
    .wi-cs__pane li a{display:block;padding:11px 0;border-bottom:1px solid var(--wi-line-2);font-size:14.5px}
    html.wi-cs-open{overflow:hidden}
    .wi-my__veil{z-index:73}}
@media (prefers-reduced-motion:reduce){
    .wi-cs,.wi-hd-my__panel{animation:none}}

/* ── 7. 푸터 ───────────────────────────────────────────────────────────
 * 캔버스 "C안 · 푸터" — 잉크 바탕에 글자 로고 · 고객센터 · 링크 묶음 · 맨 아래 법적 고지.
 * 좁은 화면의 접힘(<details>)·설문 위젯 규칙은 common.css 에 있다. */
.wi-ft{margin-top:var(--wi-sec-gap);background:var(--wi-dark);color:var(--wi-on-dark)}
.wi-ft a{color:var(--wi-on-dark)}
.wi-ft a:hover{color:var(--wi-on-dark-hi)}
.wi-ft-helps{border-top:1px solid var(--wi-line-dk);border-bottom:1px solid var(--wi-line-dk)}
.wi-ft-helps__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));max-width:var(--wi-max);margin:0 auto;padding:0 var(--wi-gutter)}
.wi-ft-help{box-sizing:border-box;padding:18px 20px 18px 26px}
.wi-ft-help + .wi-ft-help{border-left:1px solid var(--wi-line-dk)}
.wi-ft-helps__in > .wi-ft-help:first-child{padding-left:0}
.wi-ft-help__t{margin:0 0 5px;font-size:13.5px;font-weight:700;color:var(--wi-on-dark-hi)}
.wi-ft-help__d{margin:0;font-size:12px;line-height:1.65}

.wi-ft-in{max-width:var(--wi-max);margin:0 auto;padding:64px var(--wi-gutter) 0;font-size:13px}
.wi-ft-grid{display:grid;grid-template-columns:minmax(240px,1.3fr) repeat(var(--wi-ft-n,4),minmax(0,.7fr)) minmax(240px,1.1fr);gap:48px}
.wi-ft h5,.wi-ft-nav summary{margin:0 0 16px;font-size:11.5px;font-weight:500;letter-spacing:.14em;color:var(--wi-on-dark-tint)}
.wi-ft-co p,.wi-ft-cs p{margin:0 0 6px;line-height:1.85}
.wi-ft__logo{margin:0 0 18px!important;line-height:1}
.wi-ft__logo b{font:500 34px/1 var(--wi-latin);letter-spacing:.42em;color:var(--wi-on-dark-hi);text-transform:uppercase}
.wi-ft__note{margin:0 0 14px!important;font-size:12.5px;line-height:1.85;color:var(--wi-on-dark)}
.wi-ft-sns{display:flex;gap:7px}
.wi-ft-sns__b{display:flex;align-items:center;justify-content:center;width:32px;height:32px;box-sizing:border-box;border:1px solid var(--wi-line-dk);font-size:10.5px;font-weight:600;color:var(--wi-on-dark)}
a.wi-ft-sns__b:hover{border-color:var(--wi-on-dark-hi)}
.wi-ft-nav{min-width:0}
.wi-ft-nav summary{display:flex;align-items:center;list-style:none;cursor:default}
.wi-ft-nav summary::-webkit-details-marker{display:none}
.wi-ft-nav__pm{display:none}
.wi-ft-nav ul{display:flex;flex-direction:column;gap:11px}
.wi-ft-nav li{line-height:1.3}

/* 고객센터 — 번호는 크게(명조), 버튼 둘은 테두리만 */
.wi-ft-cs{align-self:start}
.wi-ft__tel{margin:0 0 10px!important;font:500 28px/1.1 var(--wi-display);color:var(--wi-on-dark-hi)}
.wi-ft__time{margin:0 0 18px!important;font-size:12.5px;line-height:1.8}
.wi-ft__btns{display:flex;gap:8px}
.wi-ft__btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 20px;border:1px solid var(--wi-line-dk);background:transparent;font-size:12.5px;letter-spacing:.04em;color:var(--wi-on-dark);text-align:center}
.wi-ft__btn.is-ink{border-color:var(--wi-line-dk);background:transparent;color:var(--wi-on-dark)}
.wi-ft__btn:hover,.wi-ft__btn.is-ink:hover{border-color:var(--wi-on-dark-hi);background:transparent;color:var(--wi-on-dark-hi)}

/* 법적 고지 띠 */
.wi-ft-law{margin-top:44px;border-top:1px solid var(--wi-line-dk);background:transparent}
.wi-ft-law__in{max-width:var(--wi-max);margin:0 auto;padding:22px var(--wi-gutter) 28px}
.wi-ft-policy{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 10px;font-size:12px}
.wi-ft-policy a.is-hi{color:var(--wi-on-dark-hi);font-weight:700}
.wi-ft-biz{margin:0 0 6px;font-size:11.5px;line-height:1.8;color:var(--wi-faint-2-dk,#9a968c)}
.wi-ft-biz:last-child{margin:0}
.wi-ft-pay,.wi-ft-copy{margin-left:6px}
.wi-ft-pay::before,.wi-ft-copy::before{content:"· "}

/* ── 8. 메인 — 조합 빌더 (캔버스 "C안 · 메인" / "C안 · 모바일 메인") ───────────────────────────
 *   .wi-cb          ① 빌더: 왼쪽 부위별 후보 · 오른쪽 모아 보기 + 합계 + 담기
 *   .wi-cb-look     ② 추천 조합
 *   .wi-cb-card     ③ 신상품 카드(+ 조합에 넣기)
 *   .wi-cb-rank     ④ 후기 많은 순
 *   .wi-cbar        내 조합 바 — 목록·상세·메인 아래에 달라붙는다
 * 모서리는 직각, 선은 1px, 강조는 황동(--wi-brass) 한 가지. 숫자·큰 제목은 명조(--wi-display).   */
.wi-cb-page{display:flex;flex-direction:column;gap:clamp(64px,7.2vw,104px);max-width:var(--wi-max);margin:0 auto;padding:clamp(24px,4.4vw,64px) var(--wi-gutter) 8px}
.wi-cb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);background:var(--wi-surface);border:1px solid var(--wi-line);scroll-margin-top:calc(var(--wi-hd) + 16px)}
.wi-cb__l{padding:clamp(24px,2.8vw,40px);display:flex;flex-direction:column;gap:22px}
.wi-cb__kick{font:italic 600 17px var(--wi-latin);color:var(--wi-brass)}
.wi-cb__h{margin:6px 0 0;font:500 clamp(30px,3.2vw,46px)/1.1 var(--wi-display);letter-spacing:-.02em}
.wi-cb__p{margin:10px 0 0;font-size:14.5px;line-height:1.7;color:var(--wi-mute)}
.wi-cb__row{display:flex;align-items:center;gap:14px}
.wi-cb__rl{flex:0 0 52px;font-size:15px;font-weight:700}
.wi-cb__opts{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.wi-cb__opt.is-none{width:48px}
.wi-cb__opt{flex:none;width:60px;height:60px;padding:2px;background:var(--wi-surface);border:2px solid var(--wi-line);cursor:pointer;transition:border-color .15s}
.wi-cb__opt:hover{border-color:var(--wi-mute)}
.wi-cb__opt img{width:100%;height:100%;object-fit:cover;display:block}
.wi-cb__opt.is-on,.wi-cb__opt.is-on:hover{border-color:var(--wi-ink)}
.wi-cb__opt.is-none{background:var(--wi-bg);border-color:transparent;font-size:11.5px;color:var(--wi-mute)}
.wi-cb__opt.is-none.is-on{border-color:var(--wi-ink)}
.wi-cb__note{margin:-12px 0 0;font-size:12px;color:var(--wi-brass)}

.wi-cb__r{background:var(--wi-tint);padding:clamp(24px,2.8vw,40px);display:flex;flex-direction:column;gap:20px;min-width:0}
.wi-cb__slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.wi-cb__slot{background:var(--wi-surface);overflow:hidden;min-width:0}
.wi-cb__slot.is-full{border:1px solid var(--wi-line);animation:wi-cb-in .35s ease both}
.wi-cb__slot.is-empty{border:1px dashed #cfc9bd;display:flex;align-items:center;justify-content:center;min-height:190px}
.wi-cb__empty{font-size:13px;color:var(--wi-mute)}
.wi-cb__slot-a{display:block}
.wi-cb__slot img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.wi-cb__slot-t{display:flex;justify-content:space-between;gap:8px;padding:10px 12px 8px;font-size:13px;line-height:1.4}
.wi-cb__slot-t > b{white-space:nowrap}
.wi-cb__lab{display:block;font-size:11.5px;font-weight:500;letter-spacing:.06em;color:var(--wi-brass)}
.wi-cb__optrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 12px 12px;font-size:11.5px;color:var(--wi-mute)}
.wi-cb__oc{height:30px;min-width:38px;padding:0 9px;border:1px solid var(--wi-line);background:var(--wi-surface);font-size:12px;color:var(--wi-ink);cursor:pointer}
.wi-cb__oc.is-on{background:var(--wi-dark);border-color:var(--wi-dark);color:var(--wi-on-dark-hi)}
.wi-cb__oc:disabled{opacity:.4;text-decoration:line-through;cursor:not-allowed}
.wi-cb__sum{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.wi-cb__sumt{font-size:13px;color:var(--wi-mute)}
.wi-cb__sumt em{font-style:normal}
.wi-cb__sumt b{display:block;margin-top:2px;font:500 36px/1.15 var(--wi-display);color:var(--wi-ink)}
.wi-cb__btns{display:flex;gap:10px}
.wi-cb__clear{height:52px;padding:0 22px;border:1px solid var(--wi-ink);background:transparent;font-size:15px;font-weight:700;color:var(--wi-ink);cursor:pointer}
.wi-cb__go{height:52px;padding:0 30px;border:0;background:var(--wi-dark);color:var(--wi-on-dark-hi);font-size:16px;font-weight:700;cursor:pointer}
.wi-cb__go:hover{background:var(--wi-accent-hover)}
.wi-cb__go:disabled{opacity:.4;cursor:not-allowed}
@keyframes wi-cb-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.wi-cb-sh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 22px}
.wi-cb-sh h2{margin:0;font:500 clamp(24px,2.4vw,32px) var(--wi-display);letter-spacing:-.02em}
.wi-cb-sh > span{font-size:14px;color:var(--wi-mute)}
.wi-cb-sh__more{margin-left:auto;font-size:14px;font-weight:700;color:var(--wi-brass)}

.wi-cb-looks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.wi-cb-look{background:var(--wi-surface);border:1px solid var(--wi-line);padding:20px;display:flex;flex-direction:column;gap:16px;min-width:0}
.wi-cb-look__imgs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.wi-cb-look__imgs img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.wi-cb-look__t{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.wi-cb-look__t b{font-size:20px}
.wi-cb-look__t span b{display:block;font-size:18px;letter-spacing:-.02em}
.wi-cb-look__t i{font-style:normal;font-size:13px;color:var(--wi-mute)}
.wi-cb-look__go{height:46px;border:1px solid var(--wi-ink);background:transparent;font-size:14px;font-weight:700;color:var(--wi-ink);cursor:pointer}
.wi-cb-look__go:hover{background:var(--wi-dark);color:var(--wi-on-dark-hi)}

.wi-cb-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.wi-cb-card{display:flex;flex-direction:column;background:var(--wi-surface);border:1px solid var(--wi-line);min-width:0;animation:wi-cb-in .5s ease both}
.wi-cb-card:nth-child(2){animation-delay:.04s}.wi-cb-card:nth-child(3){animation-delay:.08s}.wi-cb-card:nth-child(4){animation-delay:.12s}
.wi-cb-card:nth-child(5){animation-delay:.16s}.wi-cb-card:nth-child(n+6){animation-delay:.2s}
.wi-cb-card__a{display:block;flex:1;color:var(--wi-ink)}
.wi-cb-card__img{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--wi-tint-2)}
.wi-cb-card__img img{width:100%;height:100%;object-fit:cover;display:block}
.wi-cb-card__chip{position:absolute;left:10px;top:10px;padding:3px 10px;background:var(--wi-surface);font-size:11.5px;font-weight:700}
.wi-cb-card__n{display:block;padding:12px 14px 4px;font-size:13.5px;line-height:1.4}
.wi-cb-card__p{display:flex;gap:7px;align-items:baseline;padding:0 14px 12px}
.wi-cb-card__p b{font-size:15px}
.wi-cb-card__p s{font-size:12px;color:var(--wi-faint-2)}
.wi-cb-card__f{display:block;padding:0 14px 14px}
.wi-cb-add{width:100%;height:38px;border:1px solid var(--wi-ink);background:transparent;font-size:12.5px;font-weight:700;color:var(--wi-ink);cursor:pointer;transition:background .15s,color .15s}
.wi-cb-add:hover,.wi-cb-add.is-on{background:var(--wi-dark);color:var(--wi-on-dark-hi)}

.wi-cb-rank{margin:0;padding:0;list-style:none;background:var(--wi-surface);border:1px solid var(--wi-line)}
.wi-cb-rank li + li{border-top:1px solid var(--wi-line-2)}
.wi-cb-rank a{display:flex;align-items:center;gap:22px;padding:14px 26px;color:var(--wi-ink)}
.wi-cb-rank a:hover{background:var(--wi-bg)}
.wi-cb-rank__no{flex:none;width:34px;font:italic 600 30px/1 var(--wi-latin);color:var(--wi-brass)}
.wi-cb-rank__img{flex:none;width:56px;height:56px;overflow:hidden;background:var(--wi-tint-2)}
.wi-cb-rank__img img{width:100%;height:100%;object-fit:cover;display:block}
.wi-cb-rank__n{flex:0 0 300px;min-width:0;font-size:14.5px}
.wi-cb-rank__n i{display:block;font-style:normal;font-size:12px;color:var(--wi-mute)}
.wi-cb-rank__bar{flex:1;min-width:40px;height:8px;background:var(--wi-tint-2)}
.wi-cb-rank__bar span{display:block;height:100%;background:var(--wi-dark);transform-origin:left;animation:wi-cb-grow .9s cubic-bezier(.2,.7,.2,1) both}
.wi-cb-rank li:nth-child(2) .wi-cb-rank__bar span{animation-delay:.08s}.wi-cb-rank li:nth-child(3) .wi-cb-rank__bar span{animation-delay:.16s}
.wi-cb-rank li:nth-child(4) .wi-cb-rank__bar span{animation-delay:.24s}.wi-cb-rank li:nth-child(5) .wi-cb-rank__bar span{animation-delay:.32s}
.wi-cb-rank__c{flex:none;width:110px;text-align:right;font-size:15px}
@keyframes wi-cb-grow{from{transform:scaleX(0)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
    .wi-cb__slot.is-full,.wi-cb-card,.wi-cb-rank__bar span{animation:none}}

/* 내 조합 바 — 달라붙는다. 비어 있으면(hidden) 나오지 않는다 */
.wi-cbar{position:sticky;bottom:0;z-index:50;background:var(--wi-dark);color:var(--wi-on-dark-hi)}
.wi-cbar[hidden]{display:none}
.wi-cbar__in{display:flex;align-items:center;gap:20px;padding:14px var(--wi-gutter)}
.wi-cbar__t{font:italic 600 21px/1 var(--wi-latin)}
.wi-cbar__slots{display:flex;gap:8px}
.wi-cbar__slot{position:relative;display:flex;align-items:center;justify-content:center;width:46px;height:46px;box-sizing:border-box;border:1px dashed #5b5a52;font-size:11px;color:#9a968c}
.wi-cbar__slot i{font-style:normal}
.wi-cbar__slot.is-on{border:0;background:var(--wi-surface);padding:2px}
.wi-cbar__slot img{width:100%;height:100%;object-fit:cover;display:block}
.wi-cbar__sum{font-size:13px;color:var(--wi-on-dark)}
.wi-cbar__sum em{font-style:normal}
.wi-cbar__sum b{margin-left:4px;font:500 20px var(--wi-display);color:var(--wi-on-dark-hi)}
.wi-cbar__go{margin-left:auto;height:46px;padding:0 26px;border:0;background:var(--wi-surface);color:var(--wi-ink);font-size:14.5px;font-weight:700;cursor:pointer}
.wi-cbar__go:hover{background:var(--wi-tint)}

/* 목록·검색의 카드 — 맨 아래 한 줄 버튼. 사진 위 둥근 [담기] 는 쓰지 않는다 */
.wi-hm-card .wi-hm-add{display:none}
.wi-hm-card__f{display:block;padding:0 0 2px}
.wi-hm-card__f .wi-cb-add{margin-top:10px}

/* 좁은 화면 — 보드 "C안 · 모바일 메인": 후보는 부위마다 가로로 밀고, 추천 조합도 가로로 민다 */
@media (max-width:1100px){
    .wi-cb{grid-template-columns:minmax(0,1fr)}
    .wi-cb__l,.wi-cb__r{min-width:0}
    .wi-cb-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
    .wi-cb-rank__n{flex-basis:200px}}
@media (max-width:700px){
    .wi-cb-page{gap:56px}
    .wi-cb__l{padding:24px 16px 20px;gap:14px}
    .wi-cb__row{flex-direction:column;align-items:stretch;gap:7px}
    .wi-cb__rl{flex:none;font-size:12.5px}
    .wi-cb__opts{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px;scrollbar-width:none}
    .wi-cb__opts::-webkit-scrollbar{display:none}
    .wi-cb__opt{width:64px;height:64px}
    .wi-cb__r{padding:12px}
    .wi-cb__slots{gap:10px}
    .wi-cb__slot.is-empty{min-height:150px}
    .wi-cb__sumt b{font-size:26px}
    .wi-cb__btns{width:100%}
    .wi-cb__clear{height:44px;padding:0 18px;font-size:13px}
    .wi-cb__go{flex:1;height:52px;font-size:15px}
    .wi-cb-looks{display:flex;gap:12px;overflow-x:auto;margin:0 calc(var(--wi-gutter) * -1);padding:0 var(--wi-gutter);scrollbar-width:none}
    .wi-cb-looks::-webkit-scrollbar{display:none}
    .wi-cb-look{flex:none;width:272px;padding:14px}
    .wi-cb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .wi-cb-card__f{padding:0 10px 10px}
    .wi-cb-rank a{gap:12px;padding:12px}
    .wi-cb-rank__no{width:20px;font-size:20px}
    .wi-cb-rank__img{width:48px;height:48px}
    .wi-cb-rank__n{flex:1;font-size:13px}
    .wi-cb-rank__bar{display:none}
    .wi-cb-rank__c{width:auto;font-size:12.5px}
    .wi-cbar__in{gap:10px;padding:10px 12px}
    .wi-cbar__t,.wi-cbar__slot i{display:none}
    .wi-cbar__slots{gap:5px}
    .wi-cbar__slot{width:38px;height:38px}
    .wi-cbar__go{height:42px;padding:0 16px;font-size:13px}}
/* ── 9. 목록·상세의 이 테마 덧칠 ───────────────────────────────────────────
 * 목록·상세의 뼈대는 common.css(12 · 8-6)를 그대로 쓰고, 이 테마의 몫만 여기서 덮는다. */
.wi-it-combo{margin:10px 0 0}
.wi-it-combo .wi-cb-add{height:50px;font-size:14px}
.wi-cb-none{margin:0;padding:80px 0;text-align:center;font-size:15px;color:var(--wi-mute)}