@charset "utf-8";
/* =====================================================================
   상품 목록 · 검색 · 상세 · 후기 · 수록 카드 (catalog) — app.css 다음에 읽는다
   디자인 = 힉스필드 시안 A '로열 누아르' (design/DESIGN.md · ../design/hf/A_list_pc · A_product_pc · A_product_m)
   결: 순검정 바탕 · 숯색 판 + 1px 금빛 테두리 · 큰 제목·가격 = 금색 세리프 · 영문 라벨 = Cinzel · 금색 바탕 위 글자 = 검정(--on-gold)
   색은 의미 토큰만(--bg --surface --text* --heading --price --border* --gold* --on-gold --btn-*). 빨강(--live)은 NEW 점 배지·LIVE 에만.
   공통 부품(pcard · price · gal · fopt · qty · tabs · pager · buybar)은 이 화면 범위 선택자(.cl · .pdp · .pd-rel · .pd-bar)로만 덮는다.
   ===================================================================== */

/* ── 0. 위치(빵부스러기) ── */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 0;font-size:12.5px;line-height:1.4;color:var(--text-2)}
.crumbs a{color:var(--text-2);transition:color var(--t-fast)}
.crumbs a:hover{color:var(--gold-hi)}
.crumbs .ico{width:12px;height:12px;color:var(--text-3)}
.crumbs [aria-current]{min-width:0;max-width:70vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}

/* 목록·상세 본문 폭 (시안 A PC 실측: 목록 ≈ 1360 · 상세 ≈ 1320) */
.cl{--wrap:1360px}
.pdp{--wrap:1320px}

/* =====================================================================
   1. 목록 머리 띠 (시안: 금빛 테두리 띠 안 — 큰 금색 Cinzel 'BOOSTER BOX' | 한글 제목 · 개수)
   ===================================================================== */
.cl-head{display:flex;flex-wrap:wrap;align-items:center;column-gap:14px;row-gap:2px;margin-top:10px;padding:12px 16px 13px;
  border:1px solid var(--gold-line);border-radius:var(--r-xs);background:linear-gradient(180deg,rgba(201,162,74,.06),rgba(201,162,74,0) 70%),rgba(10,10,10,.6)}
.cl-head__en{flex:1 1 100%;min-width:0;font-family:var(--display);font-size:24px;font-weight:700;line-height:1.15;letter-spacing:.02em;
  color:var(--gold-hi);background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;overflow-wrap:anywhere}
.cl-head__bar{display:none}
.cl-head__t{min-width:0;font-size:18px;font-weight:700;line-height:1.35;letter-spacing:-.02em;color:var(--text);overflow-wrap:anywhere}
.cl-head__t em{font-style:normal;color:inherit}
.cl-head__n{flex:none;margin-left:auto;font-size:12px;color:var(--text-3);white-space:nowrap}
@media (min-width:900px){
  .cl-crumbs{display:none}
  .cl-head{flex-wrap:nowrap;column-gap:0;min-height:58px;margin-top:18px;padding:0 24px 0 18px}
  .cl-head__en{flex:0 1 auto;font-size:44px;line-height:1.2;padding:3px 0 1px;letter-spacing:.01em;white-space:nowrap}
  .cl-head__bar{display:block;flex:none;width:1px;height:34px;margin:0 20px;background:var(--gold-line)}
  .cl-head__t{font-size:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cl-head__n{margin-left:24px;font-size:12.5px}
}

/* =====================================================================
   2. 몸통: 폰 = 한 줄(거르기 알약 줄 → 정렬 → 카드) · PC = 왼쪽 거르기 판 214px | 오른쪽
   ===================================================================== */
.cl-body{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:12px}
.cl-main{min-width:0}
@media (min-width:900px){.cl-body{grid-template-columns:214px minmax(0,1fr);gap:22px;align-items:start;margin-top:20px}}

/* 거르기 — 폰: 무리마다 가로로 미는 알약(금빛 선 · 고른 것 = 금색 바탕 검정 글자) */
.cl-side{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0}
.cl-grp{min-width:0}
.cl-grp[hidden]{display:none}
.cl-grp__h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cl-opts{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;margin-inline:calc(var(--gut) * -1);padding:2px var(--gut)}
.cl-opts::-webkit-scrollbar{display:none}
.cl-opt,.cl-live,.cl-side .chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 15px;border-radius:var(--r-pill);border:1px solid var(--gold-line);
  background:transparent;font-size:13.5px;font-weight:500;color:var(--text);white-space:nowrap;transition:border-color var(--t-fast),background-color var(--t-fast),color var(--t-fast)}
.cl-opt:hover,.cl-live:hover,.cl-side .chip:hover{border-color:var(--gold);background:var(--gold-wash)}
.cl-opt[aria-current="true"],.cl-live.is-on,.cl-side .chip[aria-current="true"]{color:var(--on-gold);font-weight:700;border-color:transparent;background:var(--gold-grad)}
.cl-side .chip .ico,.cl-side .chip .gico{width:16px;height:16px}
.cl-box{display:none}
@media (min-width:900px){
  /* PC: 금빛 테두리 판 · 무리 제목(굵은 흰 글자 + 아래 금빛 선) · 체크 칸 줄 (시안 A_list_pc) */
  .cl-side{position:sticky;top:calc(var(--hd) + 16px);gap:0;padding:4px 16px 14px;border:1px solid var(--gold-line);border-radius:var(--r-xs);background:rgba(12,12,12,.72)}
  .cl-grp{padding:12px 0 10px}
  .cl-grp+.cl-grp{border-top:1px solid var(--gold-line)}
  .cl-grp__h{position:static;width:auto;height:auto;overflow:visible;clip:auto;margin:2px 0 9px;padding-bottom:8px;border-bottom:1px solid var(--gold-line-2);
    font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
  .cl-opts{display:grid;gap:0;margin:0;padding:0;overflow:visible}
  .cl-opt--all{display:none}
  .cl-opt,.cl-live,.cl-side .chip{height:30px;padding:0;gap:10px;border:0;border-radius:0;background:none;font-size:13.5px;font-weight:400;color:var(--text-2)}
  .cl-opt:hover,.cl-live:hover,.cl-side .chip:hover{background:none;color:var(--text)}
  .cl-opt[aria-current="true"],.cl-live.is-on,.cl-side .chip[aria-current="true"]{background:none;color:var(--text);font-weight:600}
  .cl-box{display:inline-grid;place-items:center;flex:none;width:16px;height:16px;border-radius:2px;border:1px solid var(--gold-line);background:var(--input-bg);transition:border-color var(--t-fast)}
  .cl-opt:hover .cl-box,.cl-live:hover .cl-box{border-color:var(--gold)}
  [aria-current="true"]>.cl-box,.is-on>.cl-box{border-color:var(--gold);background:var(--gold-grad)}
  [aria-current="true"]>.cl-box::after,.is-on>.cl-box::after{content:"";width:8px;height:4px;margin-top:-2px;border:solid var(--on-gold);border-width:0 0 2px 2px;transform:rotate(-45deg)}
  .cl-side .chip::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:1px solid var(--gold-line);background:var(--input-bg)}
  .cl-side .chip[aria-current="true"]::before{border:5px solid var(--gold);background:var(--on-gold)}
}

/* 정렬 탭 (시안: 위·아래 금빛 머리카락 선 · 고른 것 = 금색 굵은 글자 + 금색 밑줄) */
.cl-sort{display:flex;align-items:stretch;min-width:0;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding-inline:calc(var(--gut) - 4px);
  border-bottom:1px solid var(--gold-line-2)}
.cl-sort::-webkit-scrollbar{display:none}
.cl-sort a{position:relative;flex:none;display:inline-flex;align-items:center;height:44px;padding:0 12px;font-size:13.5px;font-weight:500;color:var(--text-2);white-space:nowrap;transition:color var(--t-fast)}
.cl-sort a:hover{color:var(--text)}
.cl-sort a[aria-current="true"]{color:var(--gold-hi);font-weight:700}
.cl-sort a[aria-current="true"]::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--gold-grad-h)}
@media (min-width:900px){
  .cl-sort{margin:0;padding:0;border-top:1px solid var(--gold-line-2);overflow:visible}
  .cl-sort a{height:40px;padding:0 20px;font-size:14px}
  .cl-sort a[aria-current="true"]::after{left:0;right:0;height:2px}
}

/* 걸린 조건: 검색어 알약만 보인다(나머지는 거르기 판 체크로 보인다) */
.cl-active{display:none;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.cl-active.has-q,.cl-active.has-many{display:flex}
.cl-tag{display:inline-flex;align-items:center;gap:5px;max-width:100%;height:32px;padding:0 6px 0 12px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--gold-line);font-size:12.5px;font-weight:600;color:var(--text)}
.cl-tag:not([data-k="q"]){display:none}
.cl-tag>span:not(.sr-only){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-tag .ico{flex:none;color:var(--gold-ink)}
.cl-tag__x{width:20px;height:20px;padding:4px;border-radius:50%;background:var(--gold-wash);color:var(--text)!important}
.cl-tag:hover{border-color:var(--gold)}
.cl-reset{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 8px;font-size:12.5px;color:var(--text-2)}
.cl-reset:hover{color:var(--gold-hi)}

/* =====================================================================
   3. 상품 카드 (목록 · 상세 아래 추천 · 빈 결과 추천) — 시안: 숯색 판 + 금빛 테두리 · 위에서 조명 받는 사진 칸 · 왼쪽 위 점 배지 · 흰 이름 · 흐린 종류 · 금색 세리프 가격
   ===================================================================== */
.cl-grid{margin-top:14px;gap:10px}
:is(.cl-grid,.pd-rel) .pcard__link{padding:0;overflow:hidden;border-radius:var(--r-xs);background:linear-gradient(180deg,#111 0%,#0B0B0B 100%);
  border:1px solid var(--gold-line);box-shadow:none}
:is(.cl-grid,.pd-rel) .pcard__link:hover{border-color:var(--gold);box-shadow:var(--gold-glow)}
:is(.cl-grid,.pd-rel) .pcard__img{aspect-ratio:1.12/1;border-radius:0;background:var(--well-grad)}
/* 바닥 금빛 반사 (사진이 받침 위에 놓인 듯) */
:is(.cl-grid,.pd-rel) .pcard__img::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(46% 13% at 50% 89%,rgba(243,210,122,.32) 0%,rgba(201,162,74,.08) 55%,rgba(0,0,0,0) 100%),
             linear-gradient(180deg,rgba(0,0,0,0) 62%,rgba(0,0,0,.35) 100%)}
:is(.cl-grid,.pd-rel) .pcard__img img,:is(.cl-grid,.pd-rel) .pcard__img img[src*="/img/products/"]{padding:5% 8% 9%;mix-blend-mode:normal;filter:drop-shadow(0 10px 10px rgba(0,0,0,.7))}
:is(.cl-grid,.pd-rel) .pcard__img img[src*="/cards/"]{padding:7% 26% 11%}
/* 배지 = 점 알약 (NEW 빨강 · HOT 금색 바탕 검정 글자 · 한정 금 테두리 · 예약 파랑 · 재입고 청록) */
:is(.cl-grid,.pd-rel) .pcard__tag{left:8px;top:8px;height:20px;gap:5px;padding:0 9px 0 8px;border-radius:var(--r-pill);clip-path:none;
  font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--text);background:var(--live-chip)}
:is(.cl-grid,.pd-rel) .pcard__tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
:is(.cl-grid,.pd-rel) .pcard__tag .ico{display:none}
:is(.cl-grid,.pd-rel) .pcard__tag--hot{color:var(--on-gold);background:var(--gold-grad)}
:is(.cl-grid,.pd-rel) .pcard__tag--limited{color:var(--gold-hi);background:rgba(10,10,10,.75);box-shadow:inset 0 0 0 1px var(--gold)}
:is(.cl-grid,.pd-rel) .pcard__tag--preorder{color:var(--text);background:#3B63B8}
:is(.cl-grid,.pd-rel) .pcard__tag--restock{color:var(--on-gold);background:var(--teal)}
:is(.cl-grid,.pd-rel) .pcard__rank{right:8px;top:8px;height:22px;padding:0 8px 0 6px;color:var(--gold-hi);background:rgba(10,10,10,.82);border:1px solid var(--gold-line)}
/* 품절 = 회색 점 알약(왼쪽 위) + 사진 흐리게 */
:is(.cl-grid,.pd-rel) .is-soldout .pcard__tag{display:none}
:is(.cl-grid,.pd-rel) .pcard__sold{inset:auto auto auto 8px;top:8px;display:block;background:none}
:is(.cl-grid,.pd-rel) .pcard__sold span{height:20px;gap:5px;padding:0 9px 0 8px;font-size:11px;color:var(--text-2);background:#3A3936}
:is(.cl-grid,.pd-rel) .pcard__sold span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--text-3)}
:is(.cl-grid,.pd-rel) .is-soldout .pcard__img img{opacity:.42;filter:grayscale(.75) drop-shadow(0 10px 10px rgba(0,0,0,.7))}
/* 라벨: 이름(흰 600) → 종류(흐림) → 가격(금색 세리프) */
:is(.cl-grid,.pd-rel) .pcard__body{padding:10px 11px 11px;border-top:1px solid rgba(201,162,74,.16)}
:is(.cl-grid,.pd-rel) .pcard__name{order:1;margin:0;min-height:2.7em;font-size:13px;font-weight:600;line-height:1.35;color:var(--text)}
:is(.cl-grid,.pd-rel) .pcard__meta,:is(.cl-grid,.pd-rel) .pcard__metarow{order:2;margin-top:3px}
:is(.cl-grid,.pd-rel) .pcard__meta{font-family:var(--font);font-size:11px;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--text-3)}
:is(.cl-grid,.pd-rel) .pcard__rate{color:var(--text-3)}
:is(.cl-grid,.pd-rel) .pcard__rate b{color:var(--text-2)}
:is(.cl-grid,.pd-rel) .pcard__foot{order:3;padding-top:6px}
:is(.cl-grid,.pd-rel) .pcard .price__amt{font-family:var(--serif);font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--price)}
:is(.cl-grid,.pd-rel) .pcard .price__cur{margin-right:3px;font-size:.92em}
:is(.cl-grid,.pd-rel) .pcard .price__was{color:var(--text-3)}
:is(.cl-grid,.pd-rel) .pcard .price__off{color:var(--gold-ink)}
:is(.cl-grid,.pd-rel) .pcard__foot .pill{color:var(--text-3)}
:is(.cl-grid,.pd-rel) .pcard__foot .pill .ico{color:var(--gold-ink)}
:is(.cl-grid,.pd-rel) .is-soldout .pcard__name,:is(.cl-grid,.pd-rel) .is-soldout .price__amt{color:var(--text-3)}
@media (min-width:600px){.cl-grid{gap:14px}}
@media (min-width:900px){
  .cl-grid{margin-top:16px;gap:14px}
  :is(.cl-grid,.pd-rel) .pcard__img{aspect-ratio:1.62/1}
  :is(.cl-grid,.pd-rel) .pcard__img img,:is(.cl-grid,.pd-rel) .pcard__img img[src*="/img/products/"]{padding:2% 10% 5%}
  :is(.cl-grid,.pd-rel) .pcard__img img[src*="/cards/"]{padding:6% 33% 9%}
  :is(.cl-grid,.pd-rel) .pcard__body{padding:12px 14px 13px}
  :is(.cl-grid,.pd-rel) .pcard__name{font-size:14px}
  :is(.cl-grid,.pd-rel) .pcard__meta{font-size:11.5px}
  :is(.cl-grid,.pd-rel) .pcard .price__amt{font-size:19px}
}
@media (hover:hover){:is(.cl-grid,.pd-rel) .pcard__link:hover .pcard__img img{transform:scale(1.04)}}

/* 쪽 넘김 (시안: 양옆으로 길게 뻗는 금빛 선 · ‹ › 금 테두리 네모 · 지금 쪽 = 금색 네모 + 검정 글자) */
.cl .pager{gap:6px;margin-top:26px}
.cl .pager::before,.cl .pager::after{content:"";flex:1 1 0;height:1px;margin:0 14px;background:var(--gold-line-2)}
.cl .pager a,.cl .pager span{min-width:30px;height:30px;border-radius:var(--r-xs);font-size:13.5px;font-weight:500;color:var(--text)}
.cl .pager>a:first-child,.cl .pager>span.is-off:first-child,.cl .pager>a[rel="next"],.cl .pager>span.is-off:last-child{border:1px solid var(--gold-line)}
.cl .pager a:hover{color:var(--gold-hi);background:var(--gold-wash)}
.cl .pager [aria-current="page"]{color:var(--on-gold);font-weight:700;background:var(--gold-grad)}
@media (min-width:900px){.cl .pager{gap:10px;margin-top:30px}.cl .pager::before,.cl .pager::after{margin:0 20px}}

/* 빈 결과 (공통 빈 화면 + 다른 검색어 + 바로가기 칩) — 숯색 판 */
.cl-empty{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:16px;padding:0 16px 30px;text-align:center;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border)}
.cl-empty .empty{padding:30px 0 2px;border:0;background:none}
.cl-empty__form{display:flex;gap:8px;width:min(100%,460px)}
.cl-empty__field{display:flex;flex:1;min-width:0;align-items:center;gap:8px;height:48px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--input-line);background:var(--input-bg);color:var(--text-3);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.cl-empty__field:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-wash)}
.cl-empty__field input{flex:1;min-width:0;height:100%;border:0;background:none;font-size:16px;color:var(--text)}
.cl-empty__field input:focus{outline:none}
.cl-empty__field input::placeholder{color:var(--text-3)}
.cl-empty__form .btn{flex:none}
.cl-empty__sug{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.cl-empty__sug .chip{height:36px;border:1px solid var(--gold-line);background:transparent;font-size:13px;color:var(--text)}
.cl-empty__sug .chip:hover{border-color:var(--gold);background:var(--gold-wash)}
.cl-pop{margin-top:32px}
@media (min-width:900px){.cl-empty{padding:0 24px 40px}.cl-empty .empty{padding-top:44px}.cl-empty .empty__art{height:190px}.cl-empty .empty__t{font-size:21px}.cl-empty .empty__d{font-size:14.5px}.cl-pop{margin-top:48px}}

/* =====================================================================
   4. 상세 틀 — 폰: 화면 끝까지 사진 → 정보 판 · PC: 사진 판 | 정보 판 (시안 A_product_pc 1 : 1.03, 사이 16)
   ===================================================================== */
.pd-crumbs{display:none}
.pdp .pd-layout{gap:12px}
@media (min-width:900px){
  .pd-crumbs{display:flex;margin-top:12px;font-size:12.5px}
  .pd-crumbs a:last-child{color:var(--text)}
  .pdp .pd-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.03fr);gap:16px;margin-top:12px;align-items:start}
}

/* 사진: 조명 받는 검정 무대(위에서 금빛 빛줄기 · 바닥 금빛 반사) — 흰 액자 없음 */
.pdp .gal{padding:0;border:0;border-radius:0;background:none;box-shadow:none;margin-inline:calc(var(--gut) * -1)}
.gal__frame{position:relative}
.pdp .gal__track{background:
  radial-gradient(38% 58% at 50% -8%,rgba(255,228,160,.42) 0%,rgba(201,162,74,.14) 46%,rgba(0,0,0,0) 78%),
  linear-gradient(104deg,rgba(0,0,0,0) 27%,rgba(243,210,122,.07) 33%,rgba(0,0,0,0) 39%),
  linear-gradient(76deg,rgba(0,0,0,0) 61%,rgba(243,210,122,.07) 67%,rgba(0,0,0,0) 73%),
  radial-gradient(70% 70% at 50% 0%,rgba(201,162,74,.10) 0%,rgba(0,0,0,0) 70%),
  radial-gradient(40% 9% at 50% 85%,rgba(243,210,122,.40) 0%,rgba(201,162,74,.10) 55%,rgba(0,0,0,0) 100%),
  linear-gradient(180deg,#14120E 0%,#0B0B0A 55%,#050505 100%)}
.pdp .gal__slide{aspect-ratio:1.62/1}
.pdp .gal__slide img,.pdp .gal__slide img[src*="/img/products/"]{padding:6% 10% 10%;mix-blend-mode:normal;filter:drop-shadow(0 16px 18px rgba(0,0,0,.75))}
.pdp .gal__slide img[src*="/cards/"]{padding:5% 30% 8%}
.gal__zoom{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:zoom-in}
.gal__expand{position:absolute;right:12px;top:12px;z-index:1;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:var(--gold-hi);
  background:rgba(10,10,10,.7);border:1px solid var(--gold-line);transition:border-color var(--t-fast),background-color var(--t-fast)}
.gal__expand:hover{border-color:var(--gold);background:rgba(10,10,10,.9)}
.pdp .gal__badges{left:12px;top:12px}
.gal.is-soldout .gal__slide img{opacity:.45;filter:grayscale(.7)}
/* 폰: 사진 안 아래 점(빈 원 · 지금 = 꽉 찬 금) */
.gal__dots{position:absolute;left:0;right:0;bottom:10px;z-index:1;display:flex;justify-content:center;gap:8px;pointer-events:none}
.gal__dots i{width:8px;height:8px;border-radius:50%;border:1px solid var(--gold-hi);background:transparent;opacity:.75;transition:background-color var(--t-fast),opacity var(--t-fast)}
.gal__dots i.is-on{background:var(--gold-hi);opacity:1}
.pdp .gal__thumbs{display:none}
@media (min-width:900px){
  .pdp .gal{position:sticky;top:calc(var(--hd) + 16px);margin:0;padding:12px 12px 18px;border:1px solid var(--gold-line);border-radius:var(--r-xs);background:linear-gradient(180deg,#0F0F0F,#0A0A0A)}
  .pdp .gal__slide{aspect-ratio:1.34/1}
  .pdp .gal__slide img,.pdp .gal__slide img[src*="/img/products/"]{padding:6% 12% 10%}
  .gal__dots{display:none}
  .pdp .gal__thumbs{position:static;transform:none;display:flex;gap:16px;margin:16px 0 0 18px}
  .pdp .gal__thumbs button{position:relative;width:108px;height:70px;padding:4px;border-radius:var(--r-xs);overflow:hidden;opacity:1;font-size:inherit;color:inherit;
    background:var(--well-grad);border:1px solid var(--border);transition:border-color var(--t-fast)}
  .pdp .gal__thumbs button:hover{border-color:var(--gold-line)}
  .pdp .gal__thumbs img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:normal}
  .pdp .gal__thumbs button[aria-current="true"]{border:1.5px solid var(--gold-hi);box-shadow:0 0 12px -2px rgba(243,210,122,.45)}
  .gal__expand{right:14px;top:14px;width:38px;height:38px}
}

/* =====================================================================
   5. 정보 판 (시안: 금빛 테두리 숯색 판 — 라벨 알약 → 금색 세리프 이름 → 설명 → 큰 가격 → 태그 → 정보 표 → 수량 → 총액·단추)
   ===================================================================== */
.pdp .pd{gap:0;align-content:start;padding:14px 14px 12px;border:1px solid var(--gold-line);border-radius:var(--r-md);background:linear-gradient(180deg,#121212,#0C0C0C)}
.pd-label{display:inline-flex;align-items:center;gap:6px;justify-self:start;height:26px;padding:0 13px;border-radius:var(--r-pill);border:1px solid var(--gold);
  font-size:11.5px;font-weight:500;letter-spacing:.02em;color:var(--text);white-space:nowrap;transition:background-color var(--t-fast)}
.pd-label:hover{background:var(--gold-wash)}
.pd-game{justify-self:start;font-size:var(--fs-sm);font-weight:600;color:var(--text-2);text-decoration:none}
.pd-game:hover{color:var(--gold-hi)}
.pd-label i{font-style:normal;color:var(--gold)}
.pdp .pd__title{margin-top:8px;font-family:var(--serif);font-size:22px;font-weight:700;line-height:1.32;letter-spacing:-.03em;overflow-wrap:anywhere;text-wrap:pretty;
  color:var(--heading);background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pdp .pd__sub{margin-top:4px;font-size:12.5px;line-height:1.55;color:var(--text-2)}
.pd-rate{display:inline-flex;align-items:center;gap:8px;justify-self:start;min-height:28px;margin-top:4px;font-size:12.5px;color:var(--text-2)}
.pd-rate b{font-family:var(--serif);font-size:14px;font-weight:600;color:var(--gold-hi)}
.pd-rate:hover span{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold-line)}
/* 가격: 큰 금색 세리프 → 정가 취소선 → 할인율 (한 줄) */
.pdp .price--lg{margin-top:6px;gap:2px 10px;align-items:baseline}
.pdp .price--lg .price__amt{order:0;flex-basis:auto;font-family:var(--serif);font-size:30px;font-weight:700;line-height:1.15;letter-spacing:-.01em;
  color:var(--price);background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pdp .price--lg .price__cur{margin-right:1px}
.pdp .price--lg .price__was{order:1;font-family:var(--serif);font-size:13px;color:var(--text-3)}
.pdp .price--lg .price__off{order:2;font-size:12.5px;font-weight:700;color:var(--gold-ink)}
/* 태그: 금 테두리 작은 알약 */
.pd-tags{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:8px}
.pd-tags li{display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:var(--r-pill);border:1px solid var(--gold);font-size:11.5px;font-weight:500;color:var(--text);white-space:nowrap}
/* 정보 표 — 폰: 아이콘 + 라벨/값 2칸, 사이 세로 금빛 선 */
.pd-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px;margin-top:12px;padding:12px 0;border-block:1px solid var(--gold-line)}
.pd-spec>div{position:relative;min-width:0;padding:0 8px 0 40px}
.pd-spec>div:nth-child(2n){border-left:1px solid var(--gold-line-2);padding-left:44px}
.pd-spec dt{font-size:12.5px;font-weight:700;line-height:1.4;color:var(--text)}
.pd-spec dt .ico{position:absolute;left:8px;top:2px;width:22px;height:22px;color:var(--gold);stroke-width:1.4}
.pd-spec>div:nth-child(2n) dt .ico{left:12px}
.pd-spec dd{margin-top:1px;font-size:11.5px;line-height:1.45;color:var(--text-2);overflow-wrap:anywhere}
.pd-spec small{font-size:inherit;color:var(--text-3);white-space:nowrap}
/* 제주·도서산간 추가 배송비 — 배송비 아래 한 줄 (QA VIS-03) */
.pd-spec .pd-shipx{display:block;white-space:normal}
/* 재고 상태 (넉넉하면 말 없이) */
.pd-stock{display:flex;align-items:flex-start;gap:8px;margin-top:12px;font-size:13px;line-height:1.5;color:var(--text-2)}
.pd-stock .ico{flex:none;margin-top:1px;color:var(--gold-ink)}
.pd-stock b{font-weight:700;color:var(--text)}
.pd-stock.is-low,.pd-stock.is-low b{color:var(--warn)}
.pd-stock.is-low .ico{color:var(--warn)}
.pd-stock.is-out{padding:12px 14px;border-radius:var(--r-md);background:var(--mute-wash);border:1px solid var(--line-soft);color:var(--text)}
.pd-stock.is-out .ico{color:var(--mute)}
.pd-stock.is-pre .ico{color:var(--info)}
/* 받는 방법: 숯색 옵션 칸 · 고른 것 = 금색 테두리 + 오른쪽 위 금색 원 체크(검정 체크) */
.pdp .blk__h{font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--text-2)}
.pd-how{margin-top:12px;gap:8px}
.pdp .fopt__box{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:center;align-items:center;column-gap:10px;row-gap:1px;min-height:56px;padding:9px 30px 9px 11px;
  background:var(--char-2);border:1px solid var(--line-soft)}
.pdp .fopt:hover .fopt__box{border-color:var(--gold-line)}
.pdp .fopt__ic{grid-row:1/3;color:var(--gold)}
.pdp .fopt__ic .ico{width:24px;height:24px}
.pdp .fopt__box>b,.pdp .fopt__box>small{grid-column:2}
.pdp .fopt__t{display:block;font-size:13px;color:var(--text)}
.pdp .fopt__d{display:block;font-size:11px;color:var(--text-3)}
.pdp .fopt__tag{display:none}
.pdp .fopt__mark{right:8px;top:8px;width:18px;height:18px;border:1px solid var(--line-2);background:transparent}
.pdp .fopt--live .fopt__ic{color:var(--gold)}
.pdp .fopt input:checked+.fopt__box{border-color:var(--gold);box-shadow:inset 0 0 0 .5px var(--gold);background:linear-gradient(180deg,rgba(201,162,74,.08),rgba(201,162,74,.02)),var(--char-2)}
.pdp .fopt input:checked+.fopt__box .fopt__mark{color:var(--on-gold);border-color:var(--gold);background:var(--gold-grad)}
.pdp .fopt input:checked+.fopt__box .fopt__ic{color:var(--gold-hi)}
.pdp .fulfil__note{margin-top:0;font-size:11.5px;color:var(--text-2)}
/* 수량: 라벨 왼쪽 · 금빛 테두리 알약 스테퍼 오른쪽 */
.pd-qty{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--gold-line)}
.pd-qty .blk__h{font-size:13.5px;font-weight:500;color:var(--text)}
.pdp .qty{grid-template-columns:42px minmax(36px,1fr) 42px;min-width:136px;height:40px;border-radius:var(--r-pill);border:1px solid var(--gold-line);background:rgba(10,10,10,.6)}
.pdp .qty button{color:var(--text)}
.pdp .qty button:hover{background:var(--gold-wash)}
.pdp .qty input{border-inline:0;font-size:16px;font-weight:600;color:var(--text)}
.pdp .qty input:focus{background:var(--gold-wash)}
.pdp .qty:focus-within{border-color:var(--gold)}
/* 총액 · 단추 (PC 만 — 폰은 아래 고정 구매 바) */
.pd-buy{display:none}
.pd-sum{display:flex;align-items:baseline;gap:14px;min-width:0}
.pd-sum>span{flex:none;font-size:13.5px;color:var(--text)}
.pd-sum b{font-family:var(--serif);font-size:28px;font-weight:700;line-height:1.1;letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums;
  color:var(--price);background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media (min-width:900px){
  .pdp .pd{position:relative;padding:22px 26px 20px;border-radius:var(--r-xs)}
  .pd-label{height:30px;padding:0 18px;font-size:14px}
  .pdp .pd__title{margin-top:12px;font-size:32px;line-height:1.28}
  .pdp .pd__sub{margin-top:8px;font-size:14px;color:var(--text)}
  .pd-rate{margin-top:6px;font-size:13.5px}
  .pdp .price--lg{margin-top:10px;gap:4px 14px}
  .pdp .price--lg .price__amt{font-size:46px;line-height:1.1}
  .pdp .price--lg .price__was{font-size:16px}
  .pdp .price--lg .price__off{font-size:14px}
  .pd-tags{gap:10px;margin-top:10px}
  .pd-tags li{height:24px;padding:0 14px;border-radius:2px;font-size:12px}
  /* PC 정보 표: 라벨 | 값 + 가로 금빛 선 (아이콘 없음) */
  .pd-spec{display:block;margin-top:14px;padding:0;border-bottom:0}
  .pd-spec>div,.pd-spec>div:nth-child(2n){display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;min-height:30px;padding:5px 2px;border-left:0;border-bottom:1px solid var(--gold-line-2)}
  .pd-spec dt{font-size:13px;font-weight:500;color:var(--text-2)}
  .pd-spec dt .ico{display:none}
  .pd-spec dd{margin:0;font-size:13px;color:var(--text)}
  .pd-spec small{color:var(--text-2)}
  /* 받는 방법 · 수량 = 정보 표처럼 왼쪽 라벨 칸(72px) | 오른쪽 */
  .pd-how{grid-template-columns:72px minmax(0,1fr);align-items:center;gap:0;margin-top:12px}
  .pd-how .blk__h{font-size:13px;color:var(--text-2)}
  .pdp .fopt__d{display:none}
  .pdp .fopt__box{min-height:44px;padding:8px 34px 8px 12px;column-gap:10px}
  .pdp .fopt__ic .ico{width:22px;height:22px}
  .pdp .fopt__t{font-size:14px}
  .pdp .fopt__d{font-size:11.5px}
  .pdp .fopt__mark{right:10px;top:10px}
  .pd-qty{justify-content:flex-start;gap:0;margin-top:14px;padding-top:0;border-top:0}
  .pd-qty .blk__h{width:72px;font-size:13px;color:var(--text-2)}
  .pdp .qty{height:32px;min-width:150px;grid-template-columns:34px minmax(60px,1fr) 34px;border-radius:var(--r-xs)}
  .pdp .qty input{border-inline:1px solid var(--gold-line-2);font-size:14px}
  .pd-buy{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-top:14px;padding-top:12px;border-top:1px solid var(--gold-line)}
  .pdp .pd__btns{display:grid;grid-template-columns:repeat(2,minmax(150px,170px));gap:12px;margin:0 0 0 auto}
  .pdp .pd__btns .btn{--btn-h:40px;gap:8px;padding:0 16px;font-size:14.5px;font-weight:600;border-radius:var(--r-xs)}
}
@media (min-width:900px) and (max-width:1199px){
  .pdp .pd{padding:18px 18px 16px}
  .pdp .pd__title{font-size:28px}
  .pdp .price--lg .price__amt{font-size:38px}
  .pd-spec>div,.pd-spec>div:nth-child(2n){grid-template-columns:96px minmax(0,1fr)}
  .pdp .pd .fulfil{grid-template-columns:minmax(0,1fr)}
  .pdp .pd__btns{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
}
/* 단추 결: 장바구니 = 투명 + 금 테두리 · 구매 = 금색 그라데이션 + 검정 글자 (상세·구매 바) */
:is(.pdp,.pd-bar) .btn--outline{color:var(--text);background:transparent;border:1px solid var(--gold)}
:is(.pdp,.pd-bar) .btn--outline:hover{background:var(--btn2-hover);border-color:var(--gold-hi)}
:is(.pdp,.pd-bar) .btn--outline .ico{color:var(--gold-hi)}
:is(.pdp,.pd-bar) .btn--primary{color:var(--btn-fg);background:var(--btn-bg);border:0;box-shadow:var(--glow-btn)}
:is(.pdp,.pd-bar) .btn--primary:hover{background:var(--btn-hover)}
:is(.pdp,.pd-bar) .btn--ghost{color:var(--text-2);background:var(--surface-3);border:1px solid var(--line-soft)}

/* =====================================================================
   6. 탭 — 폰: 금빛 테두리 상자 안 칸, 고른 칸 = 금색 바탕 검정 글자 · PC: 왼쪽부터 테두리 칸 + 고른 칸 금빛 아래 선
   ===================================================================== */
.pd-tabs{margin-top:14px;scroll-margin-top:calc(var(--hd) + 8px)}
.pd-tabbar{position:sticky;top:var(--hd);z-index:var(--z-sticky);gap:4px;padding:4px;border:1px solid var(--gold-line);border-radius:var(--r-md);
  background:rgba(10,10,10,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pd-tabbar [role="tab"]{flex:1 1 0;min-width:0;justify-content:center;gap:3px;height:40px;padding:0 4px;border-radius:6px;font-size:14px;font-weight:500;color:var(--text)}
.pd-tabbar [role="tab"]:hover{color:var(--gold-hi)}
.pd-tabbar [aria-selected="true"]{color:var(--on-gold);font-weight:700;background:var(--gold-grad)}
.pd-tabbar [aria-selected="true"]:hover{color:var(--on-gold)}
.pd-tabbar [aria-selected="true"]::after{display:none}
.pd-tabn{font-size:.82em;font-weight:inherit;opacity:.8;font-variant-numeric:tabular-nums}
.tabpanel:focus{outline:none}
.pd-tabs .tabpanel{padding-top:12px;scroll-margin-top:calc(var(--hd) + 64px)}   /* 주소 끝 #p-cards 로 열 때 붙는 탭 줄 아래로 */
@media (max-width:399px){.pd-tabbar [role="tab"]{font-size:13px;letter-spacing:-.03em}.pd-tabn{display:none}}
@media (min-width:900px){
  .pd-tabs{margin-top:16px}
  .pd-tabbar{position:static;gap:0;padding:0;overflow:visible;border:0;border-bottom:1px solid var(--gold-line);border-radius:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  /* 칸은 206px — 다섯 칸이 다 안 들어가는 폭(900~1072, 태블릿 가로·작은 노트북)에서만 똑같이 줄어 화면 안에 다 보인다(페이지가 옆으로 밀리지 않게) */
  .pd-tabbar [role="tab"]{flex:0 1 206px;height:38px;margin-right:-1px;border:1px solid var(--border);border-bottom:0;border-radius:0;font-size:14px;color:var(--text-2);
    background:linear-gradient(180deg,#121212,#0B0B0B)}
  .pd-tabbar [role="tab"]:hover{color:var(--text)}
  .pd-tabbar [aria-selected="true"],.pd-tabbar [aria-selected="true"]:hover{z-index:1;color:var(--text);border-color:var(--gold-line);background:linear-gradient(180deg,rgba(201,162,74,.03) 0%,rgba(201,162,74,.22) 100%)}
  .pd-tabbar [aria-selected="true"]::after{display:block;left:0;right:0;bottom:-1px;height:2px;background:var(--gold-grad-h);box-shadow:0 0 12px rgba(243,210,122,.55)}
  .pd-tabs .tabpanel{padding:20px 24px 34px;border:1px solid var(--border);border-top:0;background:rgba(10,10,10,.4);scroll-margin-top:calc(var(--hd) + 60px)}
}

/* 주요 수록 카드 미리보기 (시안: 금빛 선 머리 + '전체 카드 보기 →' · 카드 + 등급 태그) */
.pd-pv{margin-bottom:24px;padding:12px 10px 10px;border:1px solid var(--gold-line);border-radius:var(--r-md);background:linear-gradient(180deg,#121212,#0C0C0C)}
.pd-pv__head{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;margin:0 2px 10px}   /* 좁은 폰: 자리가 모자라면 '전체 카드 보기'가 다음 줄 오른쪽으로 (LAST1-2) */
.pd-pv__t{flex:none;font-size:14px;font-weight:600;letter-spacing:-.02em;color:var(--text)}
.pd-pv__line{display:none}
.pd-dex{display:inline-flex;align-items:center;gap:4px;min-height:32px;margin-left:auto;font-size:12.5px;font-weight:600;color:var(--gold-hi);white-space:nowrap}
.pd-dex:hover .pd-dex__t{text-decoration:underline;text-underline-offset:3px}
.pd-dex>.ico{flex:none}
.pd-dex__fan{position:relative;flex:none;width:34px;height:26px;margin-right:4px}
.pd-dex__fan img{position:absolute;bottom:0;left:9px;width:17px;height:auto;aspect-ratio:240/335;object-fit:cover;border-radius:1px;box-shadow:0 0 0 1px var(--gold-line),0 2px 5px rgba(0,0,0,.6);transform-origin:50% 100%}
.pd-dex__fan img:nth-child(1){z-index:2}
.pd-dex__fan img:nth-child(2){left:1px;transform:rotate(-12deg)}
.pd-dex__fan img:nth-child(3){left:17px;transform:rotate(12deg)}
.pd-dex__fan.is-empty{display:grid;place-items:center;width:26px;color:var(--gold)}
.pd-pv__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.pd-pv__card{display:grid;align-content:start;gap:5px;min-width:0;padding:6px 5px 6px;border-radius:6px;background:#0E0E0E;border:1px solid var(--border)}
.pd-pv__pic{position:relative;display:block;aspect-ratio:240/335;overflow:hidden;border-radius:3px;background:var(--well)}
.pd-pv__pic img{display:block;width:100%;height:100%;object-fit:contain}
.pd-pv__ph{position:absolute;inset:0;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c.9 4.9 2.6 6.6 7.5 7.5-4.9.9-6.6 2.6-7.5 7.5-.9-4.9-2.6-6.6-7.5-7.5 4.9-.9 6.6-2.6 7.5-7.5z' fill='%23C9A24A' fill-opacity='.6'/%3E%3C/svg%3E") 50% 46%/22px no-repeat,
  repeating-linear-gradient(135deg,rgba(201,162,74,.05) 0 6px,transparent 6px 12px),linear-gradient(165deg,#171512,#0B0B0B);
  box-shadow:inset 0 0 0 1px var(--border)}
.pd-pv__card{position:relative}
.pd-pv__cap{display:block;min-width:0}
.pd-pv__cap>span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;color:var(--text-2)}
/* 등급 태그 = 카드 그림 왼쪽 위에 얹는다 */
.pd-pv__cap .dex-r{position:absolute;left:8px;top:9px;z-index:1;min-width:0;height:16px;padding:0 5px;font-size:9.5px;box-shadow:0 1px 4px rgba(0,0,0,.6)}
/* 360px(흔한 안드로이드)은 사이를 조금 좁혀 지금처럼 한 줄 — 그보다 좁으면 위 줄바꿈으로 */
@media (max-width:374px){.pd-pv__head{column-gap:8px}.pd-dex{gap:3px}.pd-dex__fan{margin-right:2px}}
@media (min-width:600px){.pd-pv__grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:900px){
  .pd-pv{margin-bottom:32px;padding:0;border:0;border-radius:0;background:none}
  .pd-pv__head{gap:12px;margin:0 0 16px}
  .pd-pv__head::before{content:"";flex:none;width:12px;height:1px;background:var(--gold)}
  .pd-pv__t{font-size:15px}
  .pd-pv__line{display:block;flex:1;height:1px;background:var(--gold-line-2)}
  .pd-dex{margin-left:0;font-size:12px;font-weight:500;color:var(--text)}
  .pd-dex>.ico{color:var(--gold-hi)}
  .pd-pv__grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:20px;padding:0 6px}
  .pd-pv__card{padding:0;border:0;background:none}
  .pd-pv__pic{border-radius:6px;box-shadow:0 0 0 1px var(--gold-line),0 10px 22px -10px rgba(0,0,0,.9)}
  .pd-pv__cap>span{display:none}
  .pd-pv__cap .dex-r{left:6px;top:6px;height:18px;padding:0 6px;font-size:10.5px}
}

/* 상세 설명 · 고시 · 배송 안내 */
.pd-body{max-width:880px;margin-inline:auto}
.pd__desc{color:var(--text-2)}
.pd__desc p{white-space:normal}
.pdp .pd__desc img{margin-inline:auto;max-width:min(100%,640px);padding:4%;border:1px solid var(--border);border-radius:var(--r-md);background:var(--well-grad)}
.pd-notice-sec{margin-top:32px}
.pd-h{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-family:var(--serif);font-size:16.5px;font-weight:600;letter-spacing:-.02em;color:var(--heading)}
.pd-h .ico{color:var(--gold)}
.pd-notice{width:100%;border-top:1px solid var(--gold-line);font-size:13px;line-height:1.55}
.pd-notice th,.pd-notice td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--gold-line-2)}
.pd-notice th{width:36%;font-weight:600;color:var(--text-2);background:var(--surface-2)}
.pd-notice td{color:var(--text);overflow-wrap:anywhere}
.pd-guide section+section{margin-top:28px}
.pd-kv{display:grid;gap:8px;padding:14px 16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border)}
.pd-kv>div{display:flex;gap:12px;font-size:13.5px;line-height:1.5}
.pd-kv dt{flex:none;width:56px;color:var(--text-3)}
.pd-kv dd{min-width:0;color:var(--text)}
.pd-list{display:grid;gap:8px;font-size:13.5px;line-height:1.65;color:var(--text-2)}
.pd-list li{position:relative;padding-left:16px}
.pd-list li::before{content:"";position:absolute;left:2px;top:.66em;width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}
.pd-more{margin-top:20px}
.pd-more a{display:inline-flex;align-items:center;gap:2px;min-height:40px;font-size:13.5px;font-weight:600;color:var(--gold-hi)}
.pd-more a:hover{color:var(--text)}
@media (min-width:900px){
  .pd-h{font-size:19px}
  .pd-notice-sec{margin-top:48px}
  .pd-notice{font-size:14px}
  .pd-notice th,.pd-notice td{padding:12px 16px}
  .pd-kv>div,.pd-list{font-size:14.5px}
  .pd__desc{font-size:15px}
}

/* ── 7. 후기: 평균·나눠 보기 · 쓰기 · 목록 (숯색 판) ── */
.rv-top{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.rv-sum{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:20px;padding:16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border)}
.rv-sum__avg{display:grid;justify-items:center;gap:4px;min-width:96px;text-align:center}
.rv-sum__avg b{font-family:var(--serif);font-size:40px;font-weight:700;line-height:1;color:var(--price)}
.rv-sum__avg small{font-size:12px;color:var(--text-3)}
.rv-sum .stars--lg{width:96px;height:17px;-webkit-mask-size:19.2px 17px;mask-size:19.2px 17px}
.rv-dist{display:grid;gap:5px}
.rv-dist li{display:grid;grid-template-columns:28px minmax(0,1fr) 26px;align-items:center;gap:8px;font-size:11.5px;color:var(--text-3)}
.rv-dist__bar{position:relative;height:6px;overflow:hidden;border-radius:var(--r-pill);background:var(--surface-3)}
.rv-dist__bar i{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:var(--gold-grad-h)}
.rv-dist__n{text-align:right;color:var(--text-2)}
.rv-form{display:grid;gap:12px;padding:16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--gold-line-2);scroll-margin-top:48px}
/* ↑ (QA VIS-08) ?write_review= 로 열면 폼으로 스크롤한다(catalog.js) — 폰은 탭 줄(높이 50px)이 머리 밑에 붙어 있어,
     html scroll-padding-top(머리 + 16px)에 48px 를 더해 폼 제목이 탭 줄 아래 14px 에 오게. PC 는 탭 줄이 안 붙어 0 */
.rv-form__t{display:flex;align-items:center;gap:6px;font-family:var(--serif);font-size:16px;font-weight:600;color:var(--heading)}
.rv-form__t .ico{color:var(--gold)}
.rv-form .textarea{min-height:120px;color:var(--text);background:var(--input-bg);border-color:var(--input-line)}
.rv-form .textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-wash)}
.rv-stars{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.rv-stars legend{float:left;width:100%;margin-bottom:4px;font-size:12.5px;font-weight:600;color:var(--text-2)}
.rv-stars__row{display:inline-flex;flex-direction:row-reverse;gap:2px}
.rv-stars__row input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.rv-stars__row label{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-sm);cursor:pointer;color:#4A453B}
.rv-stars__row label .ico{fill:currentColor;stroke:none;transition:transform var(--t-fast)}
.rv-stars__row input:checked~label{color:var(--gold)}
.rv-stars__row:hover input~label{color:#4A453B}
.rv-stars__row:hover label:hover,.rv-stars__row:hover label:hover~label{color:var(--gold-hi)}
.rv-stars__row label:hover .ico{transform:scale(1.1)}
.rv-stars__row input:focus-visible+label{outline:2px solid var(--focus);outline-offset:-2px}
.rv-stars__say{font-size:13px;font-weight:600;color:var(--gold-ink)}
/* 후기 적립 조건 한 줄 (적립금이 켜져 있을 때만 — QA VIS-02) */
.rv-form__perk{display:flex;align-items:flex-start;gap:6px;margin:0;font-size:13px;line-height:1.5;color:var(--text-2)}
.rv-form__perk .ico{flex:none;margin-top:2px;color:var(--gold)}
.rv-form__foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rv-form .btn--primary{color:var(--btn-fg);background:var(--btn-bg);border:0}
.rv-gate{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border)}
.rv-gate>div{display:grid;flex:1;min-width:180px;gap:2px}
.rv-gate b{font-size:14px;font-weight:700;color:var(--text)}
.rv-gate span{font-size:12.5px;color:var(--text-2)}
.rv-gate__ic{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;color:var(--gold-hi);background:var(--gold-wash);border:1px solid var(--gold-line)}
.rv-list{margin-top:16px;border-top:1px solid var(--gold-line)}
.rv{padding:16px 0;border-bottom:1px solid var(--gold-line-2)}
.rv__top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.rv__who{font-size:13px;font-weight:700;color:var(--text)}
.rv__top .pill{height:20px;padding:0 8px;font-size:11px;color:var(--on-gold);background:var(--gold-grad);border:0}
.rv__top time{margin-left:auto;font-size:12px;color:var(--text-3)}
.rv__body{margin-top:8px;font-size:14px;line-height:1.65;color:var(--text);white-space:pre-line;overflow-wrap:anywhere}
.rv-more{margin-top:16px}
.pdp .empty{background:var(--surface);border-color:var(--border)}
@media (min-width:900px){
  .rv-top{grid-template-columns:340px minmax(0,1fr);align-items:stretch;gap:16px}
  .rv-sum{grid-template-columns:minmax(0,1fr);align-content:center;gap:20px;padding:20px 24px}
  .rv-sum__avg b{font-size:52px}
  .rv-dist li{font-size:12.5px}
  .rv-form,.rv-gate{padding:20px}
  .rv-form{scroll-margin-top:0}
  .rv__body{font-size:15px}
}

/* ── 8. 추천 줄 (폰 가로 밀기 · PC 4칸) ── */
.pd-rel{margin-top:36px}
@media (min-width:900px){.pd-rel{margin-top:56px}.pd-rel .pgrid>li:nth-child(n+5){display:none}}

/* ── 9. 폰 하단 구매 바 (시안 A_product_m: 검정 바 + 위 금빛 선 · [장바구니] 금 테두리 | [구매하기] 금색) — 틀은 공용 .buybar ── */
.pd-bar{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding-top:10px;background:rgba(8,8,8,.96);border-top:1px solid var(--gold-line);box-shadow:var(--sh-float)}
.pd-bar .btn{--btn-h:50px;gap:8px;padding:0 12px;font-size:16px;font-weight:700;border-radius:var(--r-md)}

/* ── 10. 사진 크게 보기 (dialog — 검정 무대) ── */
.pd-zoom{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;color:var(--text);background:var(--bg) var(--texture) repeat;background-size:640px 640px}
.pd-zoom::backdrop{background:var(--scrim)}
.pd-zoom[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.pd-zoom__bar{display:flex;align-items:center;justify-content:space-between;padding:calc(8px + env(safe-area-inset-top)) 8px 8px 16px;border-bottom:1px solid var(--gold-line-2)}
.pd-zoom__bar .ibtn{color:var(--text)}
.pd-zoom__n{font-family:var(--serif);font-size:14px;color:var(--text-2)}
.pd-zoom__n b{color:var(--gold-hi)}
.pd-zoom__stage{position:relative;display:grid;place-items:center;overflow:auto;overscroll-behavior:contain;padding:12px 16px 0}
.pd-zoom__stage img{width:auto;max-width:min(100%,960px);max-height:calc(100vh - 150px);height:auto;object-fit:contain;padding:8px;background:var(--well-grad);border:1px solid var(--border);border-radius:var(--r-md);cursor:zoom-in}
.pd-zoom.is-zoomed .pd-zoom__stage{place-items:start;padding:0}
.pd-zoom.is-zoomed .pd-zoom__stage img{max-width:none;max-height:none;padding:0;border:0;border-radius:0;cursor:zoom-out}
.pd-zoom__nav{position:absolute;top:50%;width:48px;height:48px;margin-top:-24px;display:grid;place-items:center;border-radius:50%;color:var(--gold-hi);
  background:rgba(10,10,10,.8);border:1px solid var(--gold-line);transition:background-color var(--t-fast),border-color var(--t-fast)}
.pd-zoom__nav:hover{border-color:var(--gold);background:var(--char-2)}
.pd-zoom__nav--prev{left:8px}
.pd-zoom__nav--next{right:8px}
.pd-zoom.is-zoomed .pd-zoom__nav{display:none}
.pd-zoom__hint{padding:8px 16px calc(16px + env(safe-area-inset-bottom));text-align:center;font-size:12px;color:var(--text-3)}
@media (min-width:900px){.pd-zoom__nav--prev{left:24px}.pd-zoom__nav--next{right:24px}}

/* =====================================================================
   11. 수록 카드 — '이 상품에서 나오는 카드' (catalog/_cardlist.html · [수록 카드] 탭)
   결: 머리 = 숯색 판(금색 Cinzel 'CARD LIST' + 금색 세리프 세트 이름) · 칩 = 금빛 선 알약, 고르면 금색 바탕 검정 글자 · 묶음 = 숯색 판 · 타일 = 어두운 칸 + 금빛 테두리
   등급 태그: 높은 등급(top) = 금색 · 중간(mid) = 보라 · red = 파랑 · 나머지 = 회색 (시안 A_product_m: UR 금 · SR 보라 · R 파랑 · C 회색)
   타일 3열(폰) → 4(600) → 5(900) → 6(1200). 화면 밖 타일은 content-visibility 로 그리지 않는다(300장 세트).
   ===================================================================== */
.dex-r{display:inline-grid;place-items:center;flex:none;min-width:26px;height:18px;padding:0 5px;border-radius:var(--r-xs);font-style:normal;font-size:10px;font-weight:800;line-height:1;letter-spacing:.03em;white-space:nowrap}
.dex-r--top{color:var(--on-gold);background:var(--gold-grad)}
.dex-r--mid{color:var(--text);background:#7A58D0}
.dex-r--red{color:var(--text);background:#3A66CC}
.dex-r--base{color:var(--text-2);background:#3A3936}

.dex{display:grid;gap:12px;min-width:0}
.dex__head{display:grid;justify-items:center;gap:6px;padding:20px 16px 18px;text-align:center;border-radius:var(--r-md);
  background:radial-gradient(70% 90% at 50% 0%,rgba(201,162,74,.12),rgba(0,0,0,0) 70%),var(--surface);border:1px solid var(--gold-line)}
.dex__k{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:var(--track-caps);color:var(--gold-ink)}
.dex__k .ico{color:var(--gold)}
.dex__t{max-width:100%;font-family:var(--serif);font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-.03em;color:var(--heading);overflow-wrap:anywhere;text-wrap:balance}
.dex__d{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 8px;font-size:12px;color:var(--text-2)}
.dex__n{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--r-pill);border:1px solid var(--gold-line);background:var(--gold-wash);font-weight:700;color:var(--gold-hi)}

/* 등급 칩 (폰: 가로로 밀기 · 600 부터: 줄바꿈 가운데) */
.dex__chips{position:relative;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;margin-inline:calc(var(--gut) * -1);padding:3px var(--gut) 5px}
.dex__chips::-webkit-scrollbar{display:none}
.dex-chip{position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 9px;border-radius:var(--r-pill);border:1px solid var(--gold-line);
  background:transparent;font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;transition:border-color var(--t-fast),background-color var(--t-fast),color var(--t-fast)}
.dex-chip::after{content:"";position:absolute;inset:-3px 0}   /* 누르는 칸 46px */
.dex-chip[data-dex-chip="all"]{padding-left:15px}
.dex-chip b{font-weight:800;color:var(--gold-hi);font-variant-numeric:tabular-nums}
.dex-chip:hover{border-color:var(--gold);background:var(--gold-wash)}
.dex-chip[aria-pressed="true"]{color:var(--on-gold);border-color:transparent;background:var(--gold-grad)}
.dex-chip[aria-pressed="true"] b{color:var(--on-gold)}
.dex-chip[aria-pressed="true"] .dex-r{box-shadow:0 0 0 1px rgba(23,17,10,.35)}

/* 묶음 */
.dex-grp{padding:4px 12px 12px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border)}
.dex-grp[hidden],.dex-grid[hidden]{display:none}
.dex-grp--top{background:linear-gradient(180deg,rgba(201,162,74,.10),rgba(0,0,0,0) 140px),var(--surface);border-color:var(--gold-line)}
.dex-grp.is-folded{padding-bottom:4px}
.dex-grp__bar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px}
.dex-grp__h{display:flex;align-items:center;gap:8px;min-width:0;font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--text)}
.dex-grp__h>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dex-grp__h small{flex:none;font-family:var(--font);font-size:12px;font-weight:600;color:var(--text-3)}
.dex-grp__h .dex-r{height:22px;min-width:32px;padding:0 6px;font-family:var(--font);font-size:11px}
.dex-grp__fold{flex:none;display:inline-flex;align-items:center;gap:2px;height:36px;padding:0 9px 0 13px;border-radius:var(--r-pill);border:1px solid var(--line-2);
  font-size:12.5px;font-weight:600;color:var(--text);transition:border-color var(--t-fast),background-color var(--t-fast)}
.dex-grp__fold:hover{border-color:var(--gold);background:var(--gold-wash)}
.dex-grp__fold .ico{color:var(--gold-hi);transition:transform var(--t) var(--ease)}
.dex-grp__fold[aria-expanded="true"] .ico{transform:rotate(180deg)}
.dex-grp__fold[aria-expanded="true"] .dex-grp__shut,.dex-grp__fold[aria-expanded="false"] .dex-grp__open{display:none}
.dex-grp.is-folded .dex-grp__fold{border-color:var(--gold-line)}

/* 타일 = 어두운 칸 + 금빛 머리카락 테두리 */
.dex-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:4px}
.dex-tile{display:grid;align-content:start;gap:5px;min-width:0;padding:5px 5px 8px;border-radius:6px;background:#0E0E0E;border:1px solid var(--border);
  content-visibility:auto;contain-intrinsic-size:auto 200px;transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast)}
.dex-grp--top .dex-tile{border-color:var(--gold-line)}
.dex-pic{position:relative;display:block;aspect-ratio:240/335;border-radius:3px;overflow:hidden;background:var(--well)}
.dex-pic img{display:block;width:100%;height:100%;object-fit:contain}
.dex-pic--wide{aspect-ratio:240/172}   /* 가로 카드(리프트바운드 전장) — 세로 칸에 넣으면 위아래가 비어서 칸을 카드 모양대로 */
/* 썸네일이 없을 때 자리 그림 = 카드 뒷면 결(금색 반짝이 + 숯색 + 옅은 금빛 빗금) — 그림 파일 없이 CSS 만 */
.dex-pic--ph{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c.9 4.9 2.6 6.6 7.5 7.5-4.9.9-6.6 2.6-7.5 7.5-.9-4.9-2.6-6.6-7.5-7.5 4.9-.9 6.6-2.6 7.5-7.5z' fill='%23C9A24A' fill-opacity='.6'/%3E%3C/svg%3E") 50% 46%/22px no-repeat,
  repeating-linear-gradient(135deg,rgba(201,162,74,.05) 0 6px,transparent 6px 12px),linear-gradient(165deg,#171512,#0B0B0B);
  box-shadow:inset 0 0 0 1px var(--border),inset 0 0 0 5px #0E0E0E,inset 0 0 0 6px var(--gold-line-2)}
.dex-no{display:flex;align-items:center;justify-content:space-between;gap:4px;min-width:0;padding:0 1px;font-size:10.5px;font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums}
.dex-no>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dex-no .dex-r{min-width:0;height:16px;padding:0 4px;font-size:9.5px}
.dex-nm{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.6em;padding:0 1px;font-size:12px;font-weight:600;line-height:1.3;letter-spacing:-.03em;color:var(--text);overflow-wrap:anywhere}
.dex__note{display:flex;align-items:flex-start;gap:6px;padding:0 4px;font-size:11.5px;line-height:1.5;color:var(--text-3)}
.dex__note .ico{flex:none;margin-top:2px;color:var(--gold)}

@media (max-width:599px){
  .dex-no--long .dex-r{display:none}   /* 'OP09-118_P1' 처럼 긴 번호: 폰 3열에선 번호를 다 보이고 배지는 묶음 머리에 맡긴다 */
}
@media (min-width:600px){
  .dex-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dex__chips{flex-wrap:wrap;justify-content:center;overflow:visible;margin:0;padding:2px 0}
}
@media (min-width:900px){
  .dex{gap:16px}
  .dex__head{gap:8px;padding:28px 24px 24px}
  .dex__k{font-size:13px}
  .dex__t{font-size:28px}
  .dex__d{font-size:14px}
  .dex__n{height:28px;padding:0 12px}
  .dex__chips{gap:6px}
  .dex-chip{height:42px;padding:0 12px 0 8px;font-size:13.5px}
  .dex-chip[data-dex-chip="all"]{padding-left:14px}
  .dex-grp{padding:8px 20px 20px}
  .dex-grp.is-folded{padding-bottom:8px}
  .dex-grp__bar{min-height:58px}
  .dex-grp__h{font-size:17px}
  .dex-grp__fold{height:38px;font-size:13.5px}
  .dex-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
  .dex-tile{gap:7px;padding:7px 7px 11px;contain-intrinsic-size:auto 300px}
  .dex-tile:hover{border-color:var(--gold);box-shadow:var(--gold-glow);transform:translateY(-2px)}
  .dex-no{font-size:12px}
  .dex-no .dex-r{height:18px;font-size:10.5px}
  .dex-nm{font-size:13.5px}
  .dex__note{font-size:13px}
}
@media (min-width:1200px){.dex-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.dex-tile,.dex-grp__fold .ico,:is(.cl-grid,.pd-rel) .pcard__img img{transition:none}.dex-tile:hover{transform:none}}

/* =====================================================================
   상품 문의 [문의] 탭 (2026-10-29 쇼핑몰 주변 — catalog/detail.html #p-qna · services/community.py)
   후기 탭과 같은 결: 위 = 안내 | 쓰기 판(숯색 + 금빛 테두리) · 아래 = 금빛 선 목록
   줄 = [답변 완료(금색) / 답변 기다림(흐림)] [비밀] 가린 이름 · 날짜 → Q 글 → A 답변(금빛 왼쪽 선 판)
   ===================================================================== */
.qna-top{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.qna-intro .pd-h{margin-bottom:6px}
.qna-intro__d{font-size:13px;line-height:1.6;color:var(--text-2)}
.qna-intro__d b{font-weight:700;color:var(--gold-ink)}
.qna-form{display:grid;gap:10px;padding:14px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--gold-line-2)}
.qna-form .textarea{min-height:96px}
.qna-form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.qna-secret{min-height:44px;font-size:13.5px}
.qna-secret>span:last-child{display:inline-flex;align-items:center;gap:4px}
.qna-secret>span:last-child .ico{color:var(--gold)}
.qna-secret small{font-size:12px;color:var(--text-3)}
.qna-form__n{margin-left:auto;font-size:12px}
.qna-form__go{min-height:44px}
.qna-list{margin-top:16px;border-top:1px solid var(--gold-line)}
.qna{padding:14px 0;border-bottom:1px solid var(--gold-line-2);scroll-margin-top:calc(var(--hd) + 64px)}
.qna:target{animation:qna-flash 2.4s ease-out}
@keyframes qna-flash{from{background:var(--gold-wash)}to{background:transparent}}
.qna__top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.qna__st{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--r-pill);font-size:11.5px;font-weight:700;
  color:var(--text-2);background:var(--surface-3);border:1px solid var(--line-soft)}
.qna__st.is-done{color:var(--on-gold);background:var(--gold-grad);border-color:transparent}
.qna__lock{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:600;color:var(--gold-ink)}
.qna__who{font-size:13px;font-weight:700;color:var(--text)}
.qna__top .pill{height:20px;padding:0 8px;font-size:11px}
.qna__top time{margin-left:auto;font-size:12px;color:var(--text-3)}
.qna__q{display:flex;gap:8px;margin-top:8px;font-size:14px;line-height:1.65;color:var(--text);overflow-wrap:anywhere}
.qna__q--lock{align-items:center;color:var(--text-3);font-size:13px}
.qna__q--lock .ico{color:var(--gold)}
.qna__mk{flex:none;width:22px;height:22px;display:grid;place-items:center;margin-top:1px;border-radius:50%;font:700 12px/1 var(--display);font-style:normal;
  color:var(--gold-hi);border:1px solid var(--gold-line)}
.qna__mk--a{color:var(--on-gold);background:var(--gold-grad);border-color:transparent}
.qna__a{display:flex;gap:8px;margin-top:10px;padding:12px;border-radius:var(--r-sm);background:var(--surface-2);border-left:2px solid var(--gold)}
.qna__a p{font-size:13.5px;line-height:1.65;color:var(--text);overflow-wrap:anywhere}
.qna__a small{display:block;margin-top:4px;font-size:11.5px;color:var(--text-3)}
.qna__del{margin-top:8px;text-align:right}
.qna-more{margin-top:12px}
@media (min-width:900px){
  .qna-top{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:start;gap:20px}
  .qna-form{padding:16px}
  .qna__q{font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){.qna:target{animation:none;box-shadow:inset 3px 0 0 var(--gold)}}

/* =====================================================================
   (2026-10-29 P 쇼핑몰 완성) 공유 · 오픈 예정 · 카드 상태 · 재입고 자리 · 후기 사진/답글 · 목록 거르기 칩
   색은 tokens.css 의미 토큰만 — 밝은 판([data-theme="light"])도 저절로 맞는다.
   ===================================================================== */
.pd-titlerow{display:flex;align-items:flex-start;gap:10px}
.pd-titlerow .pd__title{flex:1;min-width:0}
.pd-share{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;margin-top:4px;padding:0;border-radius:var(--r-pill);border:1px solid var(--gold-line);
  background:transparent;color:var(--gold-ink);cursor:pointer;transition:border-color var(--t-fast),background-color var(--t-fast)}
.pd-share:hover{border-color:var(--gold);background:var(--gold-wash);color:var(--gold-hi)}
.pd-share:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.pd-spec small{white-space:normal}
.pd-spec__cond b{font-weight:700;color:var(--gold-ink)}
/* 오픈 예정 띠 */
.pd-soon{display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--gold);background:var(--gold-wash);color:var(--text)}
.pd-soon>.ico{flex:none;margin-top:1px;color:var(--gold-ink)}
.pd-soon>div{display:grid;gap:2px;min-width:0}
.pd-soon b{font-size:15px;font-weight:700;color:var(--gold-ink)}
.pd-soon span{font-size:12.5px;line-height:1.5;color:var(--text-2)}
.pd-soon__left{font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
.pdp .pd__wait,.pd-bar__soon{gap:6px}
/* (QA J1-4) 1인 누적 한도를 다 산 회원: 이유 한 줄의 아이콘 = 금색 · PC 단추 자리는 두 칸 폭(글이 길어서) */
.pd-stock.pd-stock--done .ico{color:var(--gold-ink)}
.pdp .pd__btns .pd__done{grid-column:span 2}
.pd-bar__soon{grid-column:2/-1;font-size:14.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--gold-ink)!important;border-color:var(--gold)!important}
.pd-restock:empty{display:none}
.pd-restock{margin-top:10px}
/* 후기 사진 고르기 */
.rv-photo{display:grid;gap:8px}
.rv-photo__add{position:relative;display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 12px;border-radius:var(--r-md);border:1px dashed var(--gold-line);
  background:var(--surface-2);color:var(--text);cursor:pointer}
.rv-photo__add:hover{border-color:var(--gold)}
.rv-photo__add:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.rv-photo__add b{font-size:13.5px;font-weight:700}
.rv-photo__add small{font-size:12px;color:var(--text-3)}
.rv-photo__ic{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:var(--gold-wash);color:var(--gold-ink)}
.rv-photo__add input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.rv-photo__list{display:flex;flex-wrap:wrap;gap:8px}
.rv-photo__list:empty{display:none}
.rv-photo__list img{width:64px;height:64px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--gold-line-2)}
.rv-photo__msg{font-size:12.5px;color:var(--warn)}
.rv-photo__bad{display:flex;align-items:center;min-height:64px;max-width:100%;padding:0 10px;border-radius:var(--r-sm);border:1px dashed var(--line-2);font-size:12px;color:var(--warn)}
/* 후기 목록: 사진 · 가게 답글 */
.rv__pics{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.rv__pic{display:block;width:88px;height:88px;padding:0;overflow:hidden;border-radius:var(--r-sm);border:1px solid var(--gold-line-2);background:var(--img-well);cursor:zoom-in}
.rv__pic img{width:100%;height:100%;object-fit:cover}
.rv__pic:hover{border-color:var(--gold)}
.rv__pic:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.rv__reply{display:grid;gap:4px;margin-top:10px;padding:10px 12px;border-left:3px solid var(--gold);border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--surface-2)}
.rv__reply b{font-size:12.5px;font-weight:700;color:var(--gold-ink)}
.rv__reply p{font-size:13.5px;line-height:1.6;color:var(--text);overflow-wrap:anywhere}
.rv__reply small{font-size:11.5px;color:var(--text-3)}
.rv-zoom{max-width:min(92vw,900px);max-height:92vh;padding:0;border:1px solid var(--gold-line);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.rv-zoom::backdrop{background:var(--scrim)}
.rv-zoom img{display:block;max-width:100%;max-height:88vh;margin:auto;object-fit:contain}
.rv-zoom__x{position:absolute;top:6px;right:6px;z-index:1;color:var(--text);background:var(--surface);border-radius:50%}
/* 목록: 오픈 예정 띠 · 카드 상태 칩은 카드 안(ui.product_card · app.css .pcard__soon/.pcard__cond) */
.cl-li{position:relative}
.pd-bar .btn.pd-bar__soon,.pdp .btn.pd__wait{opacity:1;filter:none}