@charset "utf-8";
/* =====================================================================
   CROWN TCG 쇼핑몰 공용 컴포넌트 · app.css   (tokens.css 다음에 읽는다)
   디자인 정답 = 힉스필드 시안 A '로열 누아르' (design/DESIGN.md · ../design/hf/A_*.png). 규칙보다 시안이 이긴다.
   - 바탕 순검정 + 아주 옅은 벨벳 질감(body.shop) · 판 = 숯색 + 1px 금빛 머리카락 선 · 글자 따뜻한 흰색.
   - 큰 제목·섹션 제목·가격 = 금색 세리프 · 주 버튼 = 금색 그라데이션 + 검정 글자(--on-gold) · 보조 = 금 테두리 + 금 글자.
   - 상품 사진 칸 = 어두운 칸에 위에서 금빛 조명(--well-grad). 흰 액자·흰 판·흰 원 없음.
   - 빨강은 LIVE(방송 중) 표시와 NEW 알약에만(--live).
   - 색은 tokens.css 의 토큰만(브랜드 결제 색 제외). 브레이크포인트는 600 · 900 · 1200 만(900부터 PC 메뉴, 폰 독·하단 바 숨김).
   - 살아 있는 견본: /__ui (부품) · /__ui/home · /__ui/product · /__ui/live · /__ui/checkout

   다음 화면 담당이 쓸 부품(클래스) — 자세한 쓰임은 각 절 머리말
     단추 btn(--primary|outline|ghost|secondary|glass|danger|kakao, --xs|sm|lg|xl, --block|pill|icon) · ibtn · cnt
     배지 badge--new|hot|limited|preorder|restock|soldout|live · tag · pill(--red|solid|gold|dark|mute|live) · lchip · schip · ochip · chip
     입력 field · input · select · textarea · cbox · pw          가격 price(--card|--lg) · stars
     판 panel(+panel__head/__t/__ic/__more) · glass · note · frame · shead(섹션 머리)
     상품 pcard(pgrid, pcard--h 가로형) · rank/rrow · hit/hits/hitp · gal · pd · boxinfo · fulfil/fopt(옵션 카드) · qty · buybar(폰 하단 구매 바)
     주문 steps · olines/oline · addr · paym/paym__opt(결제수단 옵션 카드) · psum · agree · paybar
     라이브 screen · nowop · qlist/qitem · onair(방송 띠)       그 밖 tabs · acc · table · nlist · kv · pager · empty · toast · modal · trust · links · skel
   ===================================================================== */

/* 0. 바탕 ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hd) + 16px);background:var(--bg)}
body{position:relative;isolation:isolate;margin:0;min-height:100vh;padding-bottom:var(--bottom-bar);font-family:var(--font);font-size:var(--fs-base);line-height:var(--lh);
  color:var(--text);background:var(--bg);letter-spacing:-.01em;word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}
/* 쇼핑몰 바탕: 순검정 + 640px 벨벳 질감 타일(평균 밝기 ≈ #080808 — 글자 대비를 해치지 않는다) */
body.shop{overflow-x:hidden;background:var(--bg) var(--texture) repeat;background-size:640px 640px}
/* 두 색 카테고리 아이콘(cat-*)의 밝은 쪽 = 따뜻한 흰색 (금색 바탕 위 고른 칩에서는 검정) */
body.shop{--ic-w:var(--text)}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{border:0;background:none;padding:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,p,figure,dl,dd,blockquote,fieldset{margin:0}
fieldset{border:0;padding:0;min-width:0}
legend{padding:0}
table{border-collapse:collapse}
del{text-decoration-thickness:1px}
em{font-style:normal}
[hidden]{display:none!important}
::selection{background:rgba(201,162,74,.38);color:var(--text)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
main:focus{outline:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-80px;z-index:var(--z-skip);padding:12px 16px;border-radius:var(--r-sm);background:var(--btn-bg);color:var(--on-gold);font-weight:700}
.skip:focus{top:12px}
/* 판: .wrap = 가운데 정렬 + 좌우 여백 */
.wrap{width:min(100% - var(--gut) * 2, var(--wrap));margin-inline:auto}
.wrap--narrow{width:min(100% - var(--gut) * 2, 760px)}
/* 머리·바닥 폭 = 시안 A 실측(1440 화면에서 로고~장바구니 ≈ 1360) — 화면마다 본문 폭이 달라도 머리·바닥은 늘 같은 자리.
   본문은 화면 담당이 정한다(홈 1360 · 목록 1360 · 상세 1320 · 그 밖 tokens --wrap 1240) */
.hd,.ft{--wrap:1360px}
.page{padding-top:4px;padding-bottom:8px}
.sec{margin-top:28px}
.sec--sm{margin-top:16px}
@media (min-width:900px){.page{padding-top:12px}.sec{margin-top:40px}.sec--sm{margin-top:20px}}
/* 아이콘: {{ ui.icon('cart', 20) }} — 가는 선(1.6), 색은 글자색 */
.ico{flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;overflow:visible}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--text-3)}
.red{color:var(--accent-text)}     /* (옛 이름) 강조 글자 = 금색 */
.gold{color:var(--gold-ink)}
.serif{font-family:var(--serif)}
.caps{font-family:var(--display);letter-spacing:var(--track-caps);text-transform:uppercase}
.stack{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:var(--s4)}
.stack--sm{gap:var(--s2)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.noscroll{scrollbar-width:none}.noscroll::-webkit-scrollbar{display:none}
@media (max-width:899px){.only-pc{display:none!important}}
@media (min-width:900px){.only-m{display:none!important}}
@keyframes blink{50%{opacity:.25}}
@keyframes ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.1);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes shimmer{to{transform:translateX(100%)}}
@keyframes indet{0%{transform:translateX(-100%)}100%{transform:translateX(240%)}}
@keyframes fillbar{from{width:22%}to{width:68%}}
/* 금빛 머리카락 선: <hr class="hair"> 또는 판 안 구분선 */
.hair{height:1px;margin:0;border:0;background:var(--hair)}
/* 금속 글자(금색 그라데이션) — 큰 세리프 제목·숫자 */
.goldtext{color:var(--gold-hi);background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* 1. 버튼 --------------------------------------------------------------
   주 btn--primary(금색 그라데이션 + 검정 글자 600) · 보조 btn--outline(투명 + 금 1px 테두리 + 금 글자) · btn--ghost(옅은 흰 선)
   btn--secondary(숯색 칸 + 금빛 테두리) · btn--glass(반투명 숯색) · btn--danger · btn--kakao   — 흰 바탕·네이비 단추는 없다
   크기 btn--xs/sm/lg/xl · 꽉 차게 btn--block · 알약 btn--pill · 아이콘만 btn--icon(aria-label 필수)
   비활성 disabled(또는 aria-disabled="true") · 로딩 class="is-loading" aria-busy="true" */
.btn{--btn-h:48px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--btn-h);padding:0 20px;
  border:1px solid transparent;border-radius:var(--r-sm);font-size:15px;font-weight:600;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;text-align:center;
  cursor:pointer;transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast),box-shadow var(--t-fast),filter var(--t-fast),transform .1s}
.btn:active{transform:translateY(1px)}
.btn--primary{color:var(--btn-fg);background:var(--btn-bg);border-color:rgba(243,210,122,.55);box-shadow:inset 0 1px 0 rgba(255,240,200,.45),var(--glow-btn)}
.btn--primary:hover{background:var(--btn-hover)}
.btn--primary:active{filter:brightness(.92)}
.btn--danger{color:var(--on-danger);background:var(--danger);border-color:var(--danger)}
.btn--danger:hover{filter:brightness(1.08)}
.btn--outline{color:var(--btn2-fg);background:var(--btn2-bg);border-color:var(--btn2-line)}
.btn--outline:hover{background:var(--btn2-hover);border-color:var(--gold)}
.btn--ghost{color:var(--text);background:transparent;border-color:var(--line-2)}
.btn--ghost:hover{background:var(--surface-3);border-color:var(--border-2)}
.btn--secondary,.btn--white{color:var(--text);background:var(--surface-2);border-color:var(--border)}
.btn--secondary:hover,.btn--white:hover{background:var(--btn2-hover);border-color:var(--gold-line)}
.btn--glass{color:var(--text);background:var(--glass);border-color:var(--border);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn--glass:hover{background:var(--glass-2);border-color:var(--gold-line)}
.btn--kakao{color:var(--kakao-ink);background:var(--kakao);border-color:var(--kakao)}
.btn--kakao:hover{filter:brightness(.97)}
.btn--xs{--btn-h:30px;padding:0 11px;font-size:12.5px;gap:5px;border-radius:var(--r-xs)}
.btn--sm{--btn-h:38px;padding:0 15px;font-size:13.5px;gap:6px}
.btn--lg{--btn-h:54px;padding:0 24px;font-size:16.5px;border-radius:var(--r-md)}
.btn--xl{--btn-h:58px;padding:0 26px;font-size:18px;border-radius:var(--r-md);font-weight:700}
.btn--block{display:flex;width:100%}
.btn--pill{border-radius:var(--r-pill)}
.btn--icon{width:var(--btn-h);padding:0}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed;pointer-events:none;box-shadow:none}
.btn.is-loading{color:transparent!important;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(201,162,74,.25);border-top-color:var(--gold-hi);animation:spin .7s linear infinite}
.btn--primary.is-loading::after,.btn--danger.is-loading::after{border-color:rgba(23,17,10,.25);border-top-color:var(--on-gold)}
.btns{display:flex;flex-wrap:wrap;gap:var(--s2)}
.btns--fill>*{flex:1}
/* 아이콘 단추 (헤더·닫기) */
.ibtn{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;color:var(--text);transition:background-color var(--t-fast),color var(--t-fast)}
.ibtn:hover{background:var(--gold-wash);color:var(--gold-hi)}
.ibtn .ico{stroke-width:1.5}
/* 개수 배지 (장바구니) — 시안: 금색 원 + 검정 숫자 */
.cnt{position:absolute;top:3px;right:1px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:var(--gold-grad);color:var(--on-gold);font-size:10.5px;font-weight:800;line-height:1;box-shadow:0 0 0 2px var(--bg)}

/* 2. 배지 · 태그 · 알약 · 칩 -----------------------------------------------
   NEW = 빨강 알약(흰 점) · HOT = 금색 바탕 검정 글자 · 한정 = 금색 테두리 · 예약 = 파랑 옅은 바탕 · 재입고 = 청록 옅은 바탕 · 품절 = 회색 · LIVE = 빨강 */
.badges{display:inline-flex;flex-wrap:wrap;gap:5px}
.badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:var(--r-pill);font-size:11px;font-weight:700;letter-spacing:.04em;line-height:1;white-space:nowrap;border:1px solid transparent}
.badge--new,.badge--hot,.badge--live,.badge--soldout{gap:5px}
.badge--new::before,.badge--hot::before,.badge--live::before,.badge--soldout::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.badge--new{color:var(--text);background:var(--live-chip)}
.badge--live{color:var(--text);background:var(--live-chip)}
.badge--hot{color:var(--on-gold);background:var(--gold-grad)}
.badge--hot .ico{display:none}
.badge--limited{color:var(--gold-ink);background:transparent;border-color:var(--gold-line)}
.badge--preorder{color:var(--info);background:var(--info-wash);border-color:var(--info-line)}
.badge--restock{color:var(--teal);background:var(--teal-wash);border-color:rgba(91,199,186,.35)}
.badge--soldout{color:var(--text-2);background:var(--char-3);border-color:var(--line-2)}
/* 작은 대문자 라벨: tag--red · tag--gold(금색 바탕) · tag--dark(선만) — 섹션 머리 앞에서는 장식 글자(배경 없음) */
.tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:var(--r-xs);font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.12em;line-height:1;flex:none}
.tag--red{color:var(--text);background:var(--live-chip)}
.tag--gold{color:var(--on-gold);background:var(--gold-grad)}
.tag--dark{color:var(--gold-ink);background:transparent;border:1px solid var(--border-2)}
/* 작은 알약: {{ ui.pill('무료배송', 'truck') }} — tone: red(금빛 옅은 알약, 기본) | solid(금색) | gold(금 테두리) | dark(숯색) | mute */
.pill{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600;line-height:1;white-space:nowrap;flex:none}
.pill--red{color:var(--gold-ink);background:var(--gold-wash);border:1px solid var(--gold-line-2)}
.pill--solid{color:var(--on-gold);background:var(--gold-grad);border:1px solid rgba(243,210,122,.5)}
.pill--gold{color:var(--gold-ink);background:transparent;border:1px solid var(--gold-line)}
.pill--dark{color:var(--text);background:var(--char-2);border:1px solid var(--line-2)}
.pill--mute{color:var(--text-3);background:var(--mute-wash);border:1px solid var(--line)}
.pill--live{color:var(--live-hi)}
.pill--live i{width:7px;height:7px;border-radius:50%;background:var(--live)}
/* LIVE 칩: <span class="lchip">LIVE</span> · 크게 lchip--lg · 작게 lchip--xs · 방송 전 lchip--off · 대기 lchip--wait · 옅게 lchip--soft */
.lchip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:var(--r-pill);color:var(--text);font-size:11.5px;font-weight:800;letter-spacing:.06em;line-height:1;white-space:nowrap;flex:none;
  background:var(--live-chip);border:1px solid var(--live-chip)}
.lchip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--text)}
.lchip--lg{height:24px;padding:0 10px;font-size:12px}
.lchip--xs{height:18px;padding:0 6px;font-size:10.5px;gap:4px;border-radius:var(--r-xs)}
.lchip--xs::before{width:4px;height:4px}
.lchip--sm{height:19px;padding:0 7px;font-size:10.5px}
.lchip--off{background:rgba(10,10,10,.72);border-color:var(--line-2);color:var(--text-2)}
.lchip--off::before{background:var(--text-3)}
.lchip--wait{background:rgba(10,10,10,.72);border-color:var(--gold-line);color:var(--gold-ink)}
.lchip--wait::before{display:none}
.lchip--soft{height:20px;padding:0 8px;border-radius:var(--r-pill);background:var(--live-wash);border-color:rgba(229,38,45,.4);color:var(--live-hi);font-size:11px;letter-spacing:0}
.lchip--soft::before{width:5px;height:5px;background:var(--live)}
/* 영상 위 작은 칩 (시청 수 · 대기 수) */
.vchip{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:var(--r-pill);background:rgba(10,10,10,.68);border:1px solid var(--line-2);color:var(--text);font-size:11px;font-weight:600;white-space:nowrap;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vchip .ico{width:13px;height:13px}
/* 맥박 점 (LIVE 만 ping) */
.pulse{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pulse);flex:none}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 1.8s var(--ease) infinite}
.pulse--off{background:var(--text-3)}.pulse--off::after{display:none}
/* 주문 상태 칩 (어두운 바탕용 채도 낮춘 알약) */
.schip,.ochip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600;line-height:1;white-space:nowrap}
.schip::before,.ochip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.schip--pending{color:var(--warn);background:var(--warn-wash)}
.schip--paid{color:var(--ok);background:var(--ok-wash)}
.schip--preparing{color:var(--info);background:var(--info-wash)}
.schip--shipping{color:var(--violet);background:var(--violet-wash)}
.schip--delivered{color:var(--teal);background:var(--teal-wash)}
.schip--cancelled,.schip--refunded{color:var(--text-3);background:var(--mute-wash)}
.ochip--wait{color:var(--text-3);background:var(--mute-wash)}
.ochip--opening{color:var(--live-hi);background:var(--live-wash)}
.ochip--done{color:var(--ok);background:var(--ok-wash)}
/* 칩 고르기 (시안 A_home_m 카테고리 칩 · 목록 필터): 투명 + 금빛 1px 테두리 + 흰 글자, 고른 칩 = 금색 그라데이션 + 검정 글자 */
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.chips::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--gold-line);background:transparent;font-size:13.5px;font-weight:500;white-space:nowrap;color:var(--text);flex:none;transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.chip:hover{border-color:var(--gold);background:var(--gold-wash)}
.chip[aria-current="true"],.chip[aria-current="page"],.chip.is-on,input:checked+.chip{--ic-w:var(--on-gold);color:var(--on-gold);font-weight:700;border-color:rgba(243,210,122,.6);background:var(--gold-grad)}

/* 3. 입력 ---------------------------------------------------------------
   {{ ui.field(...) }} 또는 <input class="input"> · <select class="select"> · <textarea class="textarea">
   --input-bg(#101010) + --input-line 테두리, 초점 = 금색 테두리 + 옅은 금빛 고리. 체크 = 금색 꽉 찬 네모 + 검정 체크
   체크: <label class="cbox"><input type="checkbox"><span class="cbox__mark">{{ ui.icon('check', 14) }}</span><span>글</span></label> */
.field{display:grid;gap:6px}
.field__label{font-size:13px;font-weight:700;color:var(--text-2)}
.field__label em{color:var(--danger);margin-left:2px}
.field__help{font-size:12px;color:var(--text-3)}
.field__err{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--danger)}
.input,.select,.textarea{width:100%;min-height:48px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--input-line);background:var(--input-bg);color:var(--text);font-size:15px;
  transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.textarea{min-height:110px;padding:12px 14px;line-height:1.55;resize:vertical}
/* 폰: 16px 미만이면 아이폰 사파리가 칸을 누를 때 화면을 확대한다 */
@media (max-width:599px){.input,.select,.textarea{font-size:16px}}
.select{appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23C9A24A' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.select option{background:var(--char);color:var(--text)}
.input::placeholder,.textarea::placeholder{color:var(--text-3)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--line-3)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,74,.22)}
[aria-invalid="true"]{border-color:var(--danger)!important}
.pw{position:relative}
.pw .input{padding-right:48px}
.pw__eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:42px;height:42px;display:grid;place-items:center;color:var(--text-3)}
.pw__eye:hover{color:var(--gold-hi)}
.cbox{position:relative;display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--text-2);cursor:pointer;min-height:32px}
.cbox input{position:absolute;opacity:0;width:1px;height:1px}
.cbox__mark{width:22px;height:22px;flex:none;border-radius:3px;border:1.5px solid var(--gold-line);background:var(--input-bg);display:grid;place-items:center;color:transparent;transition:background-color var(--t-fast),border-color var(--t-fast)}
.cbox__mark .ico{stroke-width:3}
.cbox input:checked+.cbox__mark{color:var(--on-gold);background:var(--gold-grad);border-color:var(--gold)}
.cbox input:focus-visible+.cbox__mark{outline:2px solid var(--focus);outline-offset:2px}

/* 4. 가격 · 별점 ------------------------------------------------------
   가격 숫자 = 금색 세리프 700 · 정가 취소선(흐림) · 할인율(밝은 금 굵게) */
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-width:0}
.price__amt{font-family:var(--serif);font-size:17px;font-weight:700;line-height:1.15;letter-spacing:-.01em;color:var(--price);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.price__cur{margin-right:.22em;font-weight:600}
.price__was{font-size:12.5px;font-weight:500;color:var(--text-3);white-space:nowrap}
.price__off{font-size:13px;font-weight:800;color:var(--live-hi);white-space:nowrap}
/* 카드: 위 줄 = 정가 취소선 + 할인율, 아래 줄 = 세리프 가격 */
.price--card{gap:1px 6px}
.price--card .price__was{order:1;font-size:11.5px}
.price--card .price__off{order:2;font-size:11.5px}
.price--card .price__amt{order:3;flex-basis:100%}
.price--lg{gap:4px 12px;align-items:baseline}
.price--lg .price__amt{order:3;flex-basis:100%;font-size:30px;font-weight:700}
.price--lg .price__was{order:1;font-size:13.5px}
.price--lg .price__off{order:2;font-size:15px}
.stars{--rate:0;display:inline-block;width:76px;height:14px;flex:none;
  background:linear-gradient(90deg,var(--gold) calc(var(--rate) / 5 * 100%),rgba(255,255,255,.16) 0);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.2' height='14' viewBox='0 0 24 22'%3E%3Cpath d='m12 1 3.1 6.6 7.1.8-5.3 4.8 1.5 7-6.4-3.6-6.4 3.6 1.5-7L1.8 8.4l7.1-.8z'/%3E%3C/svg%3E") 0 0/15.2px 14px repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.2' height='14' viewBox='0 0 24 22'%3E%3Cpath d='m12 1 3.1 6.6 7.1.8-5.3 4.8 1.5 7-6.4-3.6-6.4 3.6 1.5-7L1.8 8.4l7.1-.8z'/%3E%3C/svg%3E") 0 0/15.2px 14px repeat-x}
.stars--sm{width:60px;height:11px;-webkit-mask-size:12px 11px;mask-size:12px 11px}
.stars--lg{width:110px;height:20px;-webkit-mask-size:22px 20px;mask-size:22px 20px}

/* 5. 섹션 머리 (시안 A: 금색 세리프 제목 + 오른쪽으로 길게 뻗는 1px 금빛 선 + 맨 오른쪽 작은 흰 '전체보기 >') -------------
   {{ ui.section_head('신상품 입고', '/products?badge=new', lead='NEW', id='new-t') }}   → 'NEW'(Cinzel) + 한글 세리프 한 줄
   {{ ui.section_head('이런 상품은 어때요?', '/products?sort=popular', en='BEST PRODUCTS') }} → 금색 Cinzel 제목 + 아래 작은 한글 줄
   {{ ui.section_head('지금 많이 사는 상품', '/products?sort=popular', eyebrow='BEST', sub='…') }} → 금색 대문자 라벨 + 세리프 한글 제목 */
.shead{position:relative;display:flex;align-items:center;gap:14px;margin-bottom:14px;min-width:0}
.shead::after{content:"";order:1;flex:1 1 24px;min-width:24px;height:1px;background:linear-gradient(90deg,var(--gold-line),var(--gold-line-2))}
.shead__main{order:0;flex:0 1 auto;min-width:0}
.shead__title{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .32em;font-family:var(--serif);font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--heading)}
.shead__title .tag{align-self:center;height:auto;padding:0;border:0;background:none;color:var(--gold-ink);font-size:11px;letter-spacing:.16em}
.shead__lead{font-family:var(--display);font-weight:600;letter-spacing:.02em}
.shead__title--en{display:grid;gap:2px}
.shead__en{font-family:var(--display);font-size:22px;font-weight:600;line-height:1.1;letter-spacing:.03em;color:var(--heading)}
.shead__ko{font-family:var(--font);font-size:12px;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--text-2)}
.shead__sub{margin-top:4px;font-size:12px;color:var(--text-3)}
.shead__title--en+.shead__sub{display:none}
.shead__more{order:2;display:inline-flex;align-items:center;gap:2px;flex:none;padding:6px 0;font-size:12.5px;font-weight:500;color:var(--text);white-space:nowrap;transition:color var(--t-fast)}
.shead__more .ico{width:14px;height:14px;color:var(--text-2)}
.shead__more:hover,.shead__more:hover .ico{color:var(--gold-hi)}
@media (min-width:900px){
  .shead{margin-bottom:18px;gap:20px}
  .shead__title{font-size:28px}
  .shead__en{font-size:26px}
  .shead__ko{font-size:12.5px}
  .shead__sub{font-size:13px}
  .shead__more{font-size:13px}
}

/* 6. 판 ------------------------------------------------------------------
   .panel = 숯색 판 + 1px 금빛 테두리(판 제목 금색 세리프) · .glass = 테두리만 있는 숯색 판 · .glow = 금빛 테두리 강조 · .frame = 어두운 사진 칸 액자 */
.glass{border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border)}
.glow{border:1px solid var(--gold-line);box-shadow:var(--gold-glow)}
.frame{padding:8px;background:var(--well-grad);border:1px solid var(--border);border-radius:var(--r-sm)}
.panel{position:relative;padding:14px 14px 16px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-frame)}
.panel+.panel{margin-top:10px}
/* 두 칸 그리드(홈 hduo·안내 등)에 나란히 둔 판은 둘째 칸만 내려가지 않게 */
:is(.grid,[class*="duo"])>.panel+.panel{margin-top:0}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--hair)}
.panel__t{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--heading)}
.panel__ic{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--gold-ink);background:transparent;border:1px solid var(--gold-line)}
.panel__ic .ico{width:14px;height:14px;stroke-width:1.7}
.panel__t .pill{height:19px;padding:0 7px;font-family:var(--font);font-size:11px;font-weight:700}
.panel__more,.panel__aside{display:inline-flex;align-items:center;gap:2px;font-size:12px;color:var(--text-2);white-space:nowrap}
.panel__more:hover{color:var(--gold-hi)}
.note{display:flex;gap:8px;padding:12px 14px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line);font-size:13px;color:var(--text-2)}
.note .ico{flex:none;margin-top:1px;color:var(--gold-ink)}
.note--red{background:var(--gold-wash);border-color:var(--gold-line-2);color:var(--text)}
.note--red .ico{color:var(--gold-ink)}

/* 7. 헤더 (시안 A: 검정 바탕 + 아래 1px 금빛 선 · 왼쪽 세로형 금색 로고 · PC 흰 메뉴(금색 점 구분, 지금 메뉴 금색)
      · 오른쪽 금빛 테두리 알약 검색칸 · 사람 아이콘 '로그인' | 장바구니(금색 원 개수)) ------- */
.hd{position:sticky;top:0;z-index:var(--z-header);background:var(--bg);border-bottom:1px solid var(--gold-line);transition:background-color var(--t),box-shadow var(--t)}
.hd.is-stuck{background:rgba(10,10,10,.9);box-shadow:0 10px 24px -16px rgba(0,0,0,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hd__in{position:relative;display:flex;align-items:center;gap:6px;height:var(--hd)}
.hd__logo{display:block;flex:none;margin-left:-2px}
.hd__logo img{height:44px;width:auto}
.hd__back{margin-left:-10px;color:var(--gold-hi)}
.hd--back .hd__logo{position:absolute;left:50%;top:50%;margin:0;transform:translate(-50%,-50%)}
.hd--back .hd__logo img{height:40px}
.hd__nav,.hd__search,.hd__user{display:none}
.hd__acts{display:flex;align-items:center;gap:0;margin-left:auto;margin-right:-8px}
.hd__acts .ibtn{width:42px;color:var(--gold-hi)}
.hd__acts .ico,.hd__back .ico{stroke-width:1.5}
.hd__user-t{display:none}
.hsearch{position:absolute;left:0;right:0;top:100%;padding:12px 0 16px;background:var(--surface);border-bottom:1px solid var(--gold-line);box-shadow:var(--sh-3)}
.hsearch__form{display:flex;gap:8px}
.hsearch__form .btn{flex:none}
.hsearch__quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.hsearch__quick a{height:32px;padding:0 12px;display:inline-flex;align-items:center;border-radius:var(--r-pill);border:1px solid var(--gold-line-2);font-size:13px;color:var(--text)}
.hsearch__quick a:hover{border-color:var(--gold);background:var(--gold-wash);color:var(--gold-hi)}
@media (min-width:900px){
  .hd__logo img{height:54px}
  .hd--back .hd__logo{position:static;transform:none}
  .hd--back .hd__logo img{height:54px}
  .hd__back{display:none}
  .hd__in{gap:20px}
  .hd__nav{position:relative;display:flex;align-items:stretch;gap:2px;height:100%;margin-left:4px;padding-left:12px;flex:none}
  .hd__nav a{position:relative;display:inline-flex;align-items:center;gap:6px;padding:0 12px;font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;transition:color var(--t-fast)}
  .hd__nav a:hover{color:var(--gold-hi)}
  .hd__nav a[aria-current="page"]{color:var(--gold-hi);font-weight:700}
  .hd__nav a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:12px;height:1px;background:var(--gold)}
  .hd__live .pulse{width:7px;height:7px}
  .hd__acts{gap:2px}
  .hd__acts .ibtn{color:var(--text)}
  .hd__acts .hd__cart{color:var(--gold-hi)}
  .hd__user{display:inline-grid}
  .hd__sbtn{display:inline-grid}
  /* 카테고리 더보기 (메뉴 카테고리가 넘칠 때) */
  .hd__more{position:relative;display:flex}
  .hd__more summary{position:relative;display:inline-flex;align-items:center;gap:4px;padding:0 12px;font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;cursor:pointer;list-style:none}
  .hd__more summary::-webkit-details-marker{display:none}
  .hd__more summary:hover,.hd__more[open] summary{color:var(--gold-hi)}
  .hd__more summary[aria-current="page"]{font-weight:700}
  .hd__more-list .ico,.hd__more-list .gico{color:var(--gold-ink);flex:none}
  .hd__more summary .ico{transition:transform var(--t-fast)}
  .hd__more[open] summary .ico{transform:rotate(180deg)}
  .hd__more-list{position:absolute;top:calc(100% - 8px);left:0;min-width:200px;padding:8px;display:grid;gap:2px;border-radius:var(--r-md);
    background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-3)}
  .hd__nav .hd__more-list a{height:42px;padding:0 12px;border-radius:var(--r-sm);gap:10px}
  .hd__nav .hd__more-list a:hover{background:var(--gold-wash)}
  .hd__nav .hd__more-list a[aria-current="page"]::after{display:none}
}
/* 태블릿 폭: 홈(=로고)은 빼고 LIVE 는 짧게, 공지/이벤트는 '더보기' 안으로 + 왼쪽 메뉴 단추 (900 폭에서 가로 넘침 0) */
@media (min-width:900px) and (max-width:1199px){
  .hd__in{gap:10px}
  .hd__logo img,.hd--back .hd__logo img{height:46px}
  .hd__nav{padding-left:4px}
  .hd__nav a,.hd__more summary{padding:0 9px}
  .hd__nav a[aria-current="page"]::after{left:9px;right:9px}
  .hd__nav .hd__home,.hd__nav .hd__news,.hd__live-t{display:none}
}
/* 더보기 안 공지/이벤트: 카테고리 아래 얇은 선으로 나눈다 */
.hd__more-news{margin-top:2px;border-top:1px solid var(--hair)}
.hd__more-list>.hd__more-news:first-child{margin-top:0;border-top:0}
/* 머리 메뉴(서랍) 단추 = 로고 왼쪽. 900~1199 는 늘, 폰은 독이 구매 바·결제 바로 바뀐 화면(hd__menu--m)에서만.
   1200 이상은 카테고리가 많아 공지/이벤트가 빠지는 띠(hd__menu--d·w, web.hd_fit 2단계)에서만 */
.hd__menu{display:none;margin-left:-10px;color:var(--gold-hi)}
.hd__back+.hd__menu{margin-left:-6px}
.hd__menu+.hd__logo{margin-left:0}
@media (max-width:899px){.hd__menu--m{display:inline-grid}}
@media (min-width:900px) and (max-width:1199px){.hd__menu{display:inline-grid;margin-right:-6px}}
@media (min-width:1200px) and (max-width:1439px){.hd__menu--d{display:inline-grid;margin-right:-6px}}
@media (min-width:1440px){.hd__menu--w{display:inline-grid;margin-right:-6px}}
/* 폭 띠마다 메뉴/더보기 나누기 (web.hd_fit · base.html): x<띠> = 메뉴 칸 숨김 · y<띠> = 더보기 칸 숨김(메뉴에 있음)
   · m<띠> = 더보기 보임 · c<띠> = 지금 보는 카테고리가 더보기 안 · data-fit d1/w1 = 홈 빼고 LIVE 짧게 · d2/w2 = 공지/이벤트도 뺌 */
@media (min-width:900px) and (max-width:1199px){
  .hd__nav .xt,.hd__nav .hd__more-list .yt,.hd__nav .hd__more:not(.mt){display:none}
  .hd__more.ct summary{font-weight:700;color:var(--gold-hi)}
}
@media (min-width:1200px) and (max-width:1439px){
  .hd__nav .xd,.hd__nav .hd__more-list .yd,.hd__nav .hd__more:not(.md){display:none}
  .hd__more.cd summary{font-weight:700;color:var(--gold-hi)}
  .hd__nav:is([data-fit~="d1"],[data-fit~="d2"]) :is(.hd__home,.hd__live-t),.hd__nav[data-fit~="d2"] .hd__news{display:none}
}
@media (min-width:1440px){
  .hd__nav .xw,.hd__nav .hd__more-list .yw,.hd__nav .hd__more:not(.mw){display:none}
  .hd__more.cw summary{font-weight:700;color:var(--gold-hi)}
  .hd__nav:is([data-fit~="w1"],[data-fit~="w2"]) :is(.hd__home,.hd__live-t),.hd__nav[data-fit~="w2"] .hd__news{display:none}
}
@media (min-width:1200px){
  .hd__in{gap:20px}
  .hd__nav{margin-left:16px;padding-left:0;gap:2px}
  .hd__nav a,.hd__more summary{padding:0 13px}
  .hd__nav a[aria-current="page"]::after{left:13px;right:13px}
  .hd__acts{margin-left:0}
  /* 검색칸 = 금빛 테두리 둥근 알약 (시안 A PC) — 아이콘 단추는 숨긴다 */
  .hd__search{display:flex;align-items:center;gap:10px;flex:0 1 280px;min-width:180px;height:40px;margin-left:auto;padding:0 16px;border-radius:var(--r-pill);
    border:1px solid var(--gold-line);background:rgba(255,255,255,.02);color:var(--gold-hi);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
  .hd__search .ico{width:18px;height:18px;stroke-width:1.7}
  .hd__search input{flex:1;min-width:0;height:100%;border:0;background:none;font-size:13px;color:var(--text)}
  .hd__search input::placeholder{color:var(--text-3)}
  .hd__search:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,74,.18)}
  .hd__sbtn{display:none}
  .hd__acts .hd__user{display:inline-flex;align-items:center;gap:8px;width:auto;height:44px;padding:0 14px 0 10px;border-radius:var(--r-pill);font-size:13.5px;font-weight:500}
  .hd__user-t{display:inline}
  .hd__acts .hd__cart{margin-left:12px}
  .hd__acts .hd__cart::before{content:"";position:absolute;left:-7px;top:50%;width:1px;height:18px;margin-top:-9px;background:var(--line-2)}
}
/* 종류 메뉴(포켓몬 전용 — base.html data-mode="kinds"): 시안처럼 칸 사이 금색 가운데 점 */
@media (min-width:900px){
  .hd__nav[data-mode="kinds"] a+a::before{content:"";position:absolute;left:-2px;top:50%;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:var(--gold)}
}
@media (min-width:900px) and (max-width:1199px){.hd__nav[data-mode="kinds"] a{padding:0 12px}.hd__nav[data-mode="kinds"] a[aria-current="page"]::after{left:12px;right:12px}}
@media (min-width:1200px){.hd__nav[data-mode="kinds"]{margin-left:28px}.hd__nav[data-mode="kinds"] a{padding:0 22px}.hd__nav[data-mode="kinds"] a[aria-current="page"]::after{left:22px;right:22px}}
@media (min-width:1200px) and (max-width:1339px){.hd__nav[data-mode="kinds"]{margin-left:12px}.hd__nav[data-mode="kinds"] a{padding:0 14px}.hd__nav[data-mode="kinds"] a[aria-current="page"]::after{left:14px;right:14px}}
.hd__search input:focus{outline:none}

/* 8. 메뉴 서랍 (폰 · 독의 '카테고리'가 연다) ------------------------------------------- */
.drawer{position:fixed;inset:0;z-index:var(--z-drawer);visibility:hidden;pointer-events:none}
.drawer.is-open{visibility:visible;pointer-events:auto}
.drawer__scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity var(--t)}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer__panel{position:absolute;left:0;top:0;bottom:0;width:min(88vw,380px);display:flex;flex-direction:column;gap:16px;padding:12px 16px 24px;overflow-y:auto;
  background:var(--bg) var(--texture) repeat;background-size:640px;border-right:1px solid var(--gold-line);box-shadow:var(--sh-3);
  transform:translateX(-102%);transition:transform var(--t-slow) var(--ease)}
.drawer.is-open .drawer__panel{transform:none}
.drawer__top{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--gold-line-2)}
.drawer__top .ibtn{color:var(--gold-hi)}
.drawer__logo img{height:34px;width:auto}
.drawer__search{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--gold-line);background:var(--input-bg);color:var(--gold-hi)}
.drawer__search input{flex:1;min-width:0;border:0;background:none;font-size:16px;color:var(--text)}
.drawer__search input::placeholder{color:var(--text-3)}
.drawer__search input:focus{outline:none}
.drawer__search:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,74,.18)}
.drawer .cats{margin:0}
.drawer .cats__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;padding:0;gap:8px}
.drawer .cats__row li{min-width:0}
.drawer .cat{width:100%;justify-content:center}
.drawer__nav{display:grid;border-top:1px solid var(--gold-line-2)}
.drawer__nav a{display:flex;align-items:center;gap:12px;min-height:52px;border-bottom:1px solid var(--hair);font-size:15px;font-weight:600;color:var(--text)}
.drawer__nav a>.ico:first-child{color:var(--gold-ink)}
.drawer__nav a:hover{color:var(--gold-hi)}
.drawer__nav .chev{margin-left:auto;color:var(--text-3)}
.drawer__nav a[aria-current="page"]{font-weight:800;color:var(--gold-hi)}
.drawer__me{display:grid;gap:10px}
.drawer__hi{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--heading)}
.drawer__cs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--text-2)}
.drawer__cs .ico{color:var(--gold-ink)}
.drawer__cs b{color:var(--text)}
.drawer__cs small{width:100%;color:var(--text-3)}
html.lock-scroll{overflow:hidden}

/* 9. 하단 독 (시안 A: 검정 바 + 위 1px 금빛 선 · 흐림 선 아이콘 + 작은 글자 · 지금 칸 = 금색 · 가운데 LIVE 도 일반 탭(솟은 원 없음)) — 900부터 숨김 ----- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-dock);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:calc(62px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  background:rgba(10,10,10,.96);border-top:1px solid var(--gold-line);box-shadow:0 -12px 28px -16px rgba(0,0,0,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.dock__a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;font-size:11px;font-weight:500;color:var(--text-3);white-space:nowrap;transition:color var(--t-fast)}
.dock__a .ico{stroke-width:1.5;color:var(--text-2)}
.dock__a:hover,.dock__a:hover .ico{color:var(--gold-hi)}
.dock__a[aria-current="page"],.dock__a[aria-current="page"] .ico{color:var(--gold-hi);font-weight:700}
.dock__a[aria-current="page"] .ico{stroke-width:1.9}
.dock__ic{position:relative;display:grid;place-items:center;height:23px}
.dock__ic .cnt{top:-6px;right:-10px;box-shadow:0 0 0 2px var(--bg)}
/* 방송 중이면 LIVE 아이콘 오른쪽 위 빨간 점(ping) */
.dock__live.is-on .dock__ic::after,.dock__live.is-on .dock__ic::before{content:"";position:absolute;right:-1px;top:-2px;width:8px;height:8px;border-radius:50%;background:var(--live)}
.dock__live.is-on .dock__ic::after{box-shadow:0 0 0 2px var(--bg)}
.dock__live.is-on .dock__ic::before{animation:ping 1.8s var(--ease) infinite}
@media (min-width:900px){.dock{display:none}}

/* 10. 방송 띠 (시안 A 결: 검정/숯색 가로 띠 + 아래 금빛 선 — PC 헤더 위 전체 폭 · 폰 헤더 아래 전체 폭) ---------------------------
   base.html 이 {{ ui.onair(live, band=true) }} 로 <main> 맨 앞에 그린다(방송 중 = class="onair", 방송 전 = onair onair--off).
   PC 는 body.has-band 가 위에 띠 높이만큼 여백을 두고, 띠를 그 자리(맨 위)로 올린다 → 헤더는 띠 아래에서 시작해 내려가면 맨 위에 붙는다 */
.onair{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:32px;padding:0 var(--gut);background:var(--surface);border-bottom:1px solid var(--gold-line-2);color:var(--text-2);font-size:12px;line-height:1.2;text-align:center}
.onair__dot{position:relative;width:7px;height:7px;flex:none;border-radius:50%;background:var(--live)}
.onair__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--live);animation:ping 1.8s var(--ease) infinite}
.onair--off .onair__dot{background:var(--text-3)}
.onair--off .onair__dot::after{display:none}
.onair__txt{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;color:var(--text)}
.onair__txt b{font-weight:700;color:var(--gold-hi)}
.onair__txt span{color:var(--text-2)}
.onair__sep{color:var(--text-3)}
.onair__go{flex:none;color:var(--gold-hi);stroke-width:1.8}
.onair:hover .onair__txt b{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold)}
/* 띠가 아닌 곳(링크 허브 등)에서 부른 방송 띠는 둥근 숯색 카드 */
.onair:not([data-band]){min-height:44px;padding:0 16px;border-radius:var(--r-md);border:1px solid var(--border);justify-content:flex-start}
.onair .lchip{height:18px;padding:0 7px;font-size:10px}
.onair .lchip::before{display:none}
@media (max-width:899px){.no-band-m .onair[data-band]{display:none}}
@media (min-width:900px){
  body.has-band{padding-top:32px}
  .onair[data-band]{position:absolute;left:0;right:0;top:0;min-height:32px;height:32px;font-size:12.5px}
}

/* 11. 히어로 (시안 A: 사진 위 왼쪽에 작은 금색 Cinzel 머리글 → 금색 세리프 큰 제목 → 흰 본문 2줄 → 금색 '지금 보기 →' 단추 · 점 넘김 = 금색 짧은 막대) ---
   홈 배치(폰 둥근 판 · PC 화면 끝까지)는 pages/home.css. 다른 곳(배너 미리보기)에서는 둥근 판처럼 보인다 */
.slider{position:relative}
.slider__frame{position:relative}
.slider__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--r-lg);overscroll-behavior-x:contain}
.slider__track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.hero{position:relative;isolation:isolate;display:flex;align-items:center;height:100%;min-height:224px;overflow:hidden;border-radius:var(--r-lg);background:var(--bg)}
/* 사진 = 오른쪽 자리(시안: 왼쪽은 빈 검정 = 글자 자리). 왼쪽 끝은 검정으로 녹인다 */
.hero__art{position:absolute;inset:0;z-index:-2;display:block}
.hero__art img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:72% 74%}
/* 글자 쪽을 검정으로 한 번 더 눌러 흰·금 글자가 또렷하게 (그림 위 · 글자 아래) */
.hero:not(.hero--baked)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,10,10,.82) 0%,rgba(10,10,10,.6) 34%,rgba(10,10,10,.12) 58%,rgba(10,10,10,0) 70%)}
.hero__art--sm{inset:auto 10px 10px auto;width:auto;height:70%}
.hero__art--sm img{width:auto;object-fit:contain}
.hero__txt{position:relative;display:flex;flex-direction:column;align-items:flex-start;max-width:74%;padding:20px 0 22px 18px}
.hero__k{display:inline-flex;align-items:center;gap:5px;font-family:var(--display);font-size:10px;font-weight:600;line-height:1.2;letter-spacing:.1em;color:var(--gold-ink);text-transform:uppercase}
.hero__t{display:block;margin-top:8px;font-family:var(--serif);font-size:22px;font-weight:700;line-height:1.24;letter-spacing:-.03em;
  color:var(--gold-hi);background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none}
.hero__l{display:block;white-space:nowrap}
.hero__t em{font-family:var(--display);font-weight:700;letter-spacing:.01em}
.hero__d{display:block;margin-top:8px;font-size:12px;line-height:1.55;color:var(--text)}
.hero__d .hero__l{white-space:normal}
.hero__cta{display:inline-flex;align-items:center;gap:12px;margin-top:14px;height:36px;padding:0 16px 0 20px;border-radius:var(--r-pill);border:1px solid rgba(243,210,122,.55);
  background:var(--btn-bg);font-size:13px;font-weight:700;color:var(--on-gold);box-shadow:inset 0 1px 0 rgba(255,240,200,.45),var(--glow-btn);transition:background var(--t-fast)}
.hero__cta .ico{width:18px;height:18px;stroke-width:1.8}
.hero:hover .hero__cta{background:var(--btn-hover)}
.hero--baked{background:var(--bg)}
.hero--baked img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero--noart{background:radial-gradient(80% 120% at 85% 10%,rgba(243,210,122,.16),transparent 60%),var(--surface)}
.slider__arrow{position:absolute;top:50%;z-index:2;width:40px;height:40px;margin-top:-20px;display:none;place-items:center;border-radius:50%;background:rgba(10,10,10,.6);border:1px solid var(--gold-line);color:var(--gold-hi)}
.slider__arrow:hover{background:var(--gold-wash)}
.slider__arrow--prev{left:10px}.slider__arrow--next{right:10px}
.slider__bar{position:absolute;right:14px;bottom:12px;z-index:2;display:flex;align-items:center;gap:8px}
.dots{display:flex;align-items:center;gap:6px}
.dots button{position:relative;width:14px;height:3px;border-radius:2px;background:rgba(244,238,223,.28);transition:background-color var(--t),width var(--t)}
.dots button::before{content:"";position:absolute;inset:-10px -3px}
.dots button[aria-current="true"]{width:22px;background:var(--gold-hi)}
.slider__toggle{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:rgba(10,10,10,.6);border:1px solid var(--gold-line-2);color:var(--gold-hi)}
@media (max-width:599px){.slider__toggle{display:none}}
@media (min-width:600px){
  .hero{min-height:280px}
  .hero__txt{max-width:56%;padding:28px 0 32px max(var(--gut), 32px)}
  .hero__k{font-size:11.5px}
  .hero__t{font-size:30px}
  .hero__d{font-size:14px}
  .hero__cta{height:42px;font-size:14px}
  .hero__art img{object-position:62% 60%}
}
@media (min-width:900px){
  /* PC = 사진은 화면 끝까지(그림 왼쪽 45% 는 빈 검정 = 제목 자리) */
  .hero{min-height:clamp(320px, 25vw, 400px)}
  .hero__art img{object-position:50% 58%}
  .hero:not(.hero--baked)::after{background:linear-gradient(90deg,rgba(10,10,10,.75) 0%,rgba(10,10,10,.5) 26%,rgba(10,10,10,0) 46%)}
  .hero__txt{max-width:50%;padding:30px 0 34px max(var(--gut), calc((100% - var(--wrap)) / 2))}
  .hero__k{font-size:13px;letter-spacing:.12em}
  .hero__t{margin-top:10px;font-size:46px;line-height:1.16;letter-spacing:-.035em}
  .hero__d{margin-top:16px;font-size:16px;line-height:1.6}
  .hero__cta{height:46px;margin-top:26px;padding:0 20px 0 30px;gap:30px;border-radius:var(--r-xs);font-size:15px}
  /* 앞뒤 화살표 = 오른쪽 아래 막대 옆에 한 쌍. 평소엔 숨기고 마우스·키보드 초점에서 보인다 */
  .slider__arrow{display:grid;top:auto;bottom:10px;margin-top:0;width:32px;height:32px;opacity:0;transition:opacity var(--t-fast)}
  .slider__arrow--prev{left:auto;right:max(160px, calc((100% - var(--wrap)) / 2 + 150px))}
  .slider__arrow--next{right:max(120px, calc((100% - var(--wrap)) / 2 + 110px))}
  .slider:hover .slider__arrow,.slider:focus-within .slider__arrow{opacity:1}
  .slider__bar{right:max(var(--gut), calc((100% - var(--wrap)) / 2));bottom:22px}
}
@media (min-width:1200px){.hero__t{font-size:52px}}

/* 12. 카테고리 칩 (시안 A_home_m: 헤더 아래 알약 줄 — 투명 + 금빛 1px 테두리 + 흰 글자 · 고른 칩 = 금색 그라데이션 + 검정 글자)
   {{ ui.cat_nav() }} 의 아이콘 원(cat__orb)·영문(cat__en)은 칩에서는 숨긴다(서랍에서는 작은 금색 아이콘을 보인다) ----------- */
.cats{margin:0 calc(var(--gut) * -1)}
.cats__row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px var(--gut);scroll-snap-type:x proximity;scroll-padding-inline:var(--gut)}
.cats__row::-webkit-scrollbar{display:none}
.cats__row li{flex:none;min-width:0;scroll-snap-align:start}
.cat{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;min-width:64px;padding:0 16px;border-radius:var(--r-pill);
  border:1px solid var(--gold-line);background:rgba(255,255,255,.02);color:var(--text);white-space:nowrap;transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.cat__orb{display:none}
.cat__orb .ico{width:16px;height:16px;stroke-width:1.6}
.cat__img{width:18px;height:18px;object-fit:contain;border-radius:3px}   /* 관리자가 올린 카테고리 아이콘 그림 */
.gico{flex:none;object-fit:contain;border-radius:4px;vertical-align:middle}
.cat:hover{border-color:var(--gold);background:var(--gold-wash);color:var(--gold-hi)}
.cat.is-on{--ic-w:var(--on-gold);color:var(--on-gold);border-color:rgba(243,210,122,.6);background:var(--gold-grad);box-shadow:var(--glow-btn)}
.cat__t{font-size:13.5px;font-weight:500;line-height:1.2;white-space:nowrap}
.cat.is-on .cat__t{font-weight:700}
.cat__long{display:none}
.cat__en{display:none}
/* 서랍 안: 3칸 칩 + 작은 금색 아이콘 */
.drawer .cat{padding:0 10px;min-width:0}
.drawer .cat__orb{display:grid;place-items:center;color:var(--gold-ink)}
.drawer .cat.is-on .cat__orb{color:var(--on-gold)}
@media (min-width:600px){.cats__row{gap:10px}.cat{height:40px;padding:0 20px}.cat__t{font-size:14px}}
@media (min-width:900px){.cats{margin:0}.cats__row{padding:2px 0;flex-wrap:wrap;overflow:visible}.cat__long{display:inline}}

/* 13. 상품 그리드 · 상품 카드 (시안 A_list_pc: 숯색 판 + 1px 금빛 테두리 · 위 사진 칸 = 어두운 칸에 위에서 금빛 조명 ·
       왼쪽 위 배지 알약 · 이름 흰색 600 → 작은 흐림 종류 줄 → 금색 세리프 가격) ----------------------
   <ul class="pgrid"><li>{{ ui.product_card(p) }}</li>…</ul> · 5열(1200~) pgrid--5 · 가로로 밀기 pgrid--row · 가로형 카드 pcard--h */
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
.pgrid>li{min-width:0}
.pgrid--row{display:flex;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding:2px var(--gut) 6px;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut)}
.pgrid--row::-webkit-scrollbar{display:none}
.pgrid--row>li{flex:0 0 46%;scroll-snap-align:start}
@media (min-width:600px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 14px}.pgrid--row>li{flex-basis:31%}}
@media (min-width:900px){.pgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 16px}.pgrid--row{display:grid;margin:0;padding:0;overflow:visible}}
@media (min-width:1200px){.pgrid--5{grid-template-columns:repeat(5,minmax(0,1fr))}}
.pcard{position:relative;height:100%;container:pcard/inline-size}
.pcard__link{display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--border);transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast)}
.pcard__link:hover{border-color:var(--gold-line);box-shadow:var(--gold-glow);transform:translateY(-2px)}
/* 사진 칸 = 진열장: 어두운 칸 + 위에서 내려오는 금빛 조명. 투명 누끼(공식 사진)는 바닥에 금빛 반사 그림자 */
.pcard__img{position:relative;aspect-ratio:1.2/1;overflow:hidden;isolation:isolate;background:var(--well-grad);border-bottom:1px solid var(--line)}
.pcard__img::after{content:"";position:absolute;left:18%;right:18%;bottom:6%;height:10%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(243,210,122,.18),transparent)}
.pcard__img img{width:100%;height:100%;padding:9% 11% 11%;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.65));transition:transform var(--t-slow) var(--ease)}
.pcard__link:hover .pcard__img img{transform:scale(1.04)}
/* 왼쪽 위 배지 = 작은 알약 + 점 (NEW 빨강 · HOT 금색 · 그 밖 옅은 칸) */
.pcard__tag{position:absolute;left:8px;top:8px;z-index:1;display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 9px;border-radius:var(--r-pill);
  font-size:10.5px;font-weight:700;letter-spacing:.04em;line-height:1;color:var(--text);background:var(--live-chip)}
.pcard__tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.pcard__tag--hot{color:var(--on-gold);background:var(--gold-grad)}
.pcard__tag--preorder{color:var(--info);background:rgba(10,10,10,.75);border:1px solid var(--info-line)}
.pcard__tag--restock{color:var(--teal);background:rgba(10,10,10,.75);border:1px solid rgba(91,199,186,.4)}
.pcard__tag--limited{color:var(--gold-ink);background:rgba(10,10,10,.75);border:1px solid var(--gold-line)}
.pcard__rank{position:absolute;right:8px;top:8px;z-index:1;display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 8px 0 6px;border-radius:var(--r-pill);
  background:rgba(10,10,10,.72);border:1px solid var(--gold-line);color:var(--gold-hi);font-size:10.5px;font-weight:700;line-height:1}
.pcard__rank .ico{color:var(--gold)}
.pcard__sold{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,10,10,.35)}
.pcard__sold span{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 12px;border-radius:var(--r-pill);background:var(--char-3);border:1px solid var(--line-2);color:var(--text-2);font-size:12px;font-weight:700}
.pcard__sold span::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
/* (통합 10-29) 판매 시작 전 띠(사진 칸 아래 꽉 찬 줄) · 싱글카드 상태 칩(오른쪽 아래) — ui.product_card 가 그림 */
.pcard__soon{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:4px;height:24px;padding:0 8px;
  background:var(--surface);border-top:1px solid var(--gold);color:var(--gold-ink);font-size:11px;font-weight:700;line-height:1.2;white-space:nowrap}
.pcard__soon span{overflow:hidden;text-overflow:ellipsis}
.pcard__soon .ico{flex:none;width:12px;height:12px}
.pcard__cond{position:absolute;right:8px;bottom:8px;z-index:2;display:inline-flex;align-items:center;max-width:calc(100% - 16px);height:22px;padding:0 9px;border-radius:var(--r-pill);
  border:1px solid var(--gold-line);background:var(--surface);color:var(--text);font-size:11px;font-weight:700;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard--h .pcard__soon{height:20px;font-size:10px;padding:0 4px}.pcard--h .pcard__soon .ico{display:none}
.is-soldout .pcard__img img{opacity:.42;filter:grayscale(.7)}
.is-soldout .pcard__name,.is-soldout .price__amt{color:var(--text-3)}
.pcard__body{display:flex;flex-direction:column;flex:1;min-width:0;padding:10px 10px 12px}
/* 이름은 짧은 이름(ui.sname) — 2줄까지 */
.pcard__name{font-size:13px;font-weight:600;line-height:1.38;letter-spacing:-.02em;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.76em}
.pcard__meta{margin-top:3px;font-size:11.5px;font-weight:400;line-height:1.35;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard__metarow{display:flex;align-items:center;gap:6px;min-width:0;margin-top:3px}
.pcard__metarow .pcard__meta{flex:1;min-width:0;margin-top:0}
.pcard__rate{flex:none;display:inline-flex;align-items:center;gap:2px;font-size:10.5px;line-height:1.25;color:var(--text-3)}
.pcard__rate .ico{width:11px;height:11px;fill:var(--gold);stroke:none;color:var(--gold)}
.pcard__rate b{font-weight:700;color:var(--text)}
.pcard__desc{margin-top:3px;font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 가격 + 알약: 가격은 줄지 않고, 모자라면 알약이 다음 줄로 — 겹침 0 */
.pcard__foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:4px 6px;margin-top:auto;padding-top:8px}
.pcard__foot .price{flex:none;flex-wrap:wrap}
/* 카드 속 알약(무료배송·방송 개봉)은 조용한 흐림 글자 + 금색 아이콘 */
.pcard__foot .pill{height:auto;padding:0 0 2px;border:0;background:none;color:var(--text-3);font-size:10.5px;font-weight:500;gap:3px}
.pcard__foot .pill .ico{width:12px;height:12px;color:var(--gold-ink)}
.pcard .price__amt{font-size:16px}
.pcard .price__off{font-size:11px}
/* 가로형 카드 (시안 A_home_m 신상품): 왼쪽 사진 · 오른쪽 이름 · 종류 · 가격 · '신상품' 금 테두리 알약 */
.pcard__chip{display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:var(--r-pill);border:1px solid var(--gold-line);color:var(--gold-ink);font-size:10.5px;font-weight:600;line-height:1;white-space:nowrap}
.pcard__chip--hot{color:var(--on-gold);background:var(--gold-grad);border-color:transparent}
.pcard--h .pcard__link{display:grid;grid-template-columns:minmax(64px,41%) minmax(0,1fr)}
.pcard--h .pcard__img{aspect-ratio:auto;min-height:100%;border-bottom:0;border-right:1px solid var(--line)}
.pcard--h .pcard__img img{position:absolute;inset:0;padding:10% 6%}
.pcard--h .pcard__body{padding:10px 10px 10px 11px}
.pcard--h .pcard__name{font-size:12.5px;min-height:0}
.pcard--h .pcard__meta{font-size:11px}
.pcard--h .pcard__foot{flex-direction:column;align-items:flex-start;gap:6px;padding-top:6px}
.pcard--h .price__amt{font-size:16px}
/* 좁은 카드(폰 2열·가로 줄 — 카드 폭 210px 아래)는 늘 두 줄: 알약 숨김 · 가격만 → 한 줄의 카드끼리 가격 높이가 맞는다 */
@media (max-width:899px){
  @container pcard (max-width:209px){
    .pcard:not(.pcard--h) .pcard__foot{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:3px}
    .pcard:not(.pcard--h) .pcard__foot .pill{display:none}
  }
}
@media (min-width:900px){
  .pcard__img{aspect-ratio:1.18/1}
  .pcard__body{padding:12px 14px 14px}
  .pcard__rate{font-size:12px;gap:3px}.pcard__rate .ico{width:13px;height:13px}
  .pcard__name{font-size:14px}
  .pcard__meta{font-size:12px}
  .pcard .price__amt{font-size:19px}
  .pcard__foot{padding-top:8px}
  .pcard__foot .pill{font-size:11.5px}
  .pcard__tag{top:10px;left:10px;height:22px;font-size:11px}
  .pcard__rank{height:22px;padding:0 8px 0 6px;font-size:11.5px;right:10px;top:10px}
}

.rank .shead__title::before{display:none}
/* 14. 인기 순위 (금색 그라데이션 세리프 큰 숫자 + 어두운 사진 칸 썸네일 + 흰 이름 + NEW + 금색 세리프 가격, 행 사이 금빛 선) */
.rank{min-width:0}
.rank__list{display:grid;counter-reset:none}
.rrow{display:grid;grid-template-columns:34px 64px minmax(0,1fr) 16px;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--hair);transition:background-color var(--t-fast)}
.rank__list li:last-child .rrow{border-bottom:0}
.rrow:hover{background:linear-gradient(90deg,transparent,var(--gold-wash) 30%,transparent)}
.rrow__no{display:block;text-align:center;font-family:var(--serif);font-size:34px;font-weight:700;line-height:1;color:var(--gold-hi);
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rrow__img{width:64px;height:60px;padding:4px;overflow:hidden;border-radius:var(--r-sm);background:var(--well-grad);border:1px solid var(--border)}
.rrow__img img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.rrow__t{display:grid;gap:4px;min-width:0}
.rrow__t b{font-size:13px;font-weight:600;line-height:1.35;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rrow__new{display:inline-flex;align-items:center;margin-left:6px;height:16px;padding:0 6px;border-radius:var(--r-pill);vertical-align:1px;background:var(--live-chip);color:var(--text);font-family:var(--font);font-size:10.5px;font-weight:700;letter-spacing:.06em;line-height:1}
.rrow__p{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--price);font-variant-numeric:tabular-nums lining-nums}
.rrow__go{color:var(--text-3)}
.rrow:hover .rrow__go{color:var(--gold-hi)}
@media (min-width:900px){
  .rrow{grid-template-columns:44px 76px minmax(0,1fr) 16px;gap:16px;padding:14px 0}
  .rrow__no{font-size:44px}
  .rrow__img{width:76px;height:70px}
  .rrow__t b{font-size:13.5px}
  .rrow__p{font-size:16px}
}

/* 15. 실시간 개봉 대기열 판 ------------------------------------------------ */
.qpanel{padding:12px 14px 6px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border)}
.qpanel__head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:9px;border-bottom:1px solid var(--hair)}
.qpanel__t{display:flex;align-items:center;gap:7px;font-family:var(--serif);font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--heading)}
.qpanel__t .ico{color:var(--gold)}
.qpanel__more{display:inline-flex;align-items:center;font-size:12px;color:var(--text-2)}
.qpanel__more:hover{color:var(--gold-hi)}
.qpanel__empty{padding:16px 0;font-size:13px;color:var(--text-3)}
.qrow{display:grid;grid-template-columns:76px minmax(0,1fr) 14px;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--hair)}
.qpanel__list li:first-child .qrow{border-top:0}
.qrow__img{position:relative;height:52px;overflow:hidden;border-radius:var(--r-xs);background:var(--well-grad);border:1px solid var(--border)}
.qrow__img img{width:100%;height:100%;padding:3px;object-fit:contain}
.qrow__img .lchip{position:absolute;left:3px;top:3px}
.qrow__t{display:grid;gap:3px;min-width:0}
.qrow__t b{font-size:12.5px;font-weight:600;line-height:1.32;letter-spacing:-.02em;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qrow__t span{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--text-2)}
.qrow__t span .ico{color:var(--gold)}
.qrow__go{color:var(--text-3)}

/* 16. 홈 윗부분 틀 (홈 화면 배치는 pages/home.css) ------------- */
.home-top{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}

/* 17. 방송 화면 (시안 A: 둥근 화면 + 1px 금빛 테두리 · 왼쪽 위 빨강 LIVE · 대기 수) ------------------- */
.screen{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/9;border-radius:var(--r-sm);background:var(--well);border:1px solid var(--gold-line)}
.screen__art{position:absolute;inset:0;z-index:-1;display:grid;place-items:center}
.screen__art picture{position:absolute;inset:0}
.screen__bg{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.screen__crown{width:22%;opacity:.5}
.screen--off .screen__art::after{content:"";position:absolute;inset:0;background:rgba(10,10,10,.72)}
.screen__top{position:absolute;left:8px;top:8px;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.screen__full{position:absolute;right:8px;bottom:8px;z-index:2;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:var(--text);background:rgba(10,10,10,.68);border:1px solid var(--line-2)}
.screen__play{position:absolute;inset:0;z-index:1;display:grid;place-items:center}
.screen__play span{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;color:var(--on-gold);background:var(--gold-grad);box-shadow:0 0 0 6px rgba(10,10,10,.45),var(--glow-btn);transition:transform var(--t-fast)}
.screen__play:hover span{transform:scale(1.05)}
.screen__play .ico{margin-left:3px;fill:currentColor}
.screen__note{position:absolute;left:8px;bottom:8px;z-index:2;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:var(--r-pill);background:rgba(10,10,10,.7);border:1px solid var(--line-2);font-size:11px;color:var(--text)}
.screen__note .ico{color:var(--gold-ink)}
.screen__msg{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;text-align:center}
.screen__msg b{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--heading)}
.screen__msg span{font-size:12.5px;color:var(--text-2)}
.screen__msg .btn{margin-top:6px}
.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.screen.is-playing .screen__top,.screen.is-playing .screen__note{display:none}
.screen--v.is-playing{aspect-ratio:9/16;max-height:78vh;margin-inline:auto}
@media (min-width:900px){
  .screen--v{aspect-ratio:9/16;max-height:calc(100vh - var(--hd) - 40px);margin-inline:auto}
  .screen__top{left:12px;top:12px}
  .screen__msg b{font-size:22px}
}

/* 라이브 화면 틀: 폰 = 화면 · 지금 개봉 중 · 대기열 · HIT 세로 / PC = 왼쪽 화면 + 오른쪽 판 */
.live-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.live-side{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-content:start;min-width:0}
@media (min-width:900px){
  .live-layout{grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:start}
  .live-main{position:sticky;top:calc(var(--hd) + 12px)}
}
@media (min-width:1200px){.live-layout{grid-template-columns:minmax(0,1fr) 420px}}

/* 18. 지금 개봉 중 카드 (숯색 판 · 썸네일 + 이름 + 상품 + 금빛 진행 막대 + 오른쪽 금색 세리프 대기 수) ------------- */
.nowop{display:grid;grid-template-columns:48px minmax(0,1fr) auto 12px;align-items:center;gap:10px;padding:10px 10px 10px 12px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--border);transition:border-color var(--t-fast)}
.nowop:hover{border-color:var(--gold-line)}
.nowop__img{width:48px;height:48px;overflow:hidden;border-radius:var(--r-xs);background:var(--well-grad);border:1px solid var(--border)}
.nowop__img img{width:100%;height:100%;padding:3px;object-fit:contain}
.nowop__t{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;gap:2px;min-width:0}
.nowop__who{display:flex;align-items:center;gap:4px;font-family:var(--serif);font-size:14px;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--text)}
.nowop__who .ico{color:var(--gold)}
.nowop__who small{font-family:var(--font);font-size:12px;font-weight:500;color:var(--text-2)}
.nowop__p{max-width:100%;font-size:11px;line-height:1.3;letter-spacing:-.02em;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nowop__bar{position:relative;width:100%;height:4px;margin-top:4px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.08)}
.nowop__bar i{position:absolute;left:0;top:0;bottom:0;width:46%;border-radius:99px;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));animation:fillbar 3.2s ease-in-out infinite alternate}
.nowop.is-idle .nowop__bar i{animation:none;width:0}
.nowop.is-idle .lchip--soft{background:var(--mute-wash);border-color:var(--line);color:var(--text-3)}
.nowop.is-idle .lchip--soft::before{background:var(--text-3)}
.nowop__n{display:flex;align-items:baseline;gap:3px;white-space:nowrap}
.nowop__n b{font-family:var(--serif);font-size:24px;font-weight:700;line-height:1;color:var(--price)}
.nowop__n small{font-size:11px;color:var(--text-2)}
.nowop__go{color:var(--text-3)}

/* 19. 오늘의 개봉 대기열 (번호 원 + 이름 + 상품 + 오른쪽 '대기' 금 테두리 알약, 개봉 중 줄 = 금색 알약 + 옅은 금빛) ----------- */
.qlist{padding:12px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border)}
.qlist__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;padding-bottom:9px;border-bottom:1px solid var(--hair)}
.qlist__t{display:flex;align-items:center;gap:7px;font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--heading)}
.qlist__t .ico{color:var(--gold)}
.qlist__head .pill{height:22px;font-size:11px;gap:6px}
.qlist__rows{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.qitem{display:grid;grid-template-columns:24px 14px 52px minmax(0,1fr) auto;align-items:center;gap:7px;min-height:40px;padding:6px 8px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line)}
.qitem__no{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--gold-line);font-family:var(--serif);font-size:12px;font-weight:700;color:var(--gold-hi)}
.qitem__cr{display:grid;place-items:center;color:var(--gold)}
.qitem__who{font-size:11px;color:var(--text-2);white-space:nowrap;overflow:hidden}
.qitem__who b{font-family:var(--serif);font-size:12.5px;font-weight:700;color:var(--text)}
/* 상품 이름은 말줄임 없이 두 줄까지 */
.qitem__p i{font-style:normal;white-space:nowrap}
.qitem__p{font-size:11px;line-height:1.3;letter-spacing:-.03em;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qitem__s{display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 9px;letter-spacing:-.02em;border-radius:var(--r-pill);background:transparent;border:1px solid var(--gold-line);font-size:10.5px;font-weight:600;color:var(--gold-ink);white-space:nowrap}
.qitem__s .ico{width:10px;height:10px}
.qitem__s--on{color:var(--on-gold);background:var(--gold-grad);border-color:transparent}
.qitem__s--on .ico{color:var(--live);fill:var(--live)}
.qitem.is-on{border-color:var(--gold-line);background:linear-gradient(90deg,var(--gold-wash),var(--surface-2) 60%)}
.qitem.is-on .qitem__no{color:var(--on-gold);background:var(--gold-grad);border-color:transparent}
.qlist__more,.qlist__empty{margin-top:8px;font-size:12px;color:var(--text-3)}
@media (min-width:900px){
  .nowop{grid-template-columns:60px minmax(0,1fr) auto 14px;gap:14px;padding:12px 12px 12px 14px}
  .nowop__img{width:60px;height:60px}
  .nowop__who{font-size:17px}.nowop__p{font-size:12.5px}.nowop__n b{font-size:30px}
  .lchip--soft{height:21px;font-size:11.5px}
  .qlist{padding:16px}
  .qlist__t{font-size:18px}
  .qitem{min-height:46px;padding:5px 10px;gap:9px;grid-template-columns:28px 16px 64px minmax(0,1fr) auto}
  .qitem__no{width:28px;height:28px;font-size:13px}
  .qitem__who{font-size:12px}.qitem__who b{font-size:14px}.qitem__p{font-size:12px}
  .qitem__s{height:24px;font-size:11.5px}
  .hitp__t{font-size:28px}.hitp__more{font-size:13px}
  .lchip--lg{height:24px;padding:0 10px;font-size:12px}
  .vchip{height:24px;padding:0 9px;font-size:12px}
  .vchip .ico{width:15px;height:15px}
}

/* 20. 오늘의 HIT (시안 A: 금색 세리프 제목 + 오른쪽으로 뻗는 금빛 선 + '전체보기 >' · 숯색 판 카드 가로 줄 — 카드 그림 + 흰 이름 + 등급) ---- */
.hitp{position:relative}
.hitp__head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.hitp__head::after{content:"";order:1;flex:1 1 24px;min-width:24px;height:1px;background:linear-gradient(90deg,var(--gold-line),var(--gold-line-2))}
.hitp__t{order:0;display:flex;align-items:baseline;gap:.3em;font-family:var(--serif);font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-.02em;white-space:nowrap;color:var(--heading)}
.hitp__t .ico{align-self:center;color:var(--gold)}
.hitp__t em{font-family:var(--display);font-weight:600;letter-spacing:.03em;color:var(--heading)}
.hitp__more{order:2;display:inline-flex;align-items:center;gap:2px;flex:none;min-width:0;font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
p.hitp__more{flex:0 1 auto;color:var(--text-3)}
a.hitp__more .ico{color:var(--text-2)}
a.hitp__more:hover,a.hitp__more:hover .ico{color:var(--gold-hi)}
.hitp__empty{padding:18px 16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);font-size:13px;color:var(--text-3)}
/* 줄이 초점을 받으면(키보드) 안쪽에 링 */
.hits:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:var(--r-sm)}
/* 앞뒤 단추 = 줄 양옆 원형 화살표(시안 A PC). 폰(터치로 밂)에선 숨기고, 600 이상에서 줄이 넘칠 때만 */
.hitp__nav{display:none;order:3;flex:none;gap:6px}
.hitp__btn{position:relative;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--gold-line);background:rgba(10,10,10,.8);color:var(--gold-hi)}
.hitp__btn::before{content:"";position:absolute;inset:-5px}
.hitp__btn:hover:not(:disabled){border-color:var(--gold);background:var(--gold-wash)}
.hitp__btn:disabled{opacity:.3;cursor:default}
@media (min-width:600px){.hitp__nav:has(.hitp__btn:not(:disabled)){display:inline-flex}}
.hits{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gut) * -1);padding:2px var(--gut) 6px;scroll-snap-type:x proximity;scroll-padding-inline:var(--gut)}
.hits::-webkit-scrollbar{display:none}
.hit{flex:0 0 calc((100vw - var(--gut) * 2 - 30px) / 3.6);min-width:0;padding:8px 8px 10px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);text-align:left;scroll-snap-align:start;transition:border-color var(--t-fast)}
.hit:hover{border-color:var(--gold-line)}
.hits--grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:8px 0 0;overflow:visible}
.hits--grid .hit{flex:auto}
.hit__card{position:relative;aspect-ratio:600/796;padding:0;margin:0 6%;background:var(--well);border-radius:4px;box-shadow:0 0 0 1px rgba(201,162,74,.45),0 8px 18px -8px rgba(0,0,0,.9),0 0 22px -6px rgba(243,210,122,.28)}
.hit--top .hit__card{box-shadow:0 0 0 1px var(--gold),0 8px 18px -8px rgba(0,0,0,.9),0 0 26px -6px rgba(243,210,122,.45)}
.hit__card img{width:100%;height:100%;object-fit:cover;border-radius:4px}
.hit__grade{position:absolute;left:4px;top:4px;display:inline-flex;align-items:center;gap:2px;height:16px;padding:0 6px 0 4px;border-radius:3px;background:rgba(10,10,10,.82);border:1px solid var(--line-2);
  font-family:var(--display);font-size:9px;font-weight:700;letter-spacing:.06em;color:var(--text);line-height:1}
.hit__grade .ico{width:10px;height:10px;color:var(--gold-hi)}
.hit--top .hit__grade{color:var(--on-gold);background:var(--gold-grad);border-color:transparent}
.hit--top .hit__grade .ico{color:var(--on-gold)}
/* 이름은 줄을 바꿔 다 보여 준다(말줄임 금지) — 두 줄까지 */
.hit__name{margin-top:9px;font-size:11.5px;font-weight:600;line-height:1.3;letter-spacing:-.03em;word-break:keep-all;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hit__meta{margin-top:2px;font-size:10.5px;line-height:1.25;color:var(--gold-ink);letter-spacing:-.03em}
.hit__who{margin-top:2px;font-size:11px;color:var(--text-3)}
@media (min-width:600px){.hit{flex-basis:126px}.hits--grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:900px){.hits{margin:0;padding:2px 0 6px}.hit{flex-basis:140px;padding:10px 10px 12px}.hits--grid{grid-template-columns:repeat(6,minmax(0,1fr))}.hit__grade{height:18px;font-size:10px}.hit__name{font-size:12.5px}.hit__meta{font-size:11px}}
/* (2026-10-16 HIT 카드 고르기) GRADES 밖 등급 — 수록 카드 결(setdex.grade_tiers)과 같게: 금(top) · 은(mid) · 진한 숯(red 자리) · 기본(base).
   hit_card 는 이런 등급을 클래스로 주지 않아서(hit--etc) 그림 alt 끝 '… SIG 등급' 으로 고른다. 새 세트 등급이 생기면 tests/test_admin_hitpick 이 알려 준다. */
.hit:not(.hit--top):has(img:is([alt$=" RGB 등급"],[alt$=" FUR 등급"],[alt$=" MA 등급"],[alt$=" SIG 등급"],[alt$=" OVN 등급"],[alt$=" SC 등급"])) .hit__card{box-shadow:0 0 0 1px var(--gold),0 8px 18px -8px rgba(0,0,0,.9)}
.hit:not(.hit--top):has(img:is([alt$=" RGB 등급"],[alt$=" FUR 등급"],[alt$=" MA 등급"],[alt$=" SIG 등급"],[alt$=" OVN 등급"],[alt$=" SC 등급"])) .hit__grade{color:var(--on-gold);background:var(--gold-grad);border-color:transparent}
.hit:not(.hit--top):has(img:is([alt$=" ACE 등급"],[alt$=" RRR 등급"],[alt$=" RR 등급"])) .hit__grade{color:var(--gold-ink);border-color:var(--gold-line)}
.hit:not(.hit--top):has(img:is([alt$=" S 등급"],[alt$=" SSR 등급"],[alt$=" H 등급"],[alt$=" PR 등급"],[alt$=" P 등급"],[alt$=" R 등급"],[alt$=" U 등급"],[alt$=" UC 등급"],[alt$=" C 등급"])) .hit__grade{color:var(--text-2)}
.hit:not(.hit--top):has(img:is([alt$=" S 등급"],[alt$=" SSR 등급"],[alt$=" H 등급"],[alt$=" PR 등급"],[alt$=" P 등급"],[alt$=" R 등급"],[alt$=" U 등급"],[alt$=" UC 등급"],[alt$=" C 등급"])) .hit__grade .ico{color:var(--text-3)}
/* 등급 이름을 모르는 등급(SIG 등)은 아랫줄에 상품 이름이 길게 나온다 — 두 줄까지만 */
.hit__meta{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;overflow-wrap:anywhere}

/* 21. (라이브 바로 구매 바 — 2026-10-16 결제 기능을 없애며 지움) */

/* 22. 상품 상세 (시안 A_product_m / A_product_pc) -------------------------------------------------------------
   갤러리: <section class="gal" data-gallery><div class="gal__track" tabindex="0">…<div class="gal__slide"><img></div>…</div>
           <span class="gal__badges">{{ ui.badges(p.badges) }}</span><div class="gal__thumbs">버튼(점)</div></section>
   숯색 판 + 금빛 테두리 · 사진 칸 = 위에서 금빛 조명 · 점 = 흐림, 지금 = 금색 */
.gal{position:relative;padding:0;overflow:hidden;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border)}
.gal__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;background:var(--well-grad);isolation:isolate}
.gal__track::-webkit-scrollbar{display:none}
.gal__slide{position:relative;flex:0 0 100%;aspect-ratio:1.3/1;scroll-snap-align:start;overflow:hidden}
.gal__slide img{position:absolute;inset:0;width:100%;height:100%;padding:5% 7% 10%;object-fit:contain;filter:drop-shadow(0 16px 20px rgba(0,0,0,.7))}
.gal__badges{position:absolute;left:14px;top:14px;z-index:1}
.gal__badges .badge,.pd__head .badge{height:20px;padding:0 8px;font-size:10.5px}
.gal__thumbs{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:6px}
.gal__thumbs button{position:relative;width:14px;height:3px;border-radius:2px;background:rgba(244,238,223,.28);overflow:hidden;color:transparent;font-size:0}
.gal__thumbs button[aria-current="true"]{width:22px;background:var(--gold-hi)}
.gal__thumbs img{display:none}
@media (min-width:900px){.gal__slide{aspect-ratio:1/1}.gal__slide img{padding:9%}}
.pd{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
.pd__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pd__title{font-family:var(--serif);font-size:21px;font-weight:700;line-height:1.32;letter-spacing:-.03em;color:var(--heading)}
.pd__head .badges{flex:none;padding-top:3px}
.pd__sub{margin-top:-6px;font-size:12px;color:var(--text-2)}
.boxinfo{display:inline-flex;align-items:center;gap:10px;justify-self:start;height:32px;padding:0 12px 0 14px;border-radius:var(--r-pill);border:1px solid var(--gold-line);
  background:var(--surface-2);font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.boxinfo>.ico:first-child{color:var(--gold)}
.boxinfo>.ico:last-child{color:var(--text-3)}
.blk{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:4px}
.blk__h{font-size:14px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.blk__h small{display:block;margin-top:1px;font-size:11px;font-weight:500;color:var(--text-2);letter-spacing:-.01em}
.qtyrow{display:flex;align-items:center;gap:14px}
.qtyrow__note{font-size:11.5px;color:var(--text-2)}
.pd__btns{display:none}
.pd-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:900px){
  .pd-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px;align-items:start}
  .pd{gap:14px}
  .pd__title{font-size:30px;line-height:1.28}
  .pd__sub{font-size:14px}
  .pd__head .badge{height:22px;padding:0 9px;font-size:11px}
  .price--lg .price__amt{font-size:38px}
  .price--lg .price__was{font-size:14px}
  .price--lg .price__off{font-size:16px}
  .boxinfo{height:38px;padding:0 16px 0 18px;font-size:14.5px}
  .blk{gap:10px;margin-top:8px}
  .blk__h{font-size:15.5px}
  .blk__h small{font-size:12.5px;margin-top:2px}
  .fopt__box{padding:14px 40px 14px 16px;gap:3px}
  .fopt__ic .ico{width:26px;height:26px}
  .fopt__t{font-size:15px}
  .fopt__d{font-size:12px}
  .fopt__tag{height:22px;font-size:11px;padding:0 9px}
  .fopt__mark{width:22px;height:22px;right:12px;top:12px}
  .fulfil__note{font-size:12px}
  .qty{height:44px;min-width:180px;grid-template-columns:44px minmax(60px,1fr) 44px}
  .qty button{width:44px;height:42px}
  .qtyrow__note{font-size:13px}
  .pd__btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
}
.pd__desc{display:grid;gap:12px;font-size:14px;line-height:1.75;color:var(--text-2)}
.pd__desc img{width:100%;max-width:720px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--well)}

/* 받는 방법 = 옵션 카드 (시안: 숯색 칸 + 옅은 테두리, 고른 것 = 금색 1.5px 테두리 + 오른쪽 위 금색 원 체크(검정 체크)) — 결제수단(paym)도 같은 결 */
.fulfil{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fulfil--one{grid-template-columns:1fr}
.fopt{position:relative;display:block;cursor:pointer}
.fopt input{position:absolute;opacity:0;width:1px;height:1px}
.fopt__box{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;height:100%;padding:10px 34px 11px 12px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line-2);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.fopt:hover .fopt__box{border-color:var(--gold-line)}
.fopt__ic{color:var(--gold-ink)}
.fopt__ic .ico{width:22px;height:22px;stroke-width:1.4}
.fopt--live .fopt__ic{color:var(--gold-hi)}
.fopt__mark{position:absolute;right:9px;top:9px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-2);color:transparent;background:transparent}
.fopt__mark .ico{stroke-width:3}
.fopt__t{font-size:14px;font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--text)}
.fopt__t em{margin-left:2px;font-size:.78em;font-weight:800;letter-spacing:.06em;color:var(--live-hi)}
.fopt__d{font-size:11px;line-height:1.35;color:var(--text-2)}
.fopt__tag{display:inline-flex;align-items:center;height:18px;margin-top:4px;padding:0 8px;border-radius:var(--r-pill);background:var(--mute-wash);border:1px solid var(--line);font-size:10px;font-weight:600;color:var(--text-2)}
.fopt input:checked+.fopt__box{border-color:var(--gold);box-shadow:0 0 0 .5px var(--gold) inset,0 0 18px -8px rgba(243,210,122,.45)}
.fopt input:checked+.fopt__box .fopt__mark{color:var(--on-gold);border-color:transparent;background:var(--gold-grad)}
.fopt input:checked+.fopt__box .fopt__tag{color:var(--gold-ink);border-color:var(--gold-line-2);background:var(--gold-wash)}
.fopt input:checked+.fopt__box .fopt__ic{color:var(--gold-hi)}
.fopt input:focus-visible+.fopt__box{outline:2px solid var(--focus);outline-offset:2px}
.fulfil__note{grid-column:1/-1;display:none;gap:6px;margin-top:-2px;font-size:11px;line-height:1.45;color:var(--text-2)}
.fulfil:has(.fopt--live input:checked) .fulfil__note{display:flex}
.fulfil__note .ico{flex:none;margin-top:1px;color:var(--gold-ink)}

/* 수량 (시안: 금빛 테두리 알약 − 1 +) */
.qty{display:inline-grid;grid-template-columns:38px minmax(48px,1fr) 38px;align-items:stretch;min-width:150px;height:38px;border-radius:var(--r-pill);background:transparent;border:1px solid var(--gold-line);overflow:hidden}
.qty button{justify-self:stretch;width:100%;height:100%;display:grid;place-items:center;color:var(--gold-hi);background:transparent;transition:background-color var(--t-fast)}
.qty button:hover{background:var(--gold-wash)}
.qty button:disabled{opacity:.3;cursor:not-allowed;background:transparent}
.qty button .ico{stroke-width:1.8}
.qty input{width:100%;height:100%;padding:0;border:0;background:none;text-align:center;font-size:16px;font-weight:600;color:var(--text);-moz-appearance:textfield;appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input:focus{outline:none;background:var(--gold-wash)}
.qty:focus-within{border-color:var(--gold)}
.qty--sm{grid-template-columns:26px 28px 26px;min-width:0;height:28px}
.qty--sm button .ico{width:12px;height:12px}
.qty--sm input{font-size:13px}

/* 폰 하단 구매 바 (시안: 검정 바 + 위 금빛 선 · 총 금액 | 금색 그라데이션 '구매하기' | 금 테두리 장바구니) — 900부터 숨김 */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-dock);display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,1.4fr) 46px;align-items:center;gap:8px;
  padding:8px var(--gut) calc(8px + env(safe-area-inset-bottom));background:rgba(10,10,10,.96);border-top:1px solid var(--gold-line);box-shadow:0 -12px 28px -16px rgba(0,0,0,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.buybar__sum{display:grid;line-height:1.25;padding-right:8px;border-right:1px solid var(--hair)}
.buybar__sum>span{font-size:10.5px;color:var(--text-2)}
.buybar__sum b{font-family:var(--serif);font-size:17px;font-weight:700;white-space:nowrap;color:var(--price)}
.buybar__go{--btn-h:46px;font-size:15.5px;gap:8px;border-radius:var(--r-sm)}
.buybar__cart{width:46px;height:46px;display:grid;place-items:center;border-radius:var(--r-sm);border:1px solid var(--gold-line);background:transparent;color:var(--gold-hi)}
.buybar__cart:hover{background:var(--gold-wash)}
@media (min-width:900px){.buybar{display:none}}

/* 23. 주문 단계 · 주문서 (시안 A_checkout_m) --------------------------------------------------
   단계: 지난 단계 = 금 테두리 원 + 체크 · 지금 = 금색 꽉 찬 원 · 남은 단계 = 옅은 선 원, 사이 금빛 선 */
.steps{display:flex;align-items:flex-start;justify-content:space-between;padding:4px 4px 2px}
.steps__i{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.steps__i+.steps__i::before{content:"";position:absolute;right:calc(50% + 22px);left:calc(-50% + 22px);top:17px;height:1px;background:var(--line-2)}
.steps__i.is-done+.steps__i::before{background:var(--gold-line)}
.steps__orb{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);color:var(--text-3)}
.steps__orb .ico{width:18px;height:18px;stroke-width:1.6}
.steps__i.is-done .steps__orb{color:var(--gold-hi);border-color:var(--gold-line);background:var(--gold-wash)}
.steps__i.is-on .steps__orb{color:var(--on-gold);border-color:transparent;background:var(--gold-grad)}
.steps__t{font-size:11.5px;color:var(--text-3);white-space:nowrap}
.steps__i.is-on .steps__t{color:var(--gold-hi);font-weight:700}
.steps__i.is-done .steps__t{color:var(--text-2)}
.olines{border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface)}
.oline{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px}
.oline+.oline{border-top:1px solid var(--hair)}
.oline__img{position:relative;width:56px;height:52px;overflow:hidden;border-radius:var(--r-xs);background:var(--well-grad);border:1px solid var(--border)}
.oline__img img{width:100%;height:100%;padding:3px;object-fit:contain}
.oline__img .pcard__tag{left:3px;top:3px;height:14px;padding:0 5px;font-size:8px;gap:3px}
.oline__img .pcard__tag::before{width:3px;height:3px}
.oline__t{display:grid;gap:1px;min-width:0;line-height:1.3}
.oline__t small{font-size:10.5px;color:var(--text-3)}
.oline__t b{font-size:13px;font-weight:600;line-height:1.35;letter-spacing:-.02em;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.oline__t span{font-size:11px;color:var(--text-3)}
.oline__t em{color:var(--gold-ink);font-weight:700}
.oline__p{font-family:var(--serif);font-size:14px;font-weight:700;white-space:nowrap;color:var(--price)}
.addr{position:relative;display:grid;gap:5px;padding:10px 36px 10px 12px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface-2)}
.addr__row{display:flex;align-items:center;gap:9px;font-size:12px;line-height:1.4;color:var(--text-2);min-width:0}
.addr__row b{font-size:13.5px;font-weight:700;color:var(--text)}
.addr__row i{width:1px;height:12px;background:var(--gold-line-2)}
.addr__row .ico{flex:none;color:var(--gold-ink);stroke-width:1.5}
.addr__row--a{align-items:flex-start}
.addr__row small{display:inline;margin-left:4px;font-size:11px;color:var(--text-3)}
.addr__go{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--text-3)}
a.addr:hover{border-color:var(--gold-line)}
/* 결제수단 = 옵션 카드: 숯색 칸 + 옅은 테두리 · 고른 칸 = 금색 테두리 + 오른쪽 위 금색 원 체크 */
.paym{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.paym__opt{position:relative;display:block;cursor:pointer;min-width:0}
.paym__opt input{position:absolute;opacity:0;width:1px;height:1px}
.paym__box{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;padding:6px 4px 8px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface-2);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.paym__opt:hover .paym__box{border-color:var(--gold-line)}
.pbadge{width:100%;height:30px;display:flex;align-items:center;justify-content:center;gap:2px;border-radius:var(--r-xs);font-weight:900;font-size:12.5px;line-height:1;letter-spacing:-.02em}
.pbadge--kakaopay{background:var(--kakao);color:var(--kakao-ink)}
.pbadge--kakaopay b{font-size:14px}
.pbadge--naverpay{background:var(--naver);color:var(--text)}
.pbadge--naverpay i{width:15px;height:15px;display:grid;place-items:center;border-radius:50%;background:var(--text);color:var(--naver);font-size:10px;font-style:normal;font-weight:900}
.pbadge--naverpay b{font-weight:700}
.pbadge--tosspay{background:var(--toss);color:var(--text);font-size:14px}
.pbadge--payco{background:var(--payco);color:var(--text);font-size:12px}
.pbadge--samsungpay{background:var(--samsung);color:var(--text)}
.pbadge--card{background:var(--char-2);color:var(--gold-hi);border:1px solid var(--border)}
.pbadge--card .ico{stroke-width:1.5}
.paym__t{max-width:100%;font-size:10px;font-weight:600;line-height:1.2;letter-spacing:-.05em;color:var(--text-2);text-align:center}
.paym__chk{position:absolute;right:-5px;top:-6px;width:18px;height:18px;display:none;place-items:center;border-radius:50%;background:var(--gold-grad);border:1.5px solid var(--bg);color:var(--on-gold)}
.paym__chk .ico{stroke-width:3.4}
.paym__opt input:checked+.paym__box{border-color:var(--gold);box-shadow:0 0 0 .5px var(--gold) inset}
.paym__opt input:checked+.paym__box .paym__chk{display:grid}
.paym__opt input:checked+.paym__box .paym__t{color:var(--gold-hi);font-weight:700}
.paym__opt input:focus-visible+.paym__box{outline:2px solid var(--focus);outline-offset:2px}
@media (min-width:600px){.paym{gap:10px}.pbadge{height:40px}.paym__t{font-size:12.5px;letter-spacing:-.02em}}
/* 결제 금액: 총 결제금액 = 금색 세리프 크게 */
.psum{display:grid;gap:6px;width:72%;margin-left:auto;padding:0 2px}
.psum>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12px;line-height:1.35;color:var(--text-2)}
.psum dd{font-weight:600;color:var(--text);white-space:nowrap}
.psum dd.is-red{color:var(--live-hi)}
.psum__total{margin-top:2px;padding-top:8px;border-top:1px solid var(--gold-line-2)}
.psum__total dt{font-family:var(--serif);font-size:14.5px;font-weight:700;color:var(--text)}
.psum__total dd{font-family:var(--serif);font-size:21px;font-weight:700;line-height:1.2;color:var(--price)}
@media (min-width:600px){.psum{width:min(100%,420px)}}
.agree{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 2px 0}
.agree>a{display:inline-flex;align-items:center;flex:none;font-size:11px;color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
.agree .cbox{font-size:11.5px;gap:8px}
.agree .cbox__mark{width:20px;height:20px}
@media (min-width:900px){
  .steps__orb{width:42px;height:42px}
  .steps__orb .ico{width:20px;height:20px}
  .steps__t{font-size:13px}
  .steps__i+.steps__i::before{top:21px;right:calc(50% + 26px);left:calc(-50% + 26px)}
  .panel{padding:18px 20px 20px}
  .panel+.panel{margin-top:14px}
  .panel__t{font-size:18px}
  .panel__ic{width:28px;height:28px}
  .panel__ic .ico{width:15px;height:15px}
  .panel__more,.panel__aside{font-size:13px}
  .oline{grid-template-columns:76px minmax(0,1fr) auto;gap:16px;padding:14px}
  .oline__img{width:76px;height:68px}
  .oline__t small{font-size:12px}.oline__t b{font-size:14.5px}.oline__t span{font-size:12px}.oline__p{font-size:17px}
  .addr{padding:14px 40px 14px 16px;gap:8px}.addr__row{font-size:13.5px}.addr__row b{font-size:15px}
  .psum>div{font-size:14px}.psum__total dt{font-size:17px}.psum__total dd{font-size:28px}
  .agree .cbox{font-size:13px}.agree>a{font-size:12.5px}
  .paybar__go{--btn-h:58px;font-size:18px}.paybar__go b{font-size:20px}
}
.co__mock{display:flex;align-items:center;gap:6px;margin:4px 2px 0;font-size:11px;color:var(--text-3)}
/* 결제하기 (시안: 전체 폭 금색 '₩201,000 결제하기' — 금액은 세리프) — 폰은 화면 아래 붙음 */
.paybar{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom));z-index:var(--z-dock);margin-top:10px}
.paybar__go{width:100%;gap:8px;--btn-h:52px;font-size:16px;font-weight:700;border-radius:var(--r-sm);box-shadow:inset 0 1px 0 rgba(255,240,200,.45),0 12px 28px -12px rgba(0,0,0,.95),var(--glow-btn)}
.paybar__go b{font-family:var(--serif);font-weight:700;font-size:18px}
.paybar__go .ico{color:var(--on-gold)}
.paybar__chev{position:absolute;right:18px;top:50%;margin-top:-11px}
@media (min-width:900px){.paybar{position:static;margin-top:18px}}

/* 24. 탭 · 아코디언 --------------------------------------------------------------- */
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--gold-line-2)}
.tabs::-webkit-scrollbar{display:none}
.tabs [role="tab"],.tabs a{position:relative;flex:none;height:46px;padding:0 14px;display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:500;color:var(--text-2);white-space:nowrap}
.tabs [role="tab"]:hover,.tabs a:hover{color:var(--gold-hi)}
.tabs [aria-selected="true"],.tabs a[aria-current="true"],.tabs a[aria-current="page"]{color:var(--gold-hi);font-weight:700}
.tabs [aria-selected="true"]::after,.tabs a[aria-current="true"]::after,.tabs a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--gold-hi)}
.tabpanel{padding-top:16px}
.acc{display:grid;gap:8px}
.acc details{border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line)}
.acc details[open]{border-color:var(--gold-line-2);background:var(--surface-3)}
.acc summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;font-size:14.5px;font-weight:600;color:var(--text);cursor:pointer;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";width:8px;height:8px;margin-left:auto;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg);transition:transform var(--t)}
.acc details[open] summary::after{transform:rotate(-135deg)}
.acc__body{padding:0 14px 14px;font-size:13.5px;line-height:1.7;color:var(--text-2)}

/* 25. 표 (폰에서 카드) · 목록 ------------------------------------------------------------ */
.table{width:100%;font-size:13.5px}
.table th{padding:10px 12px;text-align:left;font-size:12px;font-weight:700;color:var(--text-3);border-bottom:1px solid var(--gold-line-2)}
.table td{padding:12px;border-bottom:1px solid var(--hair)}
@media (max-width:599px){
  .table--cards thead{display:none}
  .table--cards tr{display:grid;gap:4px;padding:12px 0;border-bottom:1px solid var(--hair)}
  .table--cards td{padding:0;border:0}
  .table--cards td[data-label]::before{content:attr(data-label);margin-right:8px;color:var(--text-3);font-size:12px}
}
.nlist{border-top:1px solid var(--gold-line-2)}
.nlist a{display:flex;align-items:center;gap:10px;min-height:54px;padding:10px 2px;border-bottom:1px solid var(--hair);font-size:14px}
.nlist a b{flex:1;min-width:0;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nlist a:hover b{color:var(--gold-hi)}
.nlist time{flex:none;font-size:12px;color:var(--text-3)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13.5px}
.kv dt{color:var(--text-3)}

/* 26. 페이지 넘김 (시안 A_list_pc: 금 테두리 네모 화살표 · 지금 쪽 = 금색 꽉 찬 네모 + 검정 숫자) ------------------------------------------- */
.pager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:28px}
.pager a,.pager span{min-width:36px;height:36px;display:inline-grid;place-items:center;border-radius:var(--r-xs);font-size:14px;font-weight:500;color:var(--text-2)}
.pager>a:first-child,.pager>a:last-child,.pager>span.is-off{border:1px solid var(--gold-line);color:var(--gold-hi)}
.pager a:hover{background:var(--gold-wash);color:var(--gold-hi)}
.pager [aria-current="page"]{color:var(--on-gold);background:var(--gold-grad);font-weight:700}
.pager .is-off{opacity:.3}
/* 'N / M' 은 폰 전용 — '.pager span'(0,1,1) 보다 우선순위를 높여 PC 에서 숨긴다 */
.pager .pager__now{display:none}
@media (max-width:599px){.pager .pager__n{display:none!important}.pager .pager__now{display:inline-grid;min-width:70px;border:0;font-family:var(--serif);color:var(--gold-hi)}}

/* 27. 빈 화면 (ct-empty: 받침대 위 홀로 카드 한 장) ------------------------------------------------------------------ */
.empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:36px 16px 40px;text-align:center;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border)}
.empty__ic{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;color:var(--gold-ink);background:var(--gold-wash);border:1px solid var(--gold-line)}
.empty__ic .ico{stroke-width:1.4}
.empty__art{width:auto;height:150px;margin-bottom:4px}
.empty__t{margin-top:4px;font-family:var(--serif);font-size:17px;font-weight:700;color:var(--heading)}
.empty__d{font-size:13px;color:var(--text-2)}
.empty .btn{margin-top:10px}

/* 28. 토스트 (flash) ------------------------------------------------------------ */
.toasts{position:fixed;left:50%;top:calc(var(--hd) + 8px);z-index:var(--z-toast);display:grid;gap:8px;width:min(440px,calc(100% - 24px));transform:translateX(-50%);pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:12px 10px 12px 14px;border-radius:var(--r-md);background:var(--char-2);border:1px solid var(--border);border-left:3px solid var(--gold);box-shadow:var(--sh-3);color:var(--text);pointer-events:auto;animation:rise var(--t) var(--ease)}
.toast--ok{border-left-color:var(--ok)}
.toast--ok .toast__ic{color:var(--ok)}
.toast--err{border-left-color:var(--danger)}
.toast--err .toast__ic{color:var(--danger)}
.toast--info{border-left-color:var(--info)}
.toast--info .toast__ic{color:var(--info)}
.toast__msg{flex:1;font-size:13.5px;font-weight:600}
.toast__x{width:32px;height:32px;display:grid;place-items:center;color:var(--text-3)}
.toast__x:hover{color:var(--gold-hi)}
.toast.is-out{opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s}

/* 29. 모달 · 확인창 -------------------------------------------------------------- */
.modal{width:min(440px,calc(100% - 32px));padding:0;border:1px solid var(--gold-line);border-radius:var(--r-lg);background:var(--surface);color:var(--text);box-shadow:var(--sh-3)}
.modal::backdrop{background:var(--scrim)}
.modal__head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--gold-line-2);font-family:var(--serif);font-size:16px;font-weight:700;color:var(--heading)}
.modal__body{padding:22px 18px 12px;font-size:15px;line-height:1.6}
.modal__foot{display:flex;gap:8px;padding:12px 16px 16px}
.modal__foot .btn{flex:1}

/* 30. 신뢰 태그 · 링크 카드 · 후기 ----------------------------------------------------- */
.trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.trust__i{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border)}
.trust__ic{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;color:var(--gold-ink);background:transparent;border:1px solid var(--gold-line)}
.trust__i b{display:block;font-size:13.5px;font-weight:700;color:var(--text)}
.trust__i span{display:block;font-size:11.5px;color:var(--text-3)}
@media (min-width:900px){.trust{grid-template-columns:repeat(4,minmax(0,1fr))}}
.links{display:grid;gap:8px}
.links__a{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 14px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line);text-align:left;color:var(--text);transition:border-color var(--t-fast),background-color var(--t-fast)}
.links__a:hover{border-color:var(--gold-line);background:var(--surface-3)}
.links__a.is-off{opacity:.55}
.links__ic{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:var(--r-md);color:var(--gold-hi);background:var(--gold-wash)}
.links__ic--ig{color:var(--text);background:var(--insta)}.links__ic--tt{color:var(--text);background:var(--tiktok);box-shadow:inset 0 0 0 1px var(--line-2)}.links__ic--yt{color:var(--text);background:var(--youtube)}
.links__ic--kakao{background:var(--kakao);color:var(--kakao-ink)}.links__ic--kk{background:var(--char-2);color:var(--kakao)}
.links__t{flex:1;min-width:0;display:grid}
.links__t b{font-size:14.5px;font-weight:700}
.links__t span{font-size:12px;color:var(--text-3)}
.links__go{color:var(--text-3)}
.review{padding:14px 0;border-bottom:1px solid var(--hair)}
.review__top{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-3)}
.review__body{margin-top:6px;font-size:13.5px;line-height:1.6}

/* 31. 푸터 (시안 A: 검정 + 위 금빛 선 · 가운데 작은 Cinzel 'CROWN TCG | YOUR COLLECTION, OUR PRIDE' · 흐림 글자) ------------------------------- */
.ft{margin-top:48px;padding:0 0 32px;background:var(--bg)}
.ft__tag{display:flex;align-items:center;justify-content:center;gap:14px;padding:22px 0 20px;font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink);white-space:nowrap}
.ft__tag::before,.ft__tag::after{content:"";flex:1;min-width:20px;height:1px;background:var(--gold-line)}
.ft__tag a:hover{color:var(--gold-hi)}
.ft__tag i{font-style:normal;color:var(--gold-line)}
.ft__tag span{color:var(--text-3)}
.ft__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--hair)}
.ft__links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font-size:12.5px;color:var(--text-2)}
.ft__links a:hover{color:var(--gold-hi)}
.ft__links .is-strong{color:var(--text);font-weight:700}
.ft__biz{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin-top:16px;font-size:11.5px;color:var(--text-3);text-align:center}
.ft__biz div{display:flex;gap:5px}
.ft__biz dt::after{content:":"}
.ft__biz a{color:inherit}.ft__biz .ft__chk{text-decoration:underline;text-underline-offset:2px}   /* (sell) 사업자정보확인·구매안전서비스 확인 링크 */
.ft__copy{margin-top:14px;font-family:var(--display);font-size:11px;letter-spacing:.12em;color:var(--text-3);text-align:center}
@media (max-width:599px){.ft__tag{gap:10px;font-size:9.5px;letter-spacing:.16em}.ft__tag::before,.ft__tag::after{min-width:12px}}
@media (min-width:900px){.ft{margin-top:72px;padding-bottom:40px}.ft__tag{padding:30px 0 26px;font-size:11px;gap:22px}.ft__links{gap:6px 28px;font-size:13px}}

/* 32. 불러오는 중 ------------------------------------------------------------------ */
.skel{position:relative;overflow:hidden;border-radius:var(--r-sm);background:rgba(255,255,255,.05)}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(243,210,122,.08),transparent);animation:shimmer 1.4s infinite}

/* 33. 움직임 줄이기 ---------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* 21. 머리 맨 위 회원 줄 · 바닥글 링크 (2026-10-29 담당 T — 쇼핑몰 완성) ------------------------------------
   base.html <nav class="util">: PC(900~)에서만, 방송 띠(맨 위 32px)와 같은 줄 오른쪽. 띠 글자는 그만큼 비켜 선다.
   손님 = 로그인 | 회원가입 | 주문조회 | 고객센터 · 회원 = ○○님 | 마이페이지 | 주문조회 | 로그아웃 | 고객센터 */
.util{display:none}
@media (min-width:900px){
  body.has-util{padding-top:32px}
  .util{display:block;position:absolute;left:0;right:0;top:0;height:32px;z-index:calc(var(--z-header) + 1);pointer-events:none}
  .util__in{display:flex;align-items:center;justify-content:flex-end;height:100%}
  .util__in>*{pointer-events:auto;display:inline-flex;align-items:center;height:100%;font-size:12px;line-height:1;color:var(--text-2);white-space:nowrap}
  .util__in>*+*::before{content:"";width:1px;height:10px;margin:0 11px;background:var(--line-2)}
  .util a,.util button{color:inherit;transition:color var(--t-fast)}
  .util a:hover,.util button:hover{color:var(--gold-hi)}
  .util a:focus-visible,.util button:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-xs)}
  .util__hi{max-width:120px;color:var(--text-3)}
  .util__hi b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--text)}
  .util .util__join{font-weight:700;color:var(--gold-ink)}
  .util__f button{height:100%;padding:0;border:0;background:none;font:inherit;cursor:pointer}
  /* 방송 띠 글자가 오른쪽 회원 줄과 겹치지 않게 */
  .has-util .onair[data-band]{justify-content:flex-start;padding-left:var(--gut);padding-right:430px}
}
@media (min-width:1200px){.has-util .onair[data-band]{justify-content:center;padding-left:430px;padding-right:430px}}
@media (min-width:900px) and (max-width:1199px){.util__in>*+*::before{margin:0 8px}}
.ft__links a{padding:4px 0}
.drawer__cs a{color:inherit}
/* 방송 띠가 없는 화면에서는 회원 줄이 혼자 띠가 된다 */
@media (min-width:900px){body.has-util:not(.has-band) .util{background:var(--surface);border-bottom:1px solid var(--gold-line-2)}}
/* (검토 10-29) 회원·관리자 줄은 손님 줄보다 길다(이름 · 마이페이지 · 로그아웃 · 관리자 화면) — 방송 띠 글자가 그만큼 더 비켜 선다.
   관리자 1200 폭에서 긴 '다음 라이브' 글자가 회원 줄 밑으로 겹치던 것 */
@media (min-width:900px){
  .has-util--user .onair[data-band]{padding-right:450px}
  .has-util--admin .onair[data-band]{padding-right:530px}
}
@media (min-width:1200px){
  .has-util--user .onair[data-band]{padding-left:450px;padding-right:450px}
  .has-util--admin .onair[data-band]{justify-content:flex-start;padding-left:var(--gut);padding-right:530px}
}
/* 폰 바닥글 링크: 누를 곳 높이 44px */
@media (max-width:899px){.ft__links{gap:0 18px}.ft__links a{display:inline-flex;align-items:center;min-height:44px;padding:0}}
/* /live 바닥글(base.html data-live)은 예전 판 크기 그대로 — 사용자 규칙 '라이브 화면은 손대지 않는다'(QA VIS-01). 위 넓히기를 되돌린다 */
.ft__links[data-live] a{padding:0}
@media (max-width:899px){.ft__links[data-live]{gap:6px 18px}.ft__links[data-live] a{display:inline;min-height:0}}

/* ── 누를 칸 44px (QA VIS-09·VIS-10, 2026-10-30 마지막 통합) ─────────────────────────────────────────
   보이는 크기·모양은 그대로 두고, 투명한 가상 칸(::after)으로 '누르는 칸'만 44px 까지 넓힌다.
   칸이 이미 44px 보다 크면 min() 이 0 을 골라 그대로다. 손님 화면만 — 관리자 공용 작은 단추는 그대로(미룬 항목),
   라이브 화면(body.live-page)은 손대지 않는다(사용자 규칙: 영상 + 결제하기 + 채팅만).
   세로로 붙어 있는 목록(PC 거르기 줄·별점 등)은 이웃 칸을 덮지 않게 넣지 않는다. 수량 ± 는 둥근 틀(overflow:hidden) 안이라 못 넓힌다. */
body.shop:not(.live-page) :is(.chip, .cat, .pd-label, .anew__chip, .slider__toggle, .rcv__clear, .page-flow .panel__more,
  .util__in a, .util__in button, .pager a){position:relative}
body.shop:not(.live-page) :is(.chip, .pd-label, .anew__chip, .slider__toggle, .rcv__clear, .page-flow .panel__more,
  .util__in a, .util__in button, .pager a, .btn:not(.is-loading), .pw__eye, .gal__expand, .hd__sbtn, .onair, .rcv__x,
  .agree .cbox, .newaddr__save, .anew__form>.cbox)::after{
  content:"";position:absolute;
  top:min(0px, calc((100% - 44px) / 2));bottom:min(0px, calc((100% - 44px) / 2));
  left:min(0px, calc((100% - 44px) / 2));right:min(0px, calc((100% - 44px) / 2))}
/* 카테고리 칩(.cat — 홈은 ::after 를 색 밑줄로 씀)·상품 탭(::after = 고른 탭 밑줄)은 ::before 로 */
body.shop:not(.live-page) .cat::before{content:"";position:absolute;
  top:min(0px, calc((100% - 44px) / 2));bottom:min(0px, calc((100% - 44px) / 2));left:0;right:0}
body.shop:not(.live-page) .pd-tabbar [role="tab"]{position:relative}
body.shop:not(.live-page) .pd-tabbar [role="tab"]::before{content:"";position:absolute;
  top:min(0px, calc((100% - 44px) / 2));bottom:min(0px, calc((100% - 44px) / 2));left:0;right:0}
@media (max-width:899px){
  /* 폰: 상품 목록 거르기 칩(가로로 흐르는 줄)도 */
  body.shop:not(.live-page) :is(.cl-opt, .cl-live){position:relative}
  body.shop:not(.live-page) :is(.cl-opt, .cl-live)::after{content:"";position:absolute;
    top:min(0px, calc((100% - 44px) / 2));bottom:min(0px, calc((100% - 44px) / 2));left:0;right:0}
}
@media (min-width:900px){
  /* PC 왼쪽 거르기 줄은 30px 줄이 세로로 붙은 목록 — 넓히면 이웃 줄을 덮으니 넣지 않는다(위 규칙과 같은 우선순위, 뒤에 와서 이김) */
  body.shop:not(.live-page) .cl-side .chip::after{content:none}
}
/* 칩이 든 가로 스크롤 줄(.chips · 폰 .cl-opts)은 넘치는 것을 잘라서 가상 칸도 잘린다 — 위아래 여백을 4px 로(칩 크기는 그대로) */
body.shop:not(.live-page) .chips{padding-top:4px;padding-bottom:4px}
body.shop:not(.live-page) .cats__row{padding-top:3px;padding-bottom:3px}
@media (max-width:899px){body.shop:not(.live-page) .cl-opts{padding-top:4px;padding-bottom:4px}}
@media (min-width:900px){
  /* PC 머리 위 줄(32px)은 화면 맨 위에 붙어 위로는 넓힐 수 없다 — 아래로만 12px 넓혀 44px (태블릿 가로 화면도 이 줄을 손가락으로 누른다) */
  body.shop:not(.live-page) .util .util__in :is(a, button)::after{top:0;bottom:-12px}
}
/* 머리 오른쪽 아이콘 단추(찾기·장바구니 등)는 틈 없이 붙어 있어 가상 칸이 옆 단추에 가린다 — 상자를 44px 로(아이콘 크기는 그대로) */
body.shop:not(.live-page) .hd__acts .ibtn{width:44px}
/* 단, PC(1200 이상) 로그인·마이페이지 단추는 아이콘 + 글 — 넓이는 글만큼(44px 면 글이 장바구니 단추 밑으로 깔려 글 오른쪽이 장바구니로 눌린다) */
@media (min-width:1200px){body.shop:not(.live-page) .hd__acts .hd__user{width:auto}}