/* =========================================================
Westwick — 영카트5 통합 오버라이드
(원본 디자인 styles.css 는 건드리지 않고, 영카트 기본 테마와
충돌하는 부분만 여기서 덮어쓴다. styles.css 뒤에 로드한다.)
========================================================= */
/* 기본 테마가 #hd/#wrapper/#ft 에 건 최소폭(1200px) 제거 → 반응형 유지 */
#hd, #wrapper, #ft { min-width: 0 !important; }
/* 전체 배경 흰색 통일 (기본 테마 회색 #f6f6f6 제거) — Westwick 기본은 화이트 */
#wrapper { background: #fff; }
/* 헤더 영역(#hd): 기본 테마 어두운 배경 제거.
Westwick 마크업(.util-strip / .site-header)이 자체 배경을 가진다. */
#hd { background: transparent !important; border: 0 !important; }
/* 숨김용 사운드 전용 제목 */
#hd_h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; }
/* 커뮤니티 레이아웃의 헤더 위/아래 구분선(hr) 숨김 (Westwick 헤더와 안 어울림) */
#hd + hr, #wrapper + hr { display: none; }
/* 로그인 안내 메시지(#hd_login_msg)가 헤더 위에 뜨면 거슬리므로 숨김 */
#hd_login_msg { display: none; }
/* 우측 퀵 사이드 메뉴(마이메뉴/오늘본상품/장바구니/위시리스트) — 숨김 보존.
마크업과 PHP include 는 그대로 두고 화면에서만 가린다(2차에 재검토). */
#side_menu { display: none !important; }
/* 푸터 영역(#ft): 기본 테마 스타일 제거. Westwick .site-footer 가 채운다. */
#ft { background: transparent !important; margin: 0; text-align: left; min-height: 0; }
#ft #top_btn { display: none; } /* 기본 테마 top 버튼 숨김(우리 .top-btn 사용) */
/* 사업자 정보(실판매 필수 표기) — footer 내부 블록 */
.footer-bizinfo {
border-top: 1px solid var(--footer-line);
padding-top: 22px;
margin-bottom: 22px;
color: var(--footer-muted);
font-size: 12px;
line-height: 1.95;
letter-spacing: 0.01em;
}
.footer-bizinfo b { color: var(--footer-text); font-weight: 600; }
/* 드로어/토스트 z-index 끌어올리기.
기본 테마가 헤더 요소(#hd_wrapper, #hd_pop, #category 등)에 z-index:1000 까지
부여해서, 디자인 기본값(50)이던 드로어가 헤더 아래로 가려진다. 그 위로 올린다. */
.cart-drawer,
.search-drawer { z-index: 100000 !important; }
.toast { z-index: 100001 !important; }
.top-btn { z-index: 9000 !important; }
/* ── 커스텀 메인(index) 레이아웃 ──────────────────────────────
기본 테마는 index 에서 좌측 사이드(#aside, 285px)와 #container(1200px 고정)를
쓴다. Westwick 메인은 전체폭 편집형이라 그 제약을 해제한다.
(:has() 미지원 구형 브라우저는 무시 — 디자인 자체가 모던 타깃) */
#wrapper:has(.shop-content.is_index) { background: #fff; }
#wrapper:has(.shop-content.is_index) #aside { display: none; }
#container:has(.shop-content.is_index) { width: 100%; margin: 0; padding: 0; }
.shop-content.is_index { margin-left: 0 !important; padding: 0 !important; }
.shop-content.is_index #text_size { display: none; }
/* 메인 히어로: 하단에서 올라오는 검정 그라데이션 (캡션 가독성) */
.hero .hero-overlay { background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.28) 72%, rgba(0,0,0,0.55) 100%); }
/* 메인 배너 텍스트/컨트롤 좌우 56px 인셋 제거 (히어로 + 하단 Discover 배너 모두) */
.hero-caption { left: 0 !important; }
.hero-controls { right: 0 !important; }
.banner-content { left: 0 !important; }
/* 상품 이미지 통일: 1:1 고정 박스 + contain(안 짤리게 전체 표시) + 정중앙
(비율이 달라도 박스 크기는 동일, 이미지는 안 잘리고 여백으로 채움) */
.product-card .product-thumb { aspect-ratio: 1 / 1; overflow: hidden; position: relative; background: #fff; }
.product-card .product-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block; }
/* 영카트 get_it_image 가 감싸는 요소 보정 */
.product-card .product-thumb a { display: block; width: 100%; height: 100%; }
.ww-empty { grid-column: 1 / -1; padding: 48px 0; text-align: center; color: var(--muted); }
.badge-sold { position: absolute; top: 12px; left: 12px; background: rgba(42,34,28,0.85); color:#fff; font-size: 11px; letter-spacing: 0.1em; padding: 5px 10px; text-transform: uppercase; }
/* 장바구니 드로어 "장바구니로 이동"을 로 만들어서 width:100% 가 안 먹던 문제.
블록 처리해 디자인처럼 가로 꽉 차게. */
a.checkout-btn { display: block; box-sizing: border-box; width: 100%; text-align: center; text-decoration: none; }
/* 최근 본 상품 '지우기' 버튼 — 섹션 제목 우측 정렬 */
.search-recent-clear { margin-left: auto; background: transparent; border: 0; cursor: pointer; font-size: 11px; color: var(--muted); letter-spacing: 0.02em; padding: 2px 2px; text-decoration: underline; }
.search-recent-clear:hover { color: var(--ink); }
/* 장바구니 드로어 상품 이미지 1:1 (디자인 기본 80x100 → 정사각) + 여백 없이 채움 */
.cart-item { grid-template-columns: 80px 1fr auto !important; }
.cart-item img { width: 80px !important; height: 80px !important; aspect-ratio: 1 / 1; object-fit: cover !important; background: #fff; }
/* 이미지·이름 클릭 시 상품 상세로 이동 */
.cart-thumb-link { display: block; width: 80px; height: 80px; }
.cart-name-link { text-decoration: none; color: inherit; display: inline-block; }
.cart-name-link:hover .name { text-decoration: underline; }
/* ============== 리뷰 상세 모달 — 단순/안깨지게 ============== */
.review_detail_cnt { background: rgba(0,0,0,0.5) !important; overflow-y: auto; z-index: 100000 !important; }
.review_detail_in {
position: relative !important; top: auto !important; left: auto !important;
margin: 170px auto 6vh !important; /* 헤더 아래로 충분히 내려서 표시 */
width: 92% !important; max-width: 600px !important;
max-height: calc(100vh - 210px); overflow-y: auto;
background: #fff !important; border: 0 !important; border-radius: 0 !important;
padding: 30px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.review_detail_in .rd_cls { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--ink); font-size: 17px; cursor: pointer; z-index: 2; }
.review_detail_in .rd_cls:hover { color: var(--accent); }
/* 상단 상품 요약 */
.rv-modal-head { display: flex; gap: 14px; align-items: center; padding: 0 30px 0 0; border-bottom: 0; margin-bottom: 0; }
.rv-modal-thumb { flex: 0 0 72px; width: 72px; height: 72px; display: block; overflow: hidden; background: #fff; }
.rv-modal-thumb img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.rv-modal-prod { display: block; font-size: 14px; color: var(--ink); text-decoration: none; letter-spacing: -0.2px; }
.rv-modal-prod:hover { text-decoration: underline; }
.rv-modal-stars { color: var(--accent); font-size: 15px; letter-spacing: 2px; margin-top: 5px; }
/* 본문 영역 */
.rv-modal-title { font-family: var(--font-display); font-size: 25px; font-weight: 600; margin: 22px 0 8px; padding-top: 22px; border-top: 1px solid var(--line); line-height: 1.3; letter-spacing: -0.3px; }
.rv-modal-byline { font-size: 13px; color: var(--muted); margin: 0 0 20px; }
.rv-modal-body { font-size: 15px; line-height: 1.8; color: var(--ink); word-break: break-word; }
.rv-modal-body img { max-width: 100% !important; height: auto !important; }
.rv-modal-body .sps_reply { margin-top: 20px; padding: 16px; background: var(--surface); }
.rv-modal-body .is_use_reply { font-size: 15px; margin: 0 0 6px; }
.rv-modal-body .sps_reply_by { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
/* ===========================================================
4단계 — 분류 리스트 페이지 (#sct)
=========================================================== */
/* 리스트 페이지도 전체폭 사용 (기본 테마 #container 1200px 제약 해제) */
#wrapper:has(#sct) { background: #fff; }
#container:has(#sct) { width: 100%; margin: 0; padding: 0; }
#container:has(#sct) .shop-content { padding: 0; }
#sct { max-width: 1320px; margin: 0 auto; padding: 24px 0 80px; min-width: 0; }
/* 브레드크럼 + 카테고리 헤더 */
.ww-crumbs { display: flex; align-items: center; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); flex-wrap: wrap; margin-bottom: 6px; }
.ww-crumbs a { color: var(--muted); }
.ww-crumbs a:hover { color: var(--ink); }
.ww-crumbs .current { color: var(--ink); font-weight: 500; }
.ww-crumbs .sep { color: rgba(42,34,28,0.3); }
/* 상세 페이지: 브레드크럼이 #sit 밖 standalone → 콘텐츠 폭에 맞춰 정렬 */
.ww-crumbs-item { max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: 56px; padding-right: 56px; }
.cat-hero { padding: 16px 0 26px; border-bottom: 1px solid var(--line); }
.cat-title { font-family: var(--font-display); font-size: 40px; font-weight: 500; margin: 0; letter-spacing: -0.01em; line-height: 1.1; }
/* 분류 상단HTML 이미지가 있으면 좌우 100% 풀폭 히어로 배경으로 (세로 중앙 정렬) */
.cat-hero.has-img { position: relative; width: 100vw; margin-left: calc(50% - 50vw); min-height: 420px; height: 420px; background-size: cover; background-position: center; border-bottom: 0; padding: 0; display: flex; align-items: center; overflow: hidden; }
.cat-hero.has-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.3) 100%); }
/* 히어로 텍스트를 1320 중앙 박스에 맞춰 좌측 정렬 (디자인 subhero-content와 동일) */
.cat-hero.has-img .cat-hero-inner { position: relative; z-index: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0; box-sizing: border-box; text-align: left; }
/* 상단HTML 원본 블록은 히어로로 대체하므로 숨김 */
#sct_hhtml { display: none; }
/* 기본 테마의 페이지 제목("Handbag 상품리스트")은 히어로/제목과 중복이라 숨김 */
#container:has(#sct) #wrapper_title { display: none; }
/* 카테고리 리스트 브레드크럼: 기본 스킨 style.css의 우상단 절대위치(#sct_location)를
해제하고 히어로 아래 전체폭으로 정렬 (id 특이성 때문에 #container 스코프로 덮어씀) */
#container:has(#sct) #sct_location {
position: static !important;
float: none !important;
right: auto !important;
top: auto !important;
display: flex;
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: 20px 0;
box-sizing: border-box;
}
/* 관리자 도구 버튼(.sct_admin)은 #sct 앞에 출력돼 히어로를 아래로 밀어냄
→ .shop-content(position:relative) 기준 절대배치로 빼서 흐름에서 제거 */
#container:has(#sct) .sct_admin { position: absolute; top: 10px; right: 16px; z-index: 30; margin: 0; }
/* 히어로가 화면 최상단에 붙도록 #sct 상단 패딩 제거 */
#container:has(#sct) #sct { padding-top: 0; }
/* ── 5개 서브페이지 히어로 메인 텍스트 통일: 흰색 · 좌측 · 세로중앙 · 동일 폰트크기 ── */
/* 카테고리(cat-hero) + 후기/공지(subhero) 공통 */
.cat-hero.has-img .cat-title,
.subhero .subhero-title { color: #fff; font-size: 56px; font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; text-align: left; margin: 0; }
.cat-hero.has-img .cat-hero-kr,
.subhero .subhero-kr { color: #fff; font-size: 20px; margin-top: 14px; text-align: left; letter-spacing: 0.04em; }
/* 후기/공지 subhero: 흰 텍스트 가독성 위해 오버레이를 어둡게 + 세로 중앙(이미 정렬됨) */
.subhero .subhero-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.3) 100%); opacity: 1; }
.subhero img { filter: brightness(0.82) saturate(0.9); }
/* 텍스트 좌우 위치를 카테고리 히어로(56px 인셋)와 동일하게 맞춤 */
.subhero .subhero-content { padding-left: 0; padding-right: 0; }
/* 상단 분류 머리말 */
#sct_hhtml:empty { display: none; }
/* 관련 분류 → 칩 */
#sct_ct_1 { margin: 12px 0 0; }
#sct_ct_1 h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#sct_ct_1 ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
#sct_ct_1 li a { display: inline-block; border: 1px solid var(--line); padding: 7px 14px; font-size: 12px; color: var(--muted); letter-spacing: 0.02em; }
#sct_ct_1 li a:hover { border-color: var(--ink); color: var(--ink); }
/* 정렬 + 뷰 바 — 기본 테마 테두리/배경 제거, 아래 선만 */
#sct_sortlst { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 22px 0 30px; padding: 0 0 16px; border: 0; border-bottom: 1px solid var(--line); background: transparent; width: 100%; box-sizing: border-box; flex-wrap: wrap; }
#sct_sort, #sct_lst { border: 0; background: transparent; margin: 0; padding: 0; float: none; width: auto; }
#sct_sort h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* 뷰 토글을 오른쪽 끝에 정렬 */
#sct_sortlst .view-toggle { margin-left: auto; }
.sort-tabs { display: flex; gap: 22px; flex-wrap: wrap; }
.sort-tabs .sort-tab { font-size: 13px; letter-spacing: 0.02em; color: var(--muted); padding-bottom: 4px; border-bottom: 1px solid transparent; }
.sort-tabs .sort-tab:hover { color: var(--ink); }
.sort-tabs .sort-tab.active { color: var(--ink); border-bottom-color: transparent; font-weight: 600; }
.view-toggle { display: flex; gap: 6px; }
.view-toggle button { width: 34px; height: 34px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.view-toggle button svg { width: 14px; height: 14px; }
.view-toggle button.active { border-color: var(--ink); color: var(--ink); }
/* 상품 그리드 카드 — 리스트/검색/관련상품 공통 (.product-grid 스코프) */
#sct .product-grid, #ssch .product-grid, #sit_rel .product-grid { list-style: none; padding: 0; margin: 0; }
.product-grid .product-card { position: relative; display: flex; flex-direction: column; }
.product-grid .product-meta { position: relative; margin-top: 12px; }
.product-grid .price-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.product-grid .price-sale { font-family: var(--font-display); font-size: 16px; font-weight: 500; }
.product-grid .price-original { font-size: 12px; color: var(--muted); text-decoration: line-through; }
.product-grid .sct_star { margin-top: 6px; }
.product-grid .badge-stack { position: absolute; top: 10px; left: 10px; display: flex; gap: 4px; z-index: 2; }
.product-grid .badge-stack img { height: 18px; width: auto; }
/* 담기 버튼(.add-cta) — hover 시 올라옴 */
.product-grid .add-cta { position: absolute; left: 12px; right: 12px; bottom: -50px; background: var(--ink); color: #fff; border: 0; padding: 11px 0; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: bottom 0.35s ease; z-index: 2; }
.product-grid .product-card:hover .add-cta { bottom: 12px; }
/* 리스트 뷰 */
#sct .product-grid.view-list { grid-template-columns: 1fr; gap: 0; }
#sct .product-grid.view-list .product-card { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center; border-bottom: 1px solid var(--line); padding: 22px 0; }
#sct .product-grid.view-list .product-thumb { width: 200px; aspect-ratio: 1 / 1; }
#sct .product-grid.view-list .product-meta { margin-top: 0; }
#sct .product-grid.view-list .add-cta { position: static; left: auto; right: auto; bottom: auto; width: -moz-fit-content; width: fit-content; margin-top: 14px; padding: 11px 22px; }
/* 페이지네이션 (get_paging 출력) */
.pg_wrap { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 50px 0 0; }
.pg_wrap .pg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.pg_page, .pg_current, .pg_start, .pg_prev, .pg_next, .pg_end { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--line); color: var(--ink); font-size: 13px; }
.pg_current { background: var(--ink); color: #fff; border-color: var(--ink); }
.pg_page:hover, .pg_start:hover, .pg_prev:hover, .pg_next:hover, .pg_end:hover { border-color: var(--ink); }
/* 기타 */
#sct .sct_admin { text-align: right; margin-bottom: 8px; }
#sct .sct_noitem { padding: 60px 0; text-align: center; color: var(--muted); }
#sct_thtml:empty { display: none; }
/* ===========================================================
5단계 — 상품 상세 (#sit) (마크업/JS 보존, CSS만)
=========================================================== */
#wrapper:has(#sit) { background: #fff; }
#container:has(#sit) { width: 100%; margin: 0; padding: 0; }
/* 좌우 숨통은 .shop-content 에, 콘텐츠(#sit)는 1320 꽉 채움 (디자인 product-detail 방식) */
#container:has(#sit) .shop-content { padding: 0; }
#sit { max-width: 1320px; margin: 0 auto; padding: 4px 0 90px; min-width: 0; }
/* 상단 2단: 갤러리 | 구매정보 — 기본 스킨의 width:1200/margin/padding/border 덮어쓰기 */
#sit_ov_wrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: start; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
/* 갤러리 (기본 테마 float/고정폭 제거 → 큰 이미지 꽉 차게)
이 스킨은 큰이미지 =