/* wv-product.css — 상품 카탈로그 위젯 스타일. 전 규칙 .wv-product 스코프(사이트 전역 오염 없음).
   ★재밋 디자인 계약(2026-09-26 개편): 폭·여백·바탕은 놓인 섹션(.zs-plugin-sec)이 정한다 — 위젯 루트는 max-width·바깥 여백·바탕이 없다.
   색은 밴드별 계약 변수(--zc-*, zs-plugin-frame.css)만 쓰고 --wvp-* 는 내부 별칭. 카드 r18 플랫(그림자 없음),
   상품 이미지 4:5·r18·hover 확대 1.08(0.7s), 주 버튼=검정 알약(어두운 면에서는 흰 알약), 입력 48/r10,
   구분선=--zc-line, 가격·품절·할인은 작은 칩, 상태색은 color-mix 옅은 바탕(어두운 면에서는 밝은 톤). */
.wv-product {
  --wvp-accent: var(--zc-form-accent, var(--color-accent, #3B5BDB));
  --wvp-accent-text: var(--zc-btn-ink, #FFFFFF);
  --wvp-text: var(--zc-card-ink, #212529);
  --wvp-muted: var(--zc-sub, rgba(33,37,41,.7));
  /* 구분선(행·표·탭·목록) — 카드 보더(--zc-card-bd)는 어두운 면에서 투명이라 선은 --zc-line 을 쓴다 */
  --wvp-border: var(--zc-line, color-mix(in srgb, currentColor 12%, transparent));
  --wvp-card-bd: var(--zc-card-bd, #DDE1E6);
  --wvp-btn2: var(--zc-btn2-bd, rgba(11,12,13,.16));
  --wvp-soft: var(--zc-soft, rgba(11,12,13,.04));
  --wvp-bg: var(--zc-card-bg, #FFFFFF);
  /* 떠 있는 판(가격대 팝오버) 바탕 — 아래 내용이 비치면 안 되므로 불투명 */
  --wvp-pop-bg: var(--zc-card-bg, #FFFFFF);
  --wvp-danger: #E03131; --wvp-ok: #2B8A3E; --wvp-warn: #C77700;
  color: inherit;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  position: relative;
  box-sizing: border-box;
}
.wv-product *, .wv-product *::before, .wv-product *::after { box-sizing: border-box; }
/* 어두운 면(D·C 밴드) — 상태색은 밝은 톤, 떠 있는 판은 불투명한 어두운 면 */
:is([data-zs-rhythm="D"],[data-zs-rhythm="C"],.zs-band-dark,.zs-band-color,[rhythm-dark]) .wv-product:not([data-zs-surface="fixed"]) {
  --wvp-danger: #FF8787; --wvp-ok: #69DB7C; --wvp-warn: #FFD43B;
}
:is([data-zs-rhythm="D"],.zs-band-dark,[rhythm-dark]:not([data-zs-rhythm="C"]):not(.zs-band-color)) .wv-product:not([data-zs-surface="fixed"]) {
  --wvp-pop-bg: #17181A;
}

/* 공통 */
.wv-product .wv-p-heading { margin: 0 0 14px; font-size: 18px; }
.wv-product .wv-p-loading { padding: 40px 0; text-align: center; color: var(--wvp-muted); }
.wv-product .wv-p-empty { padding: 32px 12px; text-align: center; color: var(--wvp-muted);
  border: 1px dashed var(--wvp-border); border-radius: var(--zc-r-card,18px); margin: 8px 0; }
.wv-product .wv-p-warn { color: var(--wvp-danger); font-size: 12px; }
.wv-product .wv-p-hint { color: var(--wvp-muted); font-size: 12px; }
.wv-product .wv-p-label { color: var(--wvp-muted); font-size: 13px; margin-right: 8px; }
.wv-product .wv-p-inline { display: flex; gap: 8px; flex-wrap: wrap; }

.wv-product .wv-p-btn { display: inline-flex; align-items: center; justify-content: center;
  padding: 0 28px; border: 1px solid var(--wvp-btn2); background: transparent;
  border-radius: var(--zc-r-pill,100px); cursor: pointer; font-size: 15px; font-weight: var(--zc-btn-weight, 600); color: currentColor;
  transition: border-color .3s, background .3s, color .3s, opacity .3s; font-family: var(--zc-btn-font, inherit); text-transform: var(--zc-btn-tt, none); letter-spacing: var(--zc-btn-ls, normal); }
.wv-product .wv-p-btn:hover { background: var(--wvp-soft); }
.wv-product .wv-p-btn:is(.primary,.accent):hover { opacity: .88; background: var(--zc-btn-bg, #0B0C0D); }
.wv-product .wv-p-btn.primary { background: var(--zc-btn-bg, #0B0C0D); border-color: var(--zc-btn-bg, #0B0C0D); color: var(--zc-btn-ink, #FFFFFF); }
.wv-product .wv-p-btn.accent { background: var(--zc-btn-bg, #0B0C0D); border-color: var(--zc-btn-bg, #0B0C0D); color: var(--zc-btn-ink, #FFFFFF); }
.wv-product .wv-p-btn.danger { color: var(--wvp-danger); border-color: color-mix(in srgb, var(--wvp-danger) 40%, transparent); }
.wv-product .wv-p-btn.disabled { opacity: .5; cursor: not-allowed; }
.wv-product .wv-p-btn.block { width: 100%; margin-top: 12px; }
/* display:inline-flex 가 UA 의 [hidden]{display:none} 를 덮어써 hidden 버튼이 노출되던 문제 — 속성 셀렉터로 우선순위 확보. */
.wv-product .wv-p-btn[hidden] { display: none; }
.wv-product .wv-p-linkbtn { background: none; border: none; padding: 4px 6px; cursor: pointer;
  color: currentColor; font-size: 13px; font-weight: 600; text-decoration: none; transition: opacity .3s; }
.wv-product .wv-p-linkbtn:hover { opacity: .7; }
.wv-product .wv-p-linkbtn.danger { color: var(--wvp-danger); }
.wv-product .wv-p-iconbtn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--wvp-btn2); background: transparent; border-radius: 50%; cursor: pointer; font-size: 15px;
  color: currentColor; transition: border-color .3s, background .3s; }
.wv-product .wv-p-iconbtn:hover { background: var(--wvp-soft); }
.wv-product .wv-p-iconbtn svg, .wv-product .wv-p-wishico { display: block; flex: none; }
.wv-product .wv-p-wishico { line-height: 0; }
.wv-product :is(.wv-p-wishbtn,.wv-p-btn.wish).is-active { color: var(--wvp-action, var(--wvp-accent)); }
.wv-product .wv-p-btn.wish { gap: 7px; }
.wv-product .wv-p-input { padding: 0 16px; border: 1px solid var(--zc-in-bd, #DDE1E6); border-radius: var(--zc-r-input,10px);
  font-size: 15px; background: var(--zc-in-bg, #FFFFFF); color: var(--zc-in-ink, #212529); min-width: 0;
  transition: border-color .3s, box-shadow .3s; }
.wv-product .wv-p-input.block { width: 100%; }
.wv-product .wv-p-input.qty { width: 64px; text-align: center; }
.wv-product .wv-p-input.price { width: 92px; }
.wv-product .wv-p-select { padding: 0 16px; border: 1px solid var(--zc-in-bd, #DDE1E6); border-radius: var(--zc-r-input,10px);
  background: var(--zc-in-bg, #FFFFFF); color: var(--zc-in-ink, #212529); font-size: 15px;
  transition: border-color .3s, box-shadow .3s; }
.wv-product .wv-p-select.block { width: 100%; margin: 8px 0; }

/* 토스트 */
.wv-product .wv-p-toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
  background: var(--zc-btn-bg, #0B0C0D); color: var(--zc-btn-ink, #FFFFFF); padding: 10px 18px; border-radius: var(--zc-r-pill,100px);
  font-size: 13px; z-index: 9999; max-width: 86vw; text-align: center; }
/* 오류 토스트는 화면 위에 떠 밴드와 무관하다 — 고정 빨강 면 + 흰 글자 */
.wv-product .wv-p-toast.error { background: #E03131; color: #FFFFFF; }
/* 안내 안의 이동 버튼 — 담은 직후 장바구니로 가는 유일한 길이라 눈에 띄어야 한다. */
.wv-product .wv-p-toast-go { margin-left: 10px; padding: 3px 9px; border-radius: var(--zc-r-pill,999px);
  background: color-mix(in srgb, currentColor 18%, transparent); color: inherit; text-decoration: none; font-weight: 600; white-space: nowrap; }
.wv-product .wv-p-toast-go:hover { background: color-mix(in srgb, currentColor 28%, transparent); }

/* 툴바(필터) — 1행 분류 칩·가격대·검색 / 2행 정렬·보기 옵션 */
.wv-product .wv-p-toolbar { margin-bottom: 16px; border-top: 1px solid currentColor; }
.wv-product .wv-p-filterrow { padding: 12px 0; }
.wv-product .wv-p-filtermain { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wv-product .wv-p-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.wv-product .wv-p-subchips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px;
  padding-top: 10px; border-top: 1px dashed var(--wvp-border); }
.wv-product .wv-p-chip { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 15px;
  border: 1px solid var(--wvp-btn2); border-radius: var(--zc-r-pill,100px); background: transparent; color: inherit;
  font-size: 14px; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: border-color .3s, background .3s, color .3s; }
.wv-product .wv-p-chip:hover { border-color: var(--zc-in-bd-hover, #C5CAD1); }
.wv-product .wv-p-chip.on { background: var(--zc-btn-bg, #0B0C0D); border-color: var(--zc-btn-bg, #0B0C0D);
  color: var(--zc-btn-ink, #FFFFFF); font-weight: 600; }
.wv-product .wv-p-chip.sub { height: 30px; padding: 0 12px; font-size: 13px; border-color: transparent;
  background: var(--zc-chip-bg, rgba(11,12,13,0.04)); }
.wv-product .wv-p-chip.sub.on { background: var(--zc-btn-bg, #0B0C0D); color: var(--zc-btn-ink, #FFFFFF); }

/* 가격대 드롭다운 */
/* 편집 캔버스는 body.editing, body.editing * { overflow:hidden } 전역 규칙으로 모든 요소를 클리핑한다 —
   부모 경계를 벗어나 여는 팝오버(가격대 패널)가 잘려 보이므로 경로상 조상을 명시적으로 풀어준다. */
.wv-product .wv-p-toolbar,
.wv-product .wv-p-filterrow,
.wv-product .wv-p-filtermain,
.wv-product .wv-p-chips,
.wv-product .wv-p-drop { overflow: visible; }
.wv-product .wv-p-drop { position: relative; }
.wv-product .wv-p-chip.drop svg { transition: transform .3s; opacity: .6; }
.wv-product .wv-p-chip.drop.on svg { opacity: 1; }
.wv-product .wv-p-drop.open .wv-p-chip.drop svg { transform: rotate(180deg); }
.wv-product .wv-p-droppanel { display: none; position: absolute; z-index: 20; top: calc(100% + 8px); left: 0;
  min-width: min(280px, calc(100vw - 32px)); box-sizing: border-box;
  padding: 16px; border: 1px solid var(--wvp-border); border-radius: var(--zc-r-compact,14px); background: var(--wvp-pop-bg); color: inherit; }
.wv-product .wv-p-drop.open .wv-p-droppanel { display: block; }
.wv-product .wv-p-dropacts { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.wv-product .wv-p-pricefilter { display: inline-flex; align-items: center; gap: 6px; }
.wv-product .wv-p-tilde { color: var(--wvp-muted); }

/* 검색 */
.wv-product .wv-p-search { display: flex; align-items: center; height: 34px; margin-left: auto; padding: 0 4px 0 14px;
  border: 1px solid var(--zc-in-bd, #DDE1E6); border-radius: var(--zc-r-pill,100px); background: var(--zc-in-bg, #FFFFFF); }
.wv-product .wv-p-search:focus-within { border-color: var(--wvp-form); }
.wv-product .wv-p-searchinput { width: 150px; height: 32px; border: 0; background: transparent; outline: 0;
  font-size: 14px; color: var(--zc-in-ink, #212529); }
.wv-product .wv-p-searchinput::placeholder { color: var(--zc-ph, #868E96); opacity: 1; }
.wv-product .wv-p-searchbtn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background .3s; }
.wv-product .wv-p-searchbtn:hover { background: var(--zc-chip-bg, rgba(11,12,13,0.04)); }

/* 정렬 줄 */
.wv-product .wv-p-sortrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 0; border-top: 1px solid var(--wvp-border); }
.wv-product .wv-p-sorts { display: flex; align-items: center; flex-wrap: wrap; min-width: 0; }
.wv-product .wv-p-sort { display: inline-flex; align-items: center; gap: 3px; padding: 4px 10px;
  border: 0; background: none; font-size: 14px; line-height: 1.4; color: var(--wvp-muted); cursor: pointer;
  transition: color .3s; }
.wv-product .wv-p-sort:hover { color: inherit; }
.wv-product .wv-p-sort.on { color: inherit; font-weight: 700; }
.wv-product .wv-p-sort:not(.on) svg { display: none; }
.wv-product .wv-p-sortsep { width: 1px; height: 11px; background: var(--wvp-border); }
.wv-product .wv-p-viewopts { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.wv-product .wv-p-count { font-size: 13px; color: var(--wvp-muted); white-space: nowrap; }
.wv-product .wv-p-perpage { height: 32px; padding: 0 4px; border: 0; background: transparent; color: inherit;
  font-size: 13px; cursor: pointer; }
.wv-product .wv-p-viewmode { display: flex; gap: 2px; }
.wv-product .wv-p-viewbtn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--zc-r-input,8px); background: transparent; color: var(--wvp-muted); cursor: pointer;
  transition: background .3s, color .3s; }
.wv-product .wv-p-viewbtn:hover { background: var(--wvp-soft); color: inherit; }
.wv-product .wv-p-viewbtn.on { background: var(--zc-btn-bg, #0B0C0D); color: var(--zc-btn-ink, #FFFFFF); }

/* 상품 그리드 */
.wv-product .wv-p-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.wv-product .wv-p-grid.as-list { grid-template-columns: 1fr; gap: 0; }
.wv-product .wv-p-grid.as-list .wv-p-card { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto;
  align-items: center; gap: 20px; padding: 16px 6px; border-width: 0 0 1px; border-radius: 0; }
.wv-product .wv-p-grid.as-list .wv-p-card { border-color: var(--wvp-border); background: transparent; color: inherit; }
.wv-product .wv-p-grid.as-list .wv-p-card:hover { background: var(--wvp-soft); }
.wv-product .wv-p-grid.as-list .wv-p-thumb { border-radius: var(--zc-r-compact,14px); }
.wv-product .wv-p-grid.as-list .wv-p-card-body { padding: 0; }
.wv-product .wv-p-grid.as-list .wv-p-name { -webkit-line-clamp: 1; }
.wv-product .wv-p-grid.as-list .wv-p-card-actions { padding: 0; }
/* 목록 카드 — r18 플랫(밝은 면=흰+보더, 어두운 면=흰 5%·보더 없음), 그림자·들뜸 없음. hover 는 이미지 확대로만. */
.wv-product .wv-p-card { border: 1px solid var(--wvp-card-bd); border-radius: var(--zc-r-card,18px); overflow: hidden; box-shadow: var(--zc-card-shadow, none);
  cursor: pointer; background: var(--wvp-bg); color: var(--wvp-text); transition: border-color .3s, background .3s; position: relative; }
.wv-product .wv-p-detail-link { position: absolute; inset: 0; z-index: 1; display: block; border-radius: inherit; }
.wv-product .wv-p-scard > .wv-p-detail-link { border-radius: var(--zc-r-card,18px); }
.wv-product .wv-p-detail-link:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--wvp-form, var(--wvp-accent)); }
.wv-product .wv-p-thumb { position: relative; aspect-ratio: 4 / 5; background: var(--zc-chip-bg, rgba(11,12,13,0.04)); overflow: hidden; border-radius: 0; }
.wv-product .wv-p-thumb img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.22,1,.36,1); }
@media (hover: hover) { .wv-product .wv-p-grid:not(.as-list) .wv-p-card:hover .wv-p-thumb img { transform: scale(1.08); } }
.wv-product .wv-p-noimg { display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--zc-ter, rgba(33,37,41,.4)); font-size: 13px; min-height: 120px; }
/* 사진 없는 상품 카드 — 강조색을 옅게 깐 바탕 + 상품 이름(wv-product.js noImageTile). 시안 샘플은 늘 이 모양으로 시작한다. */
.wv-product .wv-p-noimg.is-named { padding: 18px; box-sizing: border-box; text-align: center; container-type: inline-size;
  background: color-mix(in srgb, var(--zc-accent, var(--color-accent, #3B5BDB)) 9%, transparent); }
.wv-product .wv-p-noimg-name { font-size: clamp(15px, 1.4vw, 19px); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em;
  word-break: keep-all; color: color-mix(in srgb, var(--zc-accent, var(--color-accent, #3B5BDB)) 72%, currentColor); }
/* 시안 샘플 표시 — 사이트가 되면 실제 상품으로 바뀐다는 뜻. 사진·품절 칩과 겹치지 않게 아래 왼쪽. */
.wv-product .wv-p-sample-badge { position: absolute; left: 10px; bottom: 10px; z-index: 1; height: 22px; padding: 0 8px;
  display: inline-flex; align-items: center; border-radius: 6px; background: rgba(11,12,13,.62); color: #FFFFFF;
  font-size: 12px; font-weight: 600; letter-spacing: .02em; pointer-events: none; }
/* 휴대폰 가로 레일처럼 작은 카드는 이름이 몇 글자씩 꺾여 버튼에 덮인다 — 색 바탕만 남긴다(이름은 카드 아래에 이미 있다) */
@container (max-width: 130px) { .wv-product .wv-p-noimg.is-named .wv-p-noimg-name { display: none; } }
/* 진열 카드는 아래에 찜·장바구니 버튼이 깔린다(휴대폰은 늘 보임) — 위 오른쪽으로 비킨다(위 왼쪽은 품절 칩) */
.wv-product .wv-p-sthumb .wv-p-sample-badge { top: 10px; right: 10px; bottom: auto; left: auto; }
/* 품절 칩 — 사진 위에 얹히므로 밴드와 무관한 고정 검정 칩(작은 알약 26px) */
.wv-product .wv-p-badge-soldout { position: absolute; top: 12px; left: 12px; z-index: 1; display: inline-flex; align-items: center;
  height: 26px; padding: 0 10px; border-radius: var(--zc-r-pill,100px); background: rgba(11,12,13,.82); color: #FFFFFF;
  font-size: 13px; font-weight: 600; line-height: 1; }
.wv-product .wv-p-card.soldout .wv-p-thumb img { filter: grayscale(.7); opacity: .75; }
.wv-product .wv-p-card-body { padding: 12px 14px 6px; }
.wv-product .wv-p-name { font-family: var(--zc-head-font, inherit); font-weight: var(--zc-head-weight, 600); letter-spacing: var(--zc-head-ls, normal); overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wv-product .wv-p-summary { color: var(--wvp-muted); font-size: 12px; margin-top: 2px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.wv-product .wv-p-price-row { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; row-gap: 2px; margin-top: 6px; }
.wv-product .wv-p-price-row :is(.wv-p-price, .wv-p-retail) { white-space: nowrap; }
.wv-product .wv-p-price-row.big { font-size: 18px; margin: 10px 0; }
.wv-product .wv-p-price { color: inherit; font-family: var(--zc-num-font, inherit); font-weight: var(--zc-num-weight, 600); }
.wv-product .wv-p-retail { color: var(--zc-ter, rgba(33,37,41,.4)); font-size: 12px; text-decoration: line-through; }
.wv-product .wv-p-rating { color: var(--wvp-muted); font-size: 12px; margin-top: 4px; }
.wv-product .wv-p-card-actions { position: relative; z-index: 2; display: flex; gap: 6px; padding: 8px 14px 12px; }
/* 갤러리 카드는 높이가 같게 늘어나므로, 후기 줄 유무와 무관하게 위시(액션) 행을 하단에 고정해 정렬을 맞춘다.
   가격 줄도 같은 이유로 본문 바닥에 붙인다 — 요약·후기 유무로 가격이 카드마다 오르내리면
   한 줄에 놓인 카드들의 가격이 어긋나 보인다. 요약 자리를 2줄로 고정하는 것은 같은 문제의
   다른 면이다(설명 길이가 제각각이라 그 아래가 통째로 밀린다). 전역 요약 규칙은 진열·레일·상세가
   함께 쓰므로 갤러리 카드 안으로만 범위를 좁힌다. */
.wv-product .wv-p-grid:not(.as-list) .wv-p-card { display: flex; flex-direction: column; }
.wv-product .wv-p-grid:not(.as-list) .wv-p-card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.wv-product .wv-p-grid:not(.as-list) .wv-p-summary { white-space: normal; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.5; min-height: 3em; }
.wv-product .wv-p-grid:not(.as-list) .wv-p-price-row { margin-top: auto; padding-top: 6px; }
.wv-product .wv-p-grid:not(.as-list) .wv-p-card-actions { margin-top: auto; }
/* 가로 목록 보기는 세로 가운데 정렬이라 예약된 빈 자리가 오히려 줄 높이를 밀어올린다. */
.wv-product .wv-p-grid.as-list .wv-p-summary:empty { display: none; }

/* 진열(showcase) — 메인 노출용. 목록 카드와 달리 보더 없는 플랫 카드로, 이미지와 상품명이 주역이다.
   단수(data-cols)는 데스크톱 기준이고 태블릿·모바일에서 자동으로 줄어든다. */
.wv-product .wv-p-showcase { display: block; }
/* 진열 머리 = 재밋 섹션 머리 규격(H2 30/40·700·lh1.22 → 16 → 설명 17/1.6·max 720). 정렬은 블록 설정(data-align). */
.wv-product .wv-p-shead { margin: 0 0 40px; text-align: center; }
.wv-product .wv-p-showcase.as-left .wv-p-shead { text-align: left; }
.wv-product .wv-p-stitle { font-family: var(--zc-title-font, inherit); text-transform: var(--zc-title-tt, none); margin: 0; font-size: var(--zc-title-fs, 30px); font-weight: var(--zc-title-weight, 700); line-height: var(--zc-title-lh, 1.22); letter-spacing: var(--zc-title-ls, -.02em); color: var(--zc-title-color, inherit); }
.wv-product .wv-p-ssub { margin: 16px 0 0; max-width: 720px; font-size: 17px; line-height: 1.6; color: var(--wvp-muted); }
.wv-product .wv-p-showcase:not(.as-left) .wv-p-ssub { margin-left: auto; margin-right: auto; }

.wv-product .wv-p-sgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
.wv-product .wv-p-sgrid[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }

.wv-product .wv-p-scard { position: relative; display: flex; flex-direction: column; cursor: pointer;
  color: inherit; background: transparent; border: 0; }
.wv-product .wv-p-srank { margin-bottom: 12px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: inherit; }
.wv-product .wv-p-sthumb { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--zc-r-card,18px);
  background: var(--zc-chip-bg, rgba(11,12,13,0.04)); }
.wv-product .wv-p-sthumb img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.22,1,.36,1); }
.wv-product .wv-p-scard.soldout .wv-p-sthumb img { filter: grayscale(.7); opacity: .75; }
/* 위시·장바구니는 이미지 위에 겹쳐 둔다 — 카드 클릭(상세 이동)을 가리지 않도록 hover 에서만 나타난다. */
.wv-product .wv-p-sactions { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 8px;
  z-index: 2; justify-content: center; padding: 14px; opacity: 0; transform: translateY(6px);
  transition: opacity .3s, transform .3s; }
/* 사진 위 버튼 — 밴드와 무관하게 흰 원(고정 표면) */
.wv-product .wv-p-sactions .wv-p-iconbtn { background: #FFFFFF; color: #0B0C0D; border-color: transparent; }
.wv-product .wv-p-scard:focus-within .wv-p-sactions { opacity: 1; transform: none; }
@media (hover: hover) {
  .wv-product .wv-p-scard:hover .wv-p-sthumb img { transform: scale(1.08); }
  .wv-product .wv-p-scard:hover .wv-p-sactions { opacity: 1; transform: none; }
}
@media (hover: none) { .wv-product .wv-p-sactions { opacity: 1; transform: none; } }
.wv-product .wv-p-scard-body { padding: 14px 2px 0; }
.wv-product .wv-p-scard-body .wv-p-name { font-size: 16px; font-weight: var(--zc-head-weight, 600); line-height: 1.5; }
.wv-product .wv-p-scard-body .wv-p-price-row { margin-top: 8px; }
.wv-product .wv-p-scard-body .wv-p-price { font-weight: var(--zc-num-weight, 700); }

.wv-product .wv-p-smore-host { display: flex; justify-content: center; padding-top: 36px; }
.wv-product .wv-p-smore { height: 52px; min-width: 260px; }
.wv-product .wv-p-smore:hover { background: var(--wvp-soft); }
.wv-product .wv-p-smore[disabled] { opacity: .5; cursor: default; }

@media (min-width: 768px) {
  .wv-product .wv-p-sgrid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wv-product .wv-p-sgrid[data-cols="4"],
  .wv-product .wv-p-sgrid[data-cols="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .wv-product .wv-p-shead { margin-bottom: 56px; }
  
  .wv-product .wv-p-sgrid { gap: 40px 24px; }
  .wv-product .wv-p-sgrid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wv-product .wv-p-sgrid[data-cols="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .wv-product .wv-p-scard-body .wv-p-name { font-size: 17px; }
}

/* 가로 상품 레일(rail) — 데스크톱 5개 기본, 모바일은 항상 3개가 보인다. */
.wv-product .wv-p-rhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.wv-product .wv-p-rhead .wv-p-shead { flex: 1 1 auto; min-width: 0; margin: 0; }
.wv-product .wv-p-rcontrols { flex: none; display: flex; gap: 8px; }
.wv-product .wv-p-rarrow { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid var(--wvp-btn2); border-radius: 50%; background: transparent; color: inherit;
  cursor: pointer; transition: border-color .3s, background .3s, opacity .3s; }
.wv-product .wv-p-rarrow:hover:not(:disabled) { background: var(--wvp-soft); }
.wv-product .wv-p-rarrow:disabled { opacity: .3; cursor: default; }
.wv-product .wv-p-rtrack { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 24px) / 3); gap: 12px;
  width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; padding: 4px 3px 8px;
  cursor: grab; scroll-snap-type: x mandatory; scroll-padding-left: 3px; scrollbar-width: none;
  overscroll-behavior-x: contain; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
.wv-product .wv-p-rtrack::-webkit-scrollbar { display: none; }
.wv-product .wv-p-rtrack.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.wv-product .wv-p-rtrack > .wv-p-scard { min-width: 0; scroll-snap-align: start; }
.wv-product .wv-p-rtrack.is-status { display: block; cursor: default; }
.wv-product .wv-p-rtrack.is-status > :first-child { width: 100%; }
.wv-product .wv-p-rprogress { position: relative; height: 3px; margin-top: 24px; overflow: hidden;
  background: var(--wvp-border); }
.wv-product .wv-p-rprogress-thumb { position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  background: currentColor; transition: left .2s ease, width .2s ease; }

@media (min-width: 768px) {
  .wv-product .wv-p-rtrack { grid-auto-columns: calc((100% - 36px) / 3); gap: 18px; }
}
@media (min-width: 992px) {
  .wv-product .wv-p-rhead { margin-bottom: 56px; }
  .wv-product .wv-p-rtrack { gap: 24px; }
  .wv-product .wv-p-rtrack[data-cols="1"] { grid-auto-columns: 100%; }
  .wv-product .wv-p-rtrack[data-cols="2"] { grid-auto-columns: calc((100% - 24px) / 2); }
  .wv-product .wv-p-rtrack[data-cols="3"] { grid-auto-columns: calc((100% - 48px) / 3); }
  .wv-product .wv-p-rtrack[data-cols="4"] { grid-auto-columns: calc((100% - 72px) / 4); }
  .wv-product .wv-p-rtrack[data-cols="5"] { grid-auto-columns: calc((100% - 96px) / 5); }
}

/* 좁은 화면의 레일 머리 — 제목(30px)이 화살표와 한 줄에서 끼지 않게 제목 아래로 화살표를 내린다 */
@media (max-width: 767px) {
  .wv-product .wv-p-rhead { flex-direction: column; align-items: stretch; gap: 20px; }
  .wv-product .wv-p-rcontrols { align-self: flex-end; }
}
@media (max-width: 520px) {
  .wv-product .wv-p-rhead { gap: 16px; margin-bottom: 24px; }
  .wv-product .wv-p-rtrack .wv-p-sactions { gap: 2px; padding: 2px; }
  .wv-product .wv-p-rtrack .wv-p-iconbtn { width: 40px; height: 40px; }
  .wv-product .wv-p-rtrack .wv-p-scard-body { padding-top: 10px; }
  .wv-product .wv-p-rtrack .wv-p-summary { display: none; }
}

.wv-product .wv-p-rhead:not(:has(.wv-p-shead)) { flex-direction: row; justify-content: flex-end; gap: 0; margin-bottom: 12px; }

/* 페이징 */
.wv-product .wv-p-paging { display: flex; gap: 4px; justify-content: center; margin: 18px 0 6px; }
.wv-product .wv-p-page { min-width: 32px; height: 32px; border: none; background: transparent;
  border-radius: 50%; cursor: pointer; font-size: 13px; color: inherit; transition: background .3s; }
.wv-product .wv-p-page:hover { background: var(--wvp-soft); }
.wv-product .wv-p-page.active { background: var(--zc-btn-bg, #0B0C0D); color: var(--zc-btn-ink, #FFFFFF); cursor: default; }
.wv-product .wv-p-page:disabled { opacity: .4; cursor: not-allowed; }

/* 상세 */
.wv-product .wv-p-detail-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 28px; margin-top: 8px; }
.wv-product .wv-p-gallery-main { aspect-ratio: 1 / 1; position: relative; background: var(--zc-chip-bg, rgba(11,12,13,0.04)); border-radius: var(--zc-r-card,18px); overflow: hidden; }
.wv-product .wv-p-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 이미지가 없을 때만 정사각 비율을 풀고 우측 정보 칸 높이에 맞춘다 — 빈 상자가 화면을 다 먹어
   상세설명·후기 탭이 첫 화면 밖으로 밀리던 것을 막는다(2026-08-20 QA ISSUE 24). 표식(is-noimg)은 JS 가 붙인다.
   전역 .wv-p-noimg 는 목록·진열 카드도 함께 쓰므로 건드리지 않는다 — 그쪽은 이 문제의 범위가 아니다. */
.wv-product .wv-p-gallery.is-noimg { display: flex; flex-direction: column; }
.wv-product .wv-p-gallery-main.is-noimg { aspect-ratio: auto; flex: 1 1 auto; }
.wv-product .wv-p-gallery-main.is-noimg .wv-p-noimg { font-size: 12px; opacity: .55; }
/* 시안 샘플 상세만: 사진 자리에 상품 이름이 든 색 칸을 정사각으로 둔다(사이트가 되면 실제 사진이 들어갈 자리).
   표식(is-sample)은 JS 가 시안 마운트에서만 그릴 때 붙인다 — 사이트 상세는 위 ISSUE 24 규칙 그대로다. */
.wv-product .wv-p-gallery.is-noimg.is-sample { display: block; }
.wv-product .wv-p-gallery.is-sample .wv-p-gallery-main.is-noimg { aspect-ratio: 1 / 1; background: transparent; }
.wv-product .wv-p-gallery.is-sample .wv-p-gallery-main.is-noimg .wv-p-noimg { font-size: 13px; opacity: 1; }
.wv-product .wv-p-gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.wv-product .wv-p-gallery-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--zc-r-compact,12px);
  cursor: pointer; border: 1px solid var(--wvp-border); transition: border-color .3s; }
.wv-product .wv-p-gallery-thumbs img:hover { border-color: currentColor; }
.wv-product .wv-p-detail-name { margin: 0 0 6px; font-size: 20px; }
.wv-product .wv-p-option-list { margin: 8px 0; padding-left: 18px; color: var(--wvp-muted); font-size: 13px; }
.wv-product .wv-p-qty-row { display: flex; align-items: center; gap: 6px; margin: 12px 0; }
.wv-product .wv-p-total-row { display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--wvp-border); padding-top: 12px; margin-top: 8px; font-size: 17px; }
.wv-product .wv-p-btn-row { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.wv-product .wv-p-btn-row .wv-p-btn { flex: 1 1 auto; }
/* 주문 기능 없을 때: 안내문구를 전체폭으로 두어 위시 버튼이 그 아래 자기 줄로 내려가게(카탈로그 전용 상태 정리). */
.wv-product .wv-p-btn-row .wv-p-hint { flex: 1 1 100%; }

/* ── 구매 패널 — 스마트스토어형 레이아웃 ── */
.wv-product .wv-p-ratingline { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px; font-size: 13px; }
.wv-product .wv-p-stars { color: var(--wvp-warn); letter-spacing: 1px; }
.wv-product .wv-p-rating-num { font-weight: 700; color: inherit; }
.wv-product .wv-p-reviewlink { padding: 0; background: none; border: 0; color: var(--wvp-muted); font-size: 13px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.wv-product .wv-p-reviewlink:hover { color: inherit; }
.wv-product .wv-p-priceblock { margin: 6px 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--wvp-border); }
.wv-product .wv-p-priceblock .wv-p-retail { display: block; margin-bottom: 2px; font-size: 13px; }
.wv-product .wv-p-priceline { display: flex; align-items: baseline; gap: 8px; }
.wv-product .wv-p-priceline .wv-p-price { font-size: 26px; font-weight: var(--zc-num-weight, 800); letter-spacing: -.02em; }
/* 할인율 — 작은 칩(옅은 빨강 바탕 + 빨강 글자) */
.wv-product .wv-p-discount { display: inline-flex; align-items: center; align-self: center; height: 28px; padding: 0 10px; border-radius: var(--zc-r-pill,100px);
  font-size: 14px; font-weight: 700; letter-spacing: 0; background: color-mix(in srgb, var(--wvp-danger) 14%, transparent); color: var(--wvp-danger); }
/* 옵션 선택 */
.wv-product .wv-p-optfield { margin: 4px 0 12px; }
.wv-product .wv-p-optlabel { margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.wv-product .wv-p-optreq { color: var(--wvp-danger); font-style: normal; }
/* 선택 품목 카드 */
.wv-product .wv-p-lines { display: flex; flex-direction: column; gap: 8px; }
/* 선택 품목 — 옅은 면 하나(보더 없음), 작은 판 r14 */
.wv-product .wv-p-line { padding: 16px 18px; border: 0; border-radius: var(--zc-r-compact,14px); background: var(--wvp-soft); }
.wv-product .wv-p-line-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: 14px; }
.wv-product .wv-p-line-name { min-width: 0; overflow-wrap: anywhere; }
.wv-product .wv-p-line-x { flex: none; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: var(--wvp-muted); font-size: 18px; line-height: 1; cursor: pointer; }
.wv-product .wv-p-line-x:hover { color: inherit; }
.wv-product .wv-p-line-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wv-product .wv-p-stepper { display: inline-flex; align-items: center; border: 1px solid var(--zc-in-bd, #DDE1E6); border-radius: var(--zc-r-input,10px); overflow: hidden; background: var(--zc-in-bg, #FFFFFF); color: var(--zc-in-ink, inherit); }
.wv-product .wv-p-step { width: 38px; height: 38px; border: 0; background: none; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; transition: background .3s; }
.wv-product .wv-p-step:hover { background: var(--wvp-soft); }
.wv-product .wv-p-step-input { width: 44px; height: 38px; border: 0; border-left: 1px solid var(--zc-in-bd, #DDE1E6); border-right: 1px solid var(--zc-in-bd, #DDE1E6); text-align: center; font-size: 14px; background: transparent; color: inherit; }
.wv-product .wv-p-line-price { font-size: 15px; font-weight: 700; }
/* 상한·잔여 재고 안내 — 수량 줄 바로 아래. 담기를 누르기 전에 보여야 의미가 있다. */
.wv-product .wv-p-stockhint { margin-top: 8px; font-size: 12px; color: var(--wvp-muted); }
.wv-product .wv-p-step:disabled { opacity: .4; cursor: default; }
/* 합계 */
.wv-product .wv-p-total-cnt { flex: 1 1 auto; color: var(--wvp-muted); font-size: 13px; }
.wv-product .wv-p-total-cnt b { color: inherit; font-weight: 700; }
.wv-product .wv-p-total-label { margin-right: 8px; color: var(--wvp-muted); font-size: 13px; }
.wv-product .wv-p-total-row .wv-p-price { font-size: 20px; font-weight: 800; }
/* 적립·혜택·배송 — 데이터 없음(hidden 자리) */
.wv-product .wv-p-benefit { margin: 4px 0 14px; padding: 14px 16px; border: 1px solid var(--wvp-border); border-radius: var(--zc-r-compact,14px); }
.wv-product .wv-p-benefit-row { display: flex; gap: 12px; font-size: 13px; color: var(--wvp-muted); }
.wv-product .wv-p-benefit-row + .wv-p-benefit-row { margin-top: 6px; }
.wv-product .wv-p-benefit-key { flex: none; width: 40px; }
/* 액션 버튼 — 구매하기(전폭) / 장바구니·찜(2열) */
.wv-product .wv-p-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.wv-product .wv-p-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wv-product .wv-p-actions-row > :only-child { grid-column: 1 / -1; }
.wv-product .wv-p-actions .wv-p-btn.buy { width: 100%; }
.wv-product .wv-p-actions .wv-p-hint { text-align: center; }

/* 탭 */
.wv-product .wv-p-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--wvp-border); margin-top: 28px; }
.wv-product .wv-p-tab { padding: 11px 18px; background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; cursor: pointer; font-size: 14px; color: var(--wvp-muted); transition: color .3s, border-color .3s; }
.wv-product .wv-p-tab.active { color: inherit; font-weight: 600; border-bottom-color: currentColor; }
.wv-product .wv-p-tab-body { padding: 20px 4px; }
.wv-product .wv-p-desc img { max-width: 100%; height: auto; }
.wv-product .wv-p-info-table { width: 100%; border-collapse: collapse; }
.wv-product .wv-p-info-table th { width: 140px; text-align: left; padding: 14px 16px; background: var(--wvp-soft);
  border: 1px solid var(--wvp-border); font-weight: 600; font-size: 13px; color: var(--wvp-muted); }
.wv-product .wv-p-info-table td { padding: 14px 16px; border: 1px solid var(--wvp-border); }
.wv-product .wv-p-info-table .wv-p-catlink { padding: 0; font: inherit; text-decoration: underline; }

/* 후기 */
.wv-product .wv-p-review { position: relative; border-bottom: 1px solid var(--wvp-border); padding: 14px 2px; }
.wv-product .wv-p-review > .wv-p-linkbtn.danger { position: absolute; top: 12px; right: 2px; }
.wv-product .wv-p-review-head { display: flex; gap: 10px; align-items: baseline; padding-right: 44px; }
.wv-product .wv-p-review-stars { color: var(--wvp-warn); }
.wv-product .wv-p-review-author { font-weight: 600; font-size: 13px; }
.wv-product .wv-p-review-date { color: var(--wvp-muted); font-size: 12px; }
.wv-product .wv-p-review-title { font-weight: 600; margin-top: 6px; }
.wv-product .wv-p-review-body { margin-top: 6px; }
.wv-product .wv-p-review-img { max-width: 120px; border-radius: var(--zc-r-compact,12px); margin: 8px 8px 0 0; }
.wv-product .wv-p-review-reply { background: var(--wvp-soft); border-radius: var(--zc-r-compact,12px); padding: 12px 14px; margin-top: 10px; font-size: 14px; }
.wv-product .wv-p-review-reply p { margin: 4px 0 0; }
.wv-product .wv-p-review-form { margin-top: 18px; display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--wvp-card-bd); border-radius: var(--zc-r-card,18px); padding: 16px; background: var(--wvp-bg); color: var(--zc-card-ink, inherit); }
.wv-product .wv-p-review-form h4 { margin: 0 0 4px; }
.wv-product .wv-p-review-form textarea.wv-p-input { height: 120px; min-height: 120px; padding: 14px 16px; resize: none; }

/* 위시리스트(장바구니 담기와 동일한 행 UI 재사용) */
.wv-product .wv-p-cart-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px;
  border-bottom: 1px solid var(--wvp-border); flex-wrap: wrap; transition: background .3s; }
.wv-product .wv-p-cart-row:hover { background: var(--wvp-soft); }
.wv-product .wv-p-cart-row.unavailable { opacity: .6; }
.wv-product .wv-p-cart-thumb { width: 76px; height: 76px; object-fit: cover; border-radius: var(--zc-r-compact,14px); flex: none; }
.wv-product .wv-p-cart-thumb { position: relative; overflow: hidden; }
.wv-product .wv-p-cart-thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wv-product .wv-p-cart-thumb-empty { background: var(--wvp-soft); }
.wv-product .wv-p-cart-thumb .wv-p-noimg { min-height: 0; padding: 6px; }
.wv-product .wv-p-cart-thumb .wv-p-sample-badge { left: 50%; bottom: 6px; transform: translateX(-50%); height: 20px; padding: 0 6px; font-size: 12px; }
.wv-product .wv-p-wish-guestnote { margin-bottom: 14px; }
.wv-product .wv-p-cart-info { flex: 1 1 160px; min-width: 0; }
.wv-product .wv-p-option { color: var(--wvp-muted); font-size: 12px; }

/* 반응형 */
@media (max-width: 720px) {
  /* minmax(0,…) — 한 줄 말줄임 요약(nowrap)의 최소폭이 칸을 화면 밖으로 밀지 않게(390 실측 가로 넘침) */
  .wv-product .wv-p-detail-top { grid-template-columns: minmax(0, 1fr); }
  .wv-product .wv-p-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  /* 세로로 쌓이면 빈 이미지 자리가 맨 위를 차지한다 — 아예 띄우지 않는다(시안 샘플 상세는 위 is-sample 규칙이 이긴다). */
  .wv-product .wv-p-gallery.is-noimg { display: none; }
}

/* zaemit 사용자 화면 공통 리듬 */
.wv-product {
  --wvp-action: var(--zc-btn-bg, #0B0C0D);
  --wvp-form: var(--zc-form-accent, var(--color-accent, #3B5BDB));
  /* 폭·여백 = 놓인 섹션 몫(재밋 계약 2026-09-26) — 바깥 padding 없음 */
    margin: 0 auto; padding: 0;
  font-size: 15px; line-height: 1.65; letter-spacing: -.006em;
}
/* 지면 폭 소유권(2026-08-05): 마운트는 호스트 컨테이너 안 — 폭·거터는 호스트 소관(정본 설명은 wv-board.css).
   rail 리셋은 구판 rail 셀렉터가 특이도로 base 를 이기고 살아남지 않게 하는 명시 선언. */
.wv-product[data-product-view="rail"] { max-width: none; padding-left: 0; padding-right: 0; }
/* 위젯 제목(찜 목록) = 재밋 섹션 머리 규격. 전용 페이지(data-zs-head="host")에서는 JS 가 그리지 않는다. */
.wv-product .wv-p-heading { font-family: var(--zc-title-font, inherit); text-transform: var(--zc-title-tt, none); margin: 0 0 32px; font-size: var(--zc-title-fs, 30px); font-weight: var(--zc-title-weight, 700); line-height: var(--zc-title-lh, 1.22); letter-spacing: var(--zc-title-ls, -.02em); color: var(--zc-title-color, inherit); }
@media (min-width: 992px) { .wv-product .wv-p-heading { margin-bottom: 40px; } }
.wv-product .wv-p-btn { height: 48px; min-height: 48px; padding: 0 28px; border-radius: var(--zc-r-pill,100px); font-size: 15px; line-height: 1.4; font-weight: var(--zc-btn-weight, 600); font-family: var(--zc-btn-font, inherit); text-transform: var(--zc-btn-tt, none); letter-spacing: var(--zc-btn-ls, normal); }
.wv-product .wv-p-btn.primary, .wv-product .wv-p-btn.accent { background: var(--wvp-action); border-color: var(--wvp-action); color: var(--zc-btn-ink, #FFFFFF); }
.wv-product .wv-p-input, .wv-product .wv-p-select { height: 48px; min-height: 48px; padding: 0 16px; border-radius: var(--zc-r-input,10px); font-size: 15px; line-height: 1.4; }
.wv-product .wv-p-input:hover, .wv-product .wv-p-select:hover { border-color: var(--zc-in-bd-hover, #C5CAD1); }
.wv-product .wv-p-input:focus, .wv-product .wv-p-select:focus { outline: 0; border-color: var(--wvp-form); box-shadow: var(--zc-focus, 0 0 0 3px rgba(25,170,255,0.15)); }
.wv-product .wv-p-toolbar { margin-bottom: 24px; }
.wv-product .wv-p-btn.sm { height: 36px; min-height: 36px; padding: 0 20px; font-size: 14px; }
.wv-product .wv-p-droppanel .wv-p-input { height: 40px; min-height: 40px; font-size: 14px; }
.wv-product .wv-p-grid { gap: 24px; }
.wv-product .wv-p-card { border-radius: var(--zc-r-card,18px); }
.wv-product .wv-p-card-body { padding: 22px 22px 8px; }
.wv-product .wv-p-name { font-size: 16px; line-height: 1.5; }
.wv-product .wv-p-summary { margin-top: 6px; font-size: 14px; }
.wv-product .wv-p-price-row { margin-top: 10px; }
.wv-product .wv-p-price { font-size: 16px; }
.wv-product .wv-p-card-actions { gap: 8px; padding: 12px 22px 22px; }
.wv-product .wv-p-detail-top { gap: 44px; margin-top: 12px; }
.wv-product .wv-p-gallery-main { border-radius: var(--zc-r-card,18px); }
.wv-product .wv-p-detail .wv-p-summary { white-space: normal; font-size: 15px; }
.wv-product .wv-p-detail-name { margin-bottom: 12px; font-family: var(--zc-title-font, inherit); font-size: 30px; font-weight: var(--zc-title-weight, 700); line-height: 1.22; letter-spacing: var(--zc-title-ls, -.02em); }
.wv-product .wv-p-tabs { margin-top: 40px; }
.wv-product .wv-p-tab { min-height: 48px; padding: 12px 20px; font-size: 14px; }
.wv-product .wv-p-tab-body { padding: 32px 0; font-size: 15px; }
.wv-product .wv-p-review-form { gap: 12px; padding: 30px; border-radius: var(--zc-r-card,18px); }
.wv-product .wv-p-review-form :is(input,select,textarea) { width: 100%; }
.wv-product .wv-p-desc { font-size: 16px; line-height: 1.75; color: inherit; }
.wv-product .wv-p-desc > :first-child { margin-top: 0; }
.wv-product .wv-p-desc > :last-child { margin-bottom: 0; }
.wv-product .wv-p-desc :is(h1,h2,h3,h4) { margin: 32px 0 12px; line-height: 1.4; letter-spacing: -.02em; word-break: keep-all; text-wrap: balance; }
.wv-product .wv-p-desc h1 { font-size: 24px; }
.wv-product .wv-p-desc h2 { font-size: 20px; }
.wv-product .wv-p-desc h3 { font-size: 17px; }
.wv-product .wv-p-desc h4 { font-size: 15px; }
.wv-product .wv-p-desc :is(p,ul,ol,blockquote,table) { margin: 0 0 16px; }
.wv-product .wv-p-desc :is(ul,ol) { padding-left: 22px; }
.wv-product .wv-p-desc :is(img,video,iframe,table) { max-width: 100%; }
.wv-product .wv-p-desc table { width: 100%; border-collapse: collapse; }
.wv-product .wv-p-desc :is(th,td) { padding: 14px 16px; border: 1px solid var(--wvp-border); text-align: left; vertical-align: top; }
.wv-product .wv-p-info-table :is(th,td) { line-height: 1.6; vertical-align: top; }
.wv-product .wv-p-collapse-clip { position: relative; }
/* 접힌 설명의 흐림 — 바탕색을 덧칠하지 않고 마스크로 흐린다(어떤 밴드 바탕에서도 같은 효과) */
.wv-product .wv-p-collapse.is-clamped .wv-p-collapse-clip { max-height: var(--wv-p-clamp, 1200px); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), transparent); }
.wv-product .wv-p-collapse-more { display: none; }
.wv-product .wv-p-collapse.is-collapsible .wv-p-collapse-more {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 18px; padding: 13px 20px; cursor: pointer;
  background: transparent; border: 1px solid var(--wvp-btn2); border-radius: var(--zc-r-pill,100px);
  color: inherit; font-size: 14px; font-weight: 600;
  transition: background .3s, border-color .3s; }
.wv-product .wv-p-collapse-more:hover { background: var(--wvp-soft); }
.wv-product .wv-p-collapse-more svg { transition: transform .3s; }
.wv-product .wv-p-collapse.is-open .wv-p-collapse-more svg { transform: rotate(180deg); }
.wv-product .wv-p-review-head { flex-wrap: wrap; row-gap: 4px; }
.wv-product .wv-p-review-body { font-size: 14px; line-height: 1.7; }
.wv-product :is(input[type='checkbox'],input[type='radio']) { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--wvp-form); }
.wv-product :is(.wv-p-warn,.wv-p-hint,.wv-p-summary,.wv-p-rating,.wv-p-review-date,.wv-p-option) { line-height: 1.6; }
.wv-product :is(.wv-p-input,.wv-p-select)::placeholder { color: var(--zc-ph, #868E96); opacity: 1; }
.wv-product :is(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--wvp-form); outline-offset: 3px; }

@media (max-width: 720px) {
  .wv-product .wv-p-detail-top { gap: 24px; }
  .wv-product .wv-p-detail-name { font-size: 26px; }
  .wv-product .wv-p-grid { gap: 16px; }
  .wv-product .wv-p-card-body { padding: 16px 16px 6px; }
  .wv-product .wv-p-card-actions { padding: 8px 16px 16px; }
  .wv-product .wv-p-name { font-size: 15px; }
  .wv-product .wv-p-tab-body { padding: 24px 0; }
}

.wv-product :is(.wv-p-heading,.wv-p-name,.wv-p-detail-name,.wv-p-review-title) { word-break:keep-all; text-wrap:balance; }
.wv-product :is(.wv-p-summary,.wv-p-option,.wv-p-desc,.wv-p-review-body,.wv-p-info-table td) { overflow-wrap:anywhere; }
.wv-product :is(input,select,textarea,button) { max-width:100%; font:inherit; }
.wv-product .wv-p-empty { min-height:160px; display:grid; place-items:center; line-height:1.65; }
@media (max-width: 520px) {
  .wv-product .wv-p-tabs { overflow-x:auto; }
  .wv-product .wv-p-tab { flex:1 0 auto; }
  .wv-product .wv-p-info-table th { width:108px; }
  .wv-product .wv-p-pricefilter { width:100%; }
  .wv-product .wv-p-pricefilter .wv-p-input { flex:1 1 0; width:0; }
  .wv-product .wv-p-search { width:100%; margin-left:0; }
  .wv-product .wv-p-searchinput { width:100%; flex:1 1 0; }
  .wv-product .wv-p-chips { position:relative; width:100%; }
  .wv-product .wv-p-drop { position:static; }
  .wv-product .wv-p-droppanel { left:0; right:auto; }
  .wv-product .wv-p-viewopts { width:100%; }
  .wv-product .wv-p-count { margin-right:auto; }
  .wv-product .wv-p-btn-row .wv-p-btn { flex:1 1 100%; }
  .wv-product .wv-p-grid.as-list .wv-p-card { grid-template-columns:96px minmax(0,1fr); gap:14px; }
  .wv-product .wv-p-grid.as-list .wv-p-card-actions { grid-column:2; }
  .wv-product .wv-p-desc :is(h1,h2,h3,h4) { margin-top: 26px; }
  .wv-product .wv-p-desc h1 { font-size: 21px; }
  .wv-product .wv-p-desc h2 { font-size: 18px; }
  .wv-product .wv-p-info-table :is(th,td) { padding: 10px; }
  .wv-product .wv-p-sgrid { gap:24px 12px; }
  .wv-product .wv-p-smore { width:100%; min-width:0; }
}
@media (prefers-reduced-motion: reduce) {
  .wv-product *, .wv-product *::before, .wv-product *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* webgen 옛 래퍼(섹션 바로 아래 상자가 1120 폭을 인라인 또는 페이지 CSS 로 가진 것, 안에 [data-zs-gutter] 레일도 디자인 블록 표식(data-zs-pad·role·typo)도 없다)를 페이지 레일 폭으로 편다(2026-09-24).
   그 옛 구조에만 건다. 디자인 블록·표준 틀(안쪽 [data-zs-gutter] 레일)에 걸면 바깥 상자만 줄어 왼쪽에 붙거나 거터가 겹친다(2026-10-20). */
:where(section[data-plugin-section="productsys"]:not(.zs-plugin-sec):not(:has([data-zs-gutter], [data-zs-pad], [data-zs-role], [data-zs-typo])), section[data-plugin-section="ordersys"]:not(.zs-plugin-sec):not(:has([data-zs-gutter], [data-zs-pad], [data-zs-role], [data-zs-typo]))) {
  padding-left: 0 !important; padding-right: 0 !important;
}
:where(section[data-plugin-section="productsys"]:not(.zs-plugin-sec):not(:has([data-zs-gutter], [data-zs-pad], [data-zs-role], [data-zs-typo])) > div, section[data-plugin-section="ordersys"]:not(.zs-plugin-sec):not(:has([data-zs-gutter], [data-zs-pad], [data-zs-role], [data-zs-typo])) > div) {
  width: min(100% - 2 * var(--zs-widget-gutter, var(--zs-rail-gutter, var(--zs-gutter, 25px))), var(--zs-widget-rail, var(--zs-rail, calc(var(--zs-content-max-width, 1480px) - 2 * var(--zs-gutter, 25px))))) !important; max-width: none !important; margin-inline: auto; padding-inline: 0; box-sizing: border-box;
}
:where(section[data-plugin-section="ordersys"]:not(.zs-plugin-sec):not(:has([data-zs-gutter], [data-zs-pad], [data-zs-role], [data-zs-typo])) .wv-order) { padding-left: 0; padding-right: 0; }

.wv-product { width: min(100% - 2 * var(--zs-widget-gutter, var(--zs-rail-gutter, var(--zs-gutter, 25px))), var(--zs-widget-rail, var(--zs-rail, calc(var(--zs-content-max-width, 1480px) - 2 * var(--zs-gutter, 25px))))); max-width: none; margin-inline: auto; padding-inline: 0; box-sizing: border-box; }
:where(section[data-plugin-section]:not(.zs-plugin-sec):not(:has([data-zs-gutter], [data-zs-pad], [data-zs-role], [data-zs-typo])) > div) > .wv-product { width: 100%; max-width: none; padding-inline: 0; box-sizing: border-box; }
.wv-product a.wv-p-name { display: block; color: inherit; text-decoration: none; }

/* 상품 Q&A(2026-10-27) — 목록·폼은 후기(wv-p-review*) 모양을 그대로 쓰고, 답변 상태 딱지·비밀글 표시만 더한다. */
.wv-product .wv-p-qna-state { flex: none; font-size: 12px; line-height: 1.6; padding: 0 8px; border-radius: 999px; border: 1px solid currentColor; opacity: .6; }
.wv-product .wv-p-qna-state.done { opacity: 1; font-weight: 600; }
.wv-product .wv-p-qna-locked { opacity: .55; font-style: italic; }
.wv-product .wv-p-qna-secret { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 14px; cursor: pointer; }
.wv-product .wv-p-qna-secret input { width: 16px; height: 16px; margin: 0; accent-color: currentColor; }

/* 머리말 돋보기 검색창(wv-product.js openSearchPop, 2026-10-27) — body 에 붙는 층이라 .wv-product 밖에 둔다 */
.wv-p-searchpop { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px; background: rgba(17,17,17,.42); }
.wv-p-searchpop-box { display: flex; align-items: center; gap: 6px; width: min(560px, 100%); padding: 8px 8px 8px 18px;
  border-radius: 999px; background: #fff; box-shadow: 0 12px 40px rgba(17,17,17,.22); }
.wv-p-searchpop-input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 16px; color: #1c1a17; }
.wv-p-searchpop-input::-webkit-search-cancel-button { display: none; }
.wv-p-searchpop-go, .wv-p-searchpop-x { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; font: inherit; }
.wv-p-searchpop-go { background: #111; color: #fff; }
.wv-p-searchpop-go svg { width: 20px; height: 20px; }
.wv-p-searchpop-x { background: transparent; color: #6b6b6b; font-size: 26px; line-height: 1; }
.wv-p-searchpop-x:hover { background: #f2f2f2; }
.wv-p-searchpop .wv-p-searchpop-input { margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; outline: 0; appearance: none; }
.wv-p-searchpop-box:focus-within { box-shadow: 0 12px 40px rgba(17,17,17,.22), 0 0 0 3px rgba(37,99,235,.28); }
.wv-p-searchpop button:focus-visible { outline: 3px solid rgba(37,99,235,.35); outline-offset: 2px; }

/* ── 2026-10-26 쇼핑몰 오류 수정 ───────────────────────────────────────────── */
/* 첫 화면 깜빡임(FOUC) — 서버가 검색엔진용으로 넣어 둔 상품 글자 사본이 위젯이 그려지기 전 1초쯤 맨 글자로 보였다.
   사본은 문서에 그대로 두되(검색엔진·화면낭독기용) 화면에서는 감추고, 그동안 위젯 자리를 한 화면 높이만큼 잡아
   아래 꼬리말이 올라왔다 내려가는 튐(레이아웃 쉬프트)도 막는다. 불러오기에 실패하면(hydration-error) 사본을 다시 보여 준다. */
.wv-product > :is([data-wv-seo-prerender],[data-wv-seo-snapshot],[data-wv-seo-main]):not([data-wv-seo-hydration-error]) {
  position: absolute !important; 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; }
.wv-product:has(> :is([data-wv-seo-prerender],[data-wv-seo-snapshot],[data-wv-seo-main]):not([data-wv-seo-hydration-error])) {
  min-height: min(100vh, 960px); }
.wv-product:has(> :is([data-wv-seo-prerender],[data-wv-seo-snapshot],[data-wv-seo-main]):not([data-wv-seo-hydration-error]))::before {
  content: ""; position: absolute; left: 50%; top: 120px; width: 28px; height: 28px; margin-left: -14px;
  border: 2px solid var(--wvp-border); border-top-color: var(--wvp-muted); border-radius: 50%;
  animation: wvp-spin .8s linear infinite; }
@keyframes wvp-spin { to { transform: rotate(360deg); } }
/* 상세 불러오는 동안도 같은 높이를 잡아 둔다(목록 → 상세 제자리 전환·뒤로가기). */
.wv-product > .wv-p-loading:only-child { min-height: min(100vh, 960px); }

/* '개씩 보기' 고르기 — 브라우저 기본 모양(특히 사파리·아이폰의 회색 둥근 단추) 대신 위젯 모양으로 통일 */
.wv-product select.wv-p-perpage {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  height: 32px; padding: 0 28px 0 12px; border: 1px solid var(--zc-in-bd, #DDE1E6); border-radius: var(--zc-r-pill,100px);
  background-color: var(--zc-in-bg, #FFFFFF); color: var(--zc-in-ink, #212529);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='12' height='12'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23868E96' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 12px;
  font-size: 13px; line-height: 30px; cursor: pointer; transition: border-color .3s; }
.wv-product select.wv-p-perpage:hover { border-color: var(--zc-in-bd-hover, #C5CAD1); }
.wv-product select.wv-p-perpage:focus-visible { outline: 2px solid var(--wvp-accent); outline-offset: 2px; }
.wv-product select.wv-p-perpage::-ms-expand { display: none; }
/* 후기 별점 고르기도 같은 문제 — 같은 화살표로 */
.wv-product select.wv-p-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 36px;
  background-color: var(--zc-in-bg, #FFFFFF); color: var(--zc-in-ink, #212529);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='12' height='12'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23868E96' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 12px; }

/* 찜(하트) — 담긴 상태가 눈에 보이게: 하트를 채우고 색을 바꾼다(목록 카드·진열·상세 버튼 모두 같은 규칙) */
.wv-product { --wvp-wish: var(--zc-wish, #E03131); }
.wv-product :is(.wv-p-wishbtn,.wv-p-btn.wish) svg path { transition: fill .2s, stroke .2s; }
.wv-product :is(.wv-p-wishbtn,.wv-p-btn.wish).is-active { color: var(--wvp-wish); }
.wv-product :is(.wv-p-wishbtn,.wv-p-btn.wish).is-active svg path { fill: currentColor; stroke: currentColor; }
.wv-product :is(.wv-p-wishbtn,.wv-p-btn.wish).is-active .wv-p-wishico { animation: wvp-wish-pop .32s ease-out; }
@keyframes wvp-wish-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* 후기 작성 안내(구매 확정 회원만) */
.wv-product .wv-p-review-locked { margin-top: 20px; padding: 14px 16px; border-radius: var(--zc-r-input,10px);
  background: var(--wvp-soft); font-size: 13px; }

/* 장바구니 서랍 — 쇼핑몰 설정에 장바구니 페이지가 없을 때 담기 안내의 '장바구니 보기'가 연다 */
.wv-product.wv-p-cartdrawer { position: fixed; inset: 0; z-index: 2147483000; width: auto; max-width: none; margin: 0; }
.wv-p-cartdrawer .wv-p-cartdrawer-dim { position: absolute; inset: 0; background: rgba(11,12,13,.45); }
.wv-p-cartdrawer .wv-p-cartdrawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100%);
  display: flex; flex-direction: column; background: var(--zc-card-bg, #FFFFFF); color: var(--zc-card-ink, #212529);
  box-shadow: -8px 0 32px rgba(11,12,13,.18); }
.wv-p-cartdrawer .wv-p-cartdrawer-head { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--wvp-border); font-size: 16px; }
.wv-p-cartdrawer .wv-p-cartdrawer-close { font-size: 22px; line-height: 1; border: 0; background: transparent; color: inherit; cursor: pointer; }
.wv-p-cartdrawer .wv-p-cartdrawer-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px 24px; }
.wv-p-cartdrawer .wv-p-cartdrawer-body .wv-order { width: 100%; max-width: none; margin: 0; }
/* 서랍 안에서 주문서로 넘어가면 주문서 두 칸 배치가 들어갈 만큼 넓힌다 */
.wv-p-cartdrawer .wv-p-cartdrawer-panel:has(.wv-o-checkout) { width: min(1080px, 100%); }

/* 상세 사진 넘기기 — 큰 사진을 끌거나 밀어서, 좌우 화살표로, 썸네일로(지금 사진 썸네일에 테두리) */
.wv-product .wv-p-gallery-main.is-slider { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.wv-product .wv-p-gallery-main.is-slider:active { cursor: grabbing; }
.wv-product .wv-p-gallery-main.is-slider img { -webkit-user-drag: none; pointer-events: none; }
.wv-product .wv-p-gallery-nav { position: absolute; top: 50%; width: 36px; height: 36px; margin-top: -18px; display: inline-flex;
  align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.88); color: #0B0C0D;
  box-shadow: 0 1px 4px rgba(11,12,13,.18); cursor: pointer; opacity: 0; transition: opacity .2s; z-index: 2; }
.wv-product .wv-p-gallery-nav.prev { left: 12px; }
.wv-product .wv-p-gallery-nav.prev svg { transform: rotate(90deg); }
.wv-product .wv-p-gallery-nav.next { right: 12px; }
.wv-product .wv-p-gallery-nav.next svg { transform: rotate(-90deg); }
.wv-product .wv-p-gallery-main.is-slider:hover .wv-p-gallery-nav, .wv-product .wv-p-gallery-nav:focus-visible { opacity: 1; }
@media (hover: none) { .wv-product .wv-p-gallery-nav { opacity: .9; } }
.wv-product .wv-p-gallery-count { position: absolute; right: 12px; bottom: 12px; padding: 2px 9px; border-radius: 999px;
  background: rgba(11,12,13,.55); color: #FFFFFF; font-size: 12px; line-height: 1.6; z-index: 2; }
.wv-product .wv-p-gallery-thumbs img { cursor: pointer; }
.wv-product .wv-p-gallery-thumbs img.on { border-color: currentColor; }