/* ==========================================================================
   상품 상세 전용 (v2) — 외주본 product-page(shop.css) 위에 우리 상세 기능을 외주본 언어로.
   사진 슬라이더·썸네일 · 품절/사전예약 사이즈 · 무료교환/카톡 카드 · 색상 변형 · 찜 ·
   상세 탭 안의 스타일링/어드민 상세/하단 표 · 리뷰(외주본 리뷰 줄) · 모바일 구매바/사이즈 시트.
   상세 스크립트가 만드는 이름(.pdp-* · .pd-* · .rv-* · .size-grid …)은 그대로 둔다.
   ========================================================================== */

/* ── 사진 — 슬라이더(외주본 큰 사진 칸 · #f4f4f4) + 썸네일 줄 ─────────── */
/* 격자 칸이 슬라이더 길이만큼 늘어나지 않게(모바일 1칸일 때 가로 넘침 방지) */
.product-layout > * { min-width: 0; }
.product-gallery .pdp-slider { position: relative; background: #f4f4f4; }
.pdp-slider__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.pdp-slider__track::-webkit-scrollbar { display: none; }
.pdp-slide { position: relative; flex: 0 0 100%; aspect-ratio: 3 / 4; scroll-snap-align: start; cursor: zoom-in; }
.product-gallery .pdp-slide img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center; user-select: none; -webkit-user-drag: none; }
.pdp-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 9px #00000012;
    transform: translateY(-50%);
}
.pdp-arrow svg { width: 22px; height: 22px; stroke-width: 1.7; }
.pdp-arrow--prev { left: 16px; }
.pdp-arrow--next { right: 16px; }
.pdp-arrow[disabled] { opacity: 0.3; cursor: default; }
.pdp-count { position: absolute; right: 14px; bottom: 14px; z-index: 2; padding: 5px 10px; background: #fff; font-size: 13px; }
.pdp-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.pdp-thumbs::-webkit-scrollbar { display: none; }
.pdp-thumb { flex: 0 0 72px; padding: 0; aspect-ratio: 3 / 4; background: #f4f4f4; border: 1px solid transparent; opacity: 0.55; }
.pdp-thumb.active { opacity: 1; border-color: #111; }
.product-gallery .pdp-thumb img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.wm-viewer { justify-content: center; align-items: center; padding: 20px; }

/* ── 구매칸 — 외주본 product-summary 격자 ─────────────────────── */
.product-summary { top: calc(var(--wm-header-h, 88px) + 22px); }
.wm-pd-labels { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.wm-pd-labels .tag { display: inline-block; padding: 4px 8px; border: 1px solid #ddd; font-size: 13px; letter-spacing: 0.5px; line-height: 1.3; }
.wm-pd-labels .tag--accent,
.wm-pd-labels .tag--soon { color: #b34635; border-color: #e3c2bb; }
.product-summary .eyebrow { font-size: 13px; letter-spacing: 1px; }
.product-summary .flash-cd { position: static; margin: -4px 0 16px; }

.product-summary .option-row .sizes button { position: relative; width: auto; min-width: 36px; padding: 0 10px; }
.sizes button.active { background: #111; color: #fff; border-color: #111; }
.sizes button.soldout { color: #bbb; text-decoration: line-through; }
.sizes button .so-tag { display: inline-block; margin-left: 4px; font-size: 11px; color: #b34635; text-decoration: none; }   /* inline-block: 버튼의 취소선이 '품절'까지 긋지 않게 */
.wm-opt-color { flex-wrap: wrap; }
.wm-opt-color h2 b { font-weight: 600; }
.wm-opt-sub { color: #999; font-weight: 400; }
.color-row { display: flex; flex-wrap: wrap; gap: 8px; }
.color-row .swatch { width: 24px; height: 24px; border: 1px solid #ddd; cursor: pointer; }
.color-row .swatch.active { outline: 1px solid #111; outline-offset: 2px; }
.pd-variants { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-variant { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border: 1px solid #ddd; font-size: 14px; }
.pd-variant:hover { border-color: #111; }
.pd-variant.is-cur { border-color: #111; background: #111; color: #fff; cursor: default; }
.pd-variant__sw { width: 14px; height: 14px; flex: none; border: 1px solid #0002; }

/* 사이즈 1회 무료교환 · 카톡 상담 — 우리 카드(외주본 선·글자 규칙) */
.pd-sxnote,
.pd-kakao { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid #eee; }
.pd-sxnote { margin: 4px 0 0; background: #fafafa; }
.pd-kakao { align-items: center; margin: 8px 0 6px; }
.pd-kakao:hover { border-color: #111; }
.pd-sxnote__ic { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #111; color: #fff; font-size: 12px; line-height: 20px; text-align: center; }
.pd-sxnote b { font-size: 14px; font-weight: 650; }
.pd-sxnote > span:not(.pd-sxnote__ic) { font-size: 14px; line-height: 1.5; }
.pd-kakao__tx b { display: block; font-size: 14px; font-weight: 650; }
.pd-sxnote i,
.pd-kakao__tx i { display: block; margin-top: 2px; font-style: normal; font-size: 13px; line-height: 1.5; color: #888; }
.pd-kakao__ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; background: #fee500; color: #371d1e; }
.pd-kakao__tx { min-width: 0; }
.pd-kakao__ar { margin-left: auto; color: #999; font-size: 18px; }

.quantity-control #pd-qty,
.pd-sheet__qty span { display: grid; place-items: center; min-width: 45px; font-size: 15px; }

/* 사전예약 — 환불불가 동의 · 출고일정 */
.pd-preorder { padding: 16px 0 4px; border-top: 1px solid #eee; }
.wm-pre-h { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.pd-presel {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 0;
    background: #fff;
    font: inherit;
    font-size: 15px;
    color: #111;
    -webkit-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.pd-presel:invalid { color: #999; }
.pd-pre-note { margin: 10px 0 0; padding: 12px 14px; background: #f7f7f7; border-left: 2px solid #111; font-size: 13px; line-height: 1.7; color: #555; }
.pd-pre-note b { color: #111; }
.sizes button.preorder { text-decoration: none; }

/* 추가 구성 상품 — 외주본 product-addons/addon-item */
.pd-addons:empty { display: none; }
.pd-addon__b { min-width: 0; }
.pd-addon .addon-name { display: block; font-size: 15px; line-height: 1.5; font-weight: 500; }
.pd-addon__pr.price { margin-top: 4px; gap: 6px; }
.pd-addon__lb { margin: 8px 0 5px; font-size: 12px; color: #999; }
.pd-addon__color { width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 0; background: #fff; font: inherit; font-size: 14px; }
.pd-addon .addon-sizes { justify-content: flex-start; flex-wrap: wrap; }
.pd-addon .addon-sizes button.active { background: #171717; color: #fff; border-color: #171717; }
.pd-addon .addon-sizes button.soldout { color: #bbb; text-decoration: line-through; cursor: not-allowed; }
.pd-addon-preview { position: fixed; z-index: 600; pointer-events: none; opacity: 0; transform: translateX(8px); transition: opacity 0.16s, transform 0.16s; background: #f4f4f4; box-shadow: 0 18px 50px #0003; overflow: hidden; }
.pd-addon-preview.show { opacity: 1; transform: none; }
.pd-addon-preview img { display: block; width: 320px; height: auto; max-height: 82vh; }

/* 담기 · 바로 구매 · 재입고 알림 · 찜 */
.pd-actions { display: grid; gap: 10px; margin-top: 18px; }
.pd-actions .dark-button { width: 100%; justify-content: center; }
.wm-line-button { min-height: 50px; border: 1px solid #171717; background: #fff; font-size: 15px; font-weight: 650; letter-spacing: 0.5px; }
.wm-wish-btn { display: block; width: 100%; margin-top: 10px; padding: 13px 0; border: 1px solid #eee; font-size: 15px; color: #555; }
.wm-wish-btn.on { color: #111; font-weight: 650; border-color: #ddd; }
.product-summary .delivery-info { margin-top: 18px; }

/* ── 상세 탭 안: 스타일링 · 어드민 상세 · 하단 표 · 설명/소재 ────────── */
.pd-styling { margin-bottom: 40px; }
.pd-styling__h { margin: 0 0 16px; font-size: 15px; font-weight: 600; }
.pd-styling__wrap { position: relative; }
.pd-styling__track { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.pd-styling__track::-webkit-scrollbar { display: none; }
.pd-styling__item { flex: 0 0 calc((100% - 36px) / 4); aspect-ratio: 3 / 4; background: #f4f4f4; cursor: zoom-in; }
.pd-styling__item img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pd-styling__nav { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); }
.pd-styling__nav--prev { left: -12px; }
.pd-styling__nav--next { right: -12px; }
.pd-sty-lb { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; background: #000d; }
.pd-sty-lb.on { display: flex; }
.pd-sty-lb img { width: auto; max-width: 92vw; max-height: 90svh; object-fit: contain; }
.pd-sty-lb__x { position: absolute; top: 16px; right: 16px; color: #fff; padding: 6px; }
.pd-detail__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.pd-detail__model { font-size: 13px; color: #999; }
.pd-detail__body { max-width: 850px; margin: 0 auto; }
/* 상세 이미지는 본 사이트 그대로: 폭은 칸에 맞추고 이미지마다 아래 여백(안 붙게) */
.pd-detail__body img { display: block; width: 100%; height: auto; margin: 0 auto 180px; vertical-align: bottom; }
.pd-detail__body p { margin: 0 0 6px; min-height: 1em; }
.pd-detail__body b,
.pd-detail__body strong { color: #111; }
.pd-detail__body a { color: #111; text-decoration: underline; }
@media (max-width: 760px) { .pd-detail__body img { margin-bottom: 110px; } }
.pd-spectables { max-width: 850px; margin: 36px auto 0; }
.pd-spectable { margin-top: 28px; }
.pd-spectable__t { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.pd-spectable__scroll { overflow-x: auto; }
.pd-spectable table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pd-spectable th,
.pd-spectable td { padding: 11px 12px; border: 1px solid #e7e7e7; text-align: center; color: #555; white-space: nowrap; }
.pd-spectable thead th,
.pd-spectable tbody th { background: #f5f4f1; color: #111; font-weight: 600; }
.wm-pd-text { max-width: 850px; margin: 40px auto 0; }
.wm-pd-text h2 { margin: 28px 0 8px; font-size: 17px; }
.wm-pd-text p { margin: 0; white-space: normal; }
.wm-dl-pair { display: contents; }

/* ── 리뷰 — 외주본 리뷰 줄(.review-row) 언어 ───────────────────── */
.rv-sec .section-top { align-items: flex-end; }
.rv-avg { display: flex; align-items: baseline; gap: 10px; font-size: 15px; }
.rv-avg b { font-size: 24px; font-weight: 650; }
.rv-stars,
.rv-item__stars { color: #242424; letter-spacing: 3px; font-size: 17px; }
.rv-count { color: #888; }
.rv-sorts { align-items: flex-end; }
.rv-sorts .rv-sortbtn.on { color: #111; font-weight: 750; border-bottom: 2px solid #111; }
.rv-sorts .rv-filterbtn { margin-left: auto; font-size: 15px; color: #888; padding: 0 0 15px; }
.rv-sorts .rv-filterbtn.on { color: #111; font-weight: 750; }
.rv-item { padding: 30px 0; border-top: 1px solid #e7e7e7; }
.rv-item:last-child { border-bottom: 1px solid #e7e7e7; }
.rv-item__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.rv-item__name { font-size: 15px; font-weight: 650; }
.rv-item__opt,
.rv-item__date { font-size: 13px; color: #999; }
.rv-item__date { margin-left: auto; }
.rv-item__body { margin: 17px 0; font-size: 15px; line-height: 1.9; white-space: pre-line; word-break: break-word; }
.rv-item__photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 15px 0; }
.rv-photo { width: auto; height: 115px; max-width: 220px; object-fit: contain; background: #f4f4f4; cursor: zoom-in; }   /* 올린 사진 비율 그대로(자르지 않음) */
.rv-item--pinned { padding-left: 18px; border-left: 2px solid #111; }
.rv-pin,
.rv-best { padding: 2px 7px; border: 1px solid #111; font-size: 12px; font-weight: 650; }
.rv-best { color: #b34635; border-color: #e3c2bb; }
.rv-helpful { padding: 8px 14px; border: 1px solid #ddd; font-size: 14px; }
.rv-helpful.on { border-color: #111; font-weight: 650; }
.rv-empty { padding: 40px 0; text-align: center; font-size: 15px; color: #777; }
.rv-item__video { position: relative; display: block; width: 100%; max-width: 280px; margin: 12px 0 0; overflow: hidden; background: #000; cursor: pointer; line-height: 0; }
.rv-vposter { width: 100%; height: auto; display: block; }
.rv-vposter--ph { aspect-ratio: 3 / 4; background: #111; }
.rv-vplay { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; border-radius: 50%; background: #0008; transform: translate(-50%, -50%); }
.rv-vplay::before { content: ""; display: block; margin: 0 auto; width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.rv-vtag { position: absolute; left: 8px; top: 8px; padding: 4px 7px; background: #0009; color: #fff; font-size: 12px; line-height: 1; }
.rv-item__video.playing .rv-vplay,
.rv-item__video.playing .rv-vtag { display: none; }
.rv-item__video video { width: 100%; height: auto; display: block; background: #000; }
.rv-lightbox { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; background: #000d; }
.rv-lightbox img { width: auto; max-width: 92vw; max-height: 90svh; object-fit: contain; }
.rv-lightbox__close { position: absolute; top: 16px; right: 16px; color: #fff; padding: 6px; font-size: 20px; }

.wm-pd-empty { padding: 90px 0; }
.wm-pd-empty p { margin: 0 0 16px; }

/* ── 모바일 하단 고정 구매바 + 사이즈 시트 (외주본 버튼·선 규칙) ──── */
.pd-mbar { display: none; }
@media (max-width: 760px) {
    .pd-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 500; display: flex; padding: 0 0 env(safe-area-inset-bottom); background: #fff; border-top: 1px solid #ddd; }
    .pd-mbar__btn { flex: 1; padding: 17px; font-size: 15px; font-weight: 650; letter-spacing: 0.5px; }
    .pd-mbar__btn--buy { background: #171717; color: #fff; }
    .pd-mbar__btn--cart { background: #fff; color: #111; }
    /* 구매바 높이 + 아이폰 홈 막대만큼 아래를 비운다 */
    body.has-mbar { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
    body.has-mbar .quick-links { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
}
.pd-sheet { position: fixed; inset: 0; z-index: 600; display: none; }
.pd-sheet.open { display: block; }
.pd-sheet__bd { position: absolute; inset: 0; background: #0008; }
.pd-sheet__card {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 88vh;
    overflow-y: auto;
    padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
    background: #fff;
    transform: translateY(100%);
    transition: transform 0.28s;
}
.pd-sheet.open .pd-sheet__card { transform: none; }
.pd-sheet__x { position: absolute; top: 14px; right: 14px; padding: 6px; font-size: 18px; color: #777; }
.pd-sheet__top { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; padding-right: 28px; }
.pd-sheet__img { flex: none; width: 72px; height: 90px; object-fit: cover; background: #f4f4f4; }
.pd-sheet__nm { margin: 0 0 6px; font-size: 15px; line-height: 1.4; }
.pd-sheet__lb { margin: 16px 0 10px; font-size: 15px; font-weight: 600; }
.pd-sheet__sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-sheet__sizes button { position: relative; min-width: 45px; height: 45px; padding: 0 10px; border: 1px solid #ddd; font-size: 15px; }
.pd-sheet__sizes button.active { background: #111; color: #fff; border-color: #111; }
.pd-sheet__sizes button.soldout { color: #bbb; text-decoration: line-through; cursor: not-allowed; }
.pd-sheet__sizes .so-tag--pre { position: absolute; top: -8px; right: -6px; padding: 1px 5px; background: #111; color: #fff; font-size: 10px; }
.pd-sheet__qtyrow { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.pd-sheet__qty { display: inline-flex; align-items: center; height: 40px; border: 1px solid #ddd; }
.pd-sheet__qty button { width: 40px; height: 100%; font-size: 20px; }
.pd-sheet__buy,
.pd-sheet__cart { display: block; width: 100%; min-height: 50px; margin-top: 10px; font-size: 15px; font-weight: 650; letter-spacing: 0.5px; }
.pd-sheet__buy { margin-top: 18px; background: #171717; color: #fff; }
.pd-sheet__cart { border: 1px solid #171717; background: #fff; }
.pd-addons--sheet { margin: 16px 0 0; }
/* 쿠키 배너 ↔ 하단 구매바 겹침 방지 (기존 그대로) */
.wm-consent { z-index: 550 !important; }
@media (max-width: 760px) { body.has-mbar .wm-consent { bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important; } }
/* 하단 구매바(500)가 열린 창 위로 올라와 서랍의 '장바구니 보기/주문' 버튼·검색 결과·사진 크게 보기를 가리지 않게,
   상세 모바일에서는 이 창들을 구매바 위로 올린다. 알림(토스트)은 서랍 위에 그대로 보이게 */
@media (max-width: 760px) {
    body.has-mbar .drawer-overlay { z-index: 510; }
    body.has-mbar .wm-drawer { z-index: 511; }
    body.has-mbar .overlay,
    body.has-mbar .pd-sty-lb { z-index: 512; }
    body.has-mbar .qadd,
    body.has-mbar .wm-modal-overlay { z-index: 560; }
    body.has-mbar .toast { z-index: 590; }
}

@media (max-width: 767px) {
    .pdp-arrow { width: 38px; height: 38px; }
    .pdp-arrow--prev { left: 8px; }
    .pdp-arrow--next { right: 8px; }
    .pdp-thumb { flex-basis: 56px; }
    .pd-styling__item { flex-basis: calc((100% - 12px) / 2); }
    .pd-styling__nav { display: none; }
    .rv-item__date { margin-left: 0; }
    .rv-sorts { gap: 18px; }
}

[data-theme="dark"] .product-gallery .pdp-slider,
[data-theme="dark"] .pdp-thumb,
[data-theme="dark"] .pd-styling__item,
[data-theme="dark"] .pd-sheet__img { background: #1c1c1c; }
[data-theme="dark"] .pdp-arrow,
[data-theme="dark"] .pdp-count,
[data-theme="dark"] .pd-mbar,
[data-theme="dark"] .pd-mbar__btn--cart,
[data-theme="dark"] .pd-sheet__card,
[data-theme="dark"] .pd-presel,
[data-theme="dark"] .pd-addon__color,
[data-theme="dark"] .wm-line-button,
[data-theme="dark"] .pd-sheet__cart { background: #161616; color: #eee; border-color: #333; }
[data-theme="dark"] .pd-sxnote,
[data-theme="dark"] .pd-pre-note { background: #1c1c1c; color: #bbb; border-color: #333; }
[data-theme="dark"] .pd-kakao,
[data-theme="dark"] .wm-wish-btn,
[data-theme="dark"] .rv-item,
[data-theme="dark"] .pd-spectable th,
[data-theme="dark"] .pd-spectable td,
[data-theme="dark"] .sizes button,
[data-theme="dark"] .pd-sheet__sizes button,
[data-theme="dark"] .pd-sheet__qty { border-color: #333; }
[data-theme="dark"] .pd-spectable thead th,
[data-theme="dark"] .pd-spectable tbody th { background: #1c1c1c; color: #eee; }
[data-theme="dark"] .sizes button.active,
[data-theme="dark"] .pd-sheet__sizes button.active,
[data-theme="dark"] .pd-mbar__btn--buy,
[data-theme="dark"] .pd-sheet__buy,
[data-theme="dark"] .pd-variant.is-cur { background: #eee; color: #111; border-color: #eee; }
[data-theme="dark"] .rv-stars,
[data-theme="dark"] .rv-item__stars { color: #eee; }
/* 다크모드 대비 sweep(10/24): 밝은 모드에서 #111 로 그린 선택 상태·선·배지를 전부 뒤집는다 */
[data-theme="dark"] .delivery-info b { color: #ccc; }
[data-theme="dark"] .rv-sorts .rv-sortbtn.on,
[data-theme="dark"] .rv-sorts .rv-filterbtn.on { color: #eee; border-color: #eee; }
[data-theme="dark"] .pdp-thumb.active { border-color: #eee; }
[data-theme="dark"] .color-row .swatch.active { outline-color: #eee; }
[data-theme="dark"] .pd-variant:hover,
[data-theme="dark"] .pd-kakao:hover,
[data-theme="dark"] .rv-best,
[data-theme="dark"] .rv-helpful.on { border-color: #eee; }
[data-theme="dark"] .rv-item--pinned,
[data-theme="dark"] .pd-pre-note { border-left-color: #eee; }
[data-theme="dark"] .pd-pre-note b,
[data-theme="dark"] .wm-wish-btn.on { color: #eee; }
[data-theme="dark"] .pd-sxnote__ic,
[data-theme="dark"] .pd-sheet__sizes .so-tag--pre,
[data-theme="dark"] .pd-addon .addon-sizes button.active { background: #eee; color: #111; border-color: #eee; }