/* 쇼핑몰 공용 껍데기 — 회원 · 상품 · 주문 화면이 모두 함께 쓴다
   (ContentsDoc/14 §5 «화면 — 블록으로»). 실제 목록 · 표 · 폼 세부 모양은
   각 트랙(A~D)의 화면 스크립트가 이 자리 안에 채운다.

   🔴 색은 역할 변수만 쓴다 — 새 색값을 여기서 짓지 않는다
      (brands/<슬러그>/assets/theme.config.js 가 값의 단일 소스). */

.shop{ padding: 56px 0; }
/* 🔴 .shop .container 를 따로 덮지 않는다 (2026-09-21 소유자 「정렬이 일정한지 확인해봐」).
   종전에는 여기서 여백을 24px 로 따로 정해 두었다. 엔진의 .container(style.css)는
   32px(휴대폰 20px)이라, 쇼핑 부품만 «8px 왼쪽» 에서 시작했다. 한 화면에 위젯과
   쇼핑 부품이 섞이면 내용이 시작하는 선이 부품마다 들쭉날쭉해진다 —
   1600px 전체 화면에서 위젯 43장은 242px, 쇼핑은 234px 이었다.
   기둥은 엔진의 것 하나뿐이다. 폭(1180)도 --container 에서 온다. */

.shop-mount{ min-height: 80px; }

.shop-loading,
.shop-demo-tag{
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: var(--r-sm, 8px);
  background: var(--surface-2, #f4f4f4);
  color: var(--muted, #666);
  font-size: 14px;
}

/* 에디터 미리보기 전용 — 서버가 없는 자리에서 뼈대만 흐리게 보여 준다.
   운영 화면에는 나오지 않는다(ctx.demo 일 때만 그려진다). */
.shop-demo-tag{
  background: var(--accent-soft, #fdeee0);
  color: var(--accent, #e8600a);
}

.shop-demo-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 720px){
  .shop-demo-grid{ grid-template-columns: repeat(4, 1fr); }
}

.shop-demo-card{
  border: 1px solid var(--line, #e5e5e5);
  border-radius: var(--r-md, 12px);
  padding: 12px;
  background: var(--surface, #fff);
}
.shop-demo-ph{
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sm, 8px);
  background: var(--surface-2, #f0f0f0);
  margin-bottom: 10px;
}
.shop-demo-line{
  height: 12px;
  border-radius: 999px;
  background: var(--surface-2, #f0f0f0);
  margin-bottom: 8px;
}
.shop-demo-line.short{ width: 55%; margin-bottom: 0; }

.shop-demo-block{
  border: 1px dashed var(--line, #e5e5e5);
  border-radius: var(--r-md, 12px);
  padding: 24px;
}

/* 상품 카드 · 목록 — 실제 내용은 트랙 B 의 shop-products.js 가 채운다.
   진열 칸만 여기서 정한다. */
.shop-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (min-width: 720px){
  .shop-grid{ grid-template-columns: repeat(4, 1fr); }
}

.shop-empty{
  padding: 40px 16px;
  text-align: center;
  color: var(--muted, #666);
}

.shop-error{
  padding: 10px 14px;
  border-radius: var(--r-sm, 8px);
  background: var(--surface-2, #f4f4f4);
  color: var(--danger, #c0392b);
  font-size: 14px;
}

/* 바닥글 사업자 표시(쇼핑몰만) — /admin/settings 의 company 값을 gl-shop.js 가 채운다. */
.legal-info{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft, #eee);
  color: var(--muted-2, #888);
  font-size: 12px;
  line-height: 1.6;
}

/* 상품 상세 — 스크롤에 붙는 탭 줄 (ContentsDoc/14 §«상품 상세»). 탭 목록
   역할(role=tablist)이 아니라 «칸으로 가는 링크 줄» 이다 — 모든 칸이
   한 화면에 이어져 있기 때문이다. */
.shop-tabbar{
  position: sticky;
  /* 🔴 0 이 아니라 상단바 높이만큼 내려 붙는다 — 0 이면 고정된 상단바 뒤로 들어가
     탭이 가려진다 (2026-09-23). 화면에 상단바가 없으면 --nav-h 가 없어 0 이 된다. */
  top: var(--nav-h, 0px);
  z-index: 5;
  display: flex;
  gap: 8px;
  background: var(--bg, #fff);
  border-bottom: 1px solid var(--line, #e5e5e5);
  overflow-x: auto;
}
.shop-tabbar a{
  padding: 12px 14px;
  color: var(--muted, #666);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.shop-tabbar a[aria-current="true"]{
  color: var(--fg-strong, #111);
  border-bottom-color: var(--accent, #e8600a);
}

/* 휴대폰 하단 고정 구매 바 */
.shop-stickybar{
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg, #fff);
  border-top: 1px solid var(--line, #e5e5e5);
}

@media (prefers-reduced-motion: reduce){
  .shop *{ transition: none !important; animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   여기서부터 — 통합(Z) 단계, 2026-09-18. 폼 · 목록 · 카드 · 표 최소 모양.
   각 트랙(A~D) 화면 스크립트가 클래스만 정해 두고 실제 생김새는 비워
   뒀던 자리다. 디자인은 대표님 몫(프로젝트 CLAUDE.md) — 여기 것은
   «읽을 수 있고 쓸 수 있는» 정도의 뼈대일 뿐, 색은 새로 짓지 않고
   역할 변수만 쓴다(check:css). 390px · 1440px 양쪽에서 쓸 수 있게만 짠다.
   ══════════════════════════════════════════════════════════════════ */

/* ── 버튼 ────────────────────────────────────────────────────────── */
.shop .btn,
.shop-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--line, #e5e5e5);
  background: var(--surface, #fff);
  color: var(--fg, #222);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: .15s;
}
.shop .btn:hover,
.shop-btn:hover{ border-color: var(--fg-strong, #111); }
.shop .btn:disabled,
.shop-btn:disabled{ opacity: .5; cursor: not-allowed; }

.shop .btn.dark,
.shop-btn.dark,
.shop-cart-checkout,
.shop-quote-btn{
  background: var(--chip, #111);
  border-color: var(--chip, #111);
  color: var(--ondark-fg, #fff);
}
.shop .btn.dark:hover,
.shop-btn.dark:hover,
.shop-cart-checkout:hover,
.shop-quote-btn:hover{
  background: var(--accent, #e8600a);
  border-color: var(--accent, #e8600a);
}

/* 🔴 쿠폰 «등록» 줄은 단추가 아니라 <form> 이다 (shop-benefits.js:34).
   그런데 위 «검은 단추» 묶음에 이름이 끼어 있어서, 폼 전체가 검게 칠해지고
   칸과 단추가 그 위에 얹혀 층이 어긋나 보였다 — 2026-09-21 소유자 제보
   「레이아웃이 불완전해보여」. 폼은 폼답게 한 줄로 세운다. */
.shop-coupon-redeem{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 16px;
  background: none; border: 0; padding: 0; color: inherit;
}
.shop-coupon-redeem input{ flex: 1 1 200px; min-width: 0; }
.shop-coupon-redeem .shop-form-msg{ flex-basis: 100%; margin: 0; }
.shop .btn.sm,
.shop-btn-sm{ padding: 8px 14px; font-size: 13px; }
.shop .btn.danger,
.shop-btn-danger{
  color: var(--danger, #c0392b);
  border-color: var(--danger, #c0392b);
  background: transparent;
}
.shop-btn-ghost{ background: transparent; }
.shop-btn-social{ width: 100%; justify-content: center; }

/* ── 폼 ──────────────────────────────────────────────────────────── */
/* 🔴 form.shop-claim-form — «form» 을 붙여 둔 까닭 (2026-09-21).
   렌더러는 부품을 감싸는 <section> 에 shop-<부품이름> 을 붙인다. 그래서
   취소/교환/반품 신청의 바깥 섹션도 class 가 «shop-claim-form» 이다.
   shop-claims.js 가 안쪽 <form> 에 같은 이름을 쓰는 바람에, 폼을 480px 로
   좁히려던 이 규칙이 «섹션 통째로» 480px 로 좁혀 왼쪽에 붙여 버렸다 —
   다른 부품은 전부 1180px 기둥 가운데 서는데 이것만 창 왼쪽 끝이었다. */
.shop-form,
.shop-addr-form,
.shop-address-form-box,
.shop-qna-form,
form.shop-claim-form{
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 480px;
}
.shop-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shop-field label{ font-size: 13px; font-weight: 700; color: var(--muted, #666); }

.shop input[type="text"],
.shop input[type="email"],
.shop input[type="tel"],
.shop input[type="password"],
.shop input[type="number"],
.shop input[type="search"],
.shop input[type="file"],
.shop select,
.shop textarea{
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line, #e5e5e5);
  border-radius: var(--r-sm, 10px);
  background: var(--surface, #fff);
  color: var(--fg, #222);
  font: inherit;
  font-size: 15px;
}
.shop textarea{ resize: vertical; min-height: 90px; }
.shop input:focus,
.shop select:focus,
.shop textarea:focus{
  outline: 2px solid var(--accent, #e8600a);
  outline-offset: 1px;
}
.shop input:disabled{ background: var(--surface-2, #f4f4f4); color: var(--muted, #666); }

.shop-check{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--fg, #222);
}
.shop-check input{ width: auto; }

.shop-form-btns{ display: flex; gap: 10px; flex-wrap: wrap;
  align-items: center;
}

.shop-msg,
.shop-form-msg{
  margin: 0;
  font-size: 13px;
  color: var(--muted, #666);
  min-height: 1.4em;
}
.shop-msg.bad,
.shop-form-msg.bad{ color: var(--danger, #c0392b); }
.shop-msg.good,
.shop-form-msg.good{ color: var(--ok, #2a8a4a); }

.shop-notice,
.shop-vbank{
  padding: 12px 14px;
  border-radius: var(--r-sm, 10px);
  background: var(--surface-2, #f4f4f4);
  font-size: 13px;
  color: var(--muted, #666);
}

.shop-claim-photos{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.shop-claim-photo-thumb{
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--r-sm, 10px);
  border: 1px solid var(--line, #e5e5e5);
}

/* ── 로그인 · 회원가입 카드 (2026-09-23 소유자 — 무신사 로그인 화면 구조) ──────
   가져온 것: 가운데 좁은 카드 · 꽉 찬 검은 단추 · 그 아래 소셜 단추 세로로 ·
   맨 아래 «아이디 찾기 | 비밀번호 찾기» 한 줄.
   가져오지 않은 것: 무신사 특유의 검은 상단바 · 광고 · 쿠폰 문구.
   🔴 색은 우리 3색 그대로다. 노랑 · 초록은 카카오 · 네이버가 정한 제공사 색뿐이다. */
.shop-auth{
  max-width: 460px;
  margin: 0 auto;
  padding: 28px 24px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
}
.shop-auth h2{
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
}
.shop-auth-sub{
  margin: 0 0 22px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
/* 카드 안에서는 폼이 카드 폭을 그대로 쓴다 (밖에서는 480px 로 묶여 있다) */
.shop-auth .shop-form{ max-width: none; gap: 12px; }
.shop-auth .shop-field label{ font-size: 12px; }
.shop-auth .shop-btn{ width: 100%; padding: 15px 20px; border-radius: var(--r-sm, 10px); font-size: 15px; }
.shop-auth .shop-social{ margin-top: 14px; }
.shop-auth .shop-links{ margin-top: 18px; justify-content: center; }
/* 소셜 단추를 가르는 줄 — 「또는」 을 글자로 적지 않는다(네 말로 번역해야 한다) */
.shop-auth-or{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.shop-auth-or::before,
.shop-auth-or::after{ content: ""; flex: 1; height: 1px; background: var(--line); }

/* ── 사회 로그인 · 소셜 ──────────────────────────────────────────── */
.shop-social{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.shop-btn-kakao{ background: var(--kakao); border-color: var(--kakao); color: var(--kakao-fg); }
.shop-btn-kakao:hover{ filter: brightness(0.95); border-color: var(--kakao); }
.shop-btn-naver{ background: var(--naver); border-color: var(--naver); color: var(--naver-fg); }
.shop-btn-naver:hover{ filter: brightness(0.95); border-color: var(--naver); }
/* 구글은 흰 바탕에 테두리가 제공사 규정이다 — 지금 기본 단추 모양이 그대로 맞다 */

.shop-links{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
}
.shop-links a{ color: var(--muted, #666); }

/* ── 목록 · 줄(row) — 취소/교환/반품 · 주문 · 배송지 · 쿠폰 · 적립금 ·
   Q&A · 후기 · 아이디/비밀번호 찾기 결과가 모두 같은 뼈대를 쓴다. ─── */
.shop-claim-list,
.shop-order-list,
.shop-addr-list,
.shop-address-list,
.shop-coupon-list,
.shop-point-list,
.shop-qna-list,
.shop-review-list,
.shop-find-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.shop-claim-row,
.shop-order-row,
.shop-addr-item,
.shop-address-card,
.shop-coupon-row,
.shop-point-row,
.shop-qna-item,
.shop-review-item,
.shop-find-result{
  padding: 16px 4px;
  border-bottom: 1px solid var(--line, #e5e5e5);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* 🔴 <li class="shop-order-row"> 는 자식이 <a> 하나뿐이고, 줄 안 다섯 칸은
   그 <a> 안 span 이다(shop-my-orders.js) — 줄 서기는 <a> 에 준다. */
.shop-order-row{ padding: 0; }
.shop-order-row > a{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  padding: 16px 4px;
  color: inherit;
  text-decoration: none;
}
.shop-claim-list > :last-child,
.shop-order-list > :last-child,
.shop-addr-list > :last-child,
.shop-address-list > :last-child,
.shop-coupon-list > :last-child,
.shop-point-list > :last-child,
.shop-qna-list > :last-child,
.shop-review-list > :last-child{ border-bottom: none; }

.shop-claim-head,
.shop-order-item,
.shop-address-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-weight: 700;
}
.shop-claim-type,
.shop-order-no,
.shop-order-name,
.shop-coupon-name,
.shop-point-row strong{ font-weight: 700; color: var(--fg-strong, #111); }
.shop-claim-status,
.shop-order-status,
.shop-badge{
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-2, #f4f4f4);
  color: var(--muted, #666);
  font-size: 12px;
  font-weight: 700;
}
.shop-badge-soldout{ background: var(--surface-2, #f4f4f4); color: var(--danger, #c0392b); }
.shop-claim-actions,
.shop-order-actions,
.shop-address-ops{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.shop-claim-items{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.shop-claim-item-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid var(--line, #e5e5e5);
  border-radius: var(--r-sm, 10px);
}
.shop-claim-bank{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shop-order-tabs{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.shop-order-tabs a,
.shop-order-tabs button{
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line, #e5e5e5);
  background: var(--surface, #fff);
  color: var(--muted, #666);
  font-size: 13px;
  text-decoration: none;
}
.shop-order-tabs a[aria-current="true"],
.shop-order-tabs button[aria-current="true"]{
  border-color: var(--fg-strong, #111);
  color: var(--fg-strong, #111);
}
/* 🔴 <p class="shop-order-counts"> 는 한 줄 글(«결제 완료 3 · 배송 준비 1 …»)
   이다(shop-my-orders.js) — 칸을 나눈 자식이 없다. */
.shop-order-counts{
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: var(--r-md, 12px);
  background: var(--surface-2, #f4f4f4);
  font-size: 13px;
  color: var(--muted, #666);
}

.shop-point-head,
.shop-legal-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.shop-point-balance{ font-size: 24px; font-weight: 700; color: var(--fg-strong, #111); }

.shop-qna-q,
.shop-review-body{ color: var(--fg, #222); }
.shop-qna-a,
.shop-review-reply{
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: var(--r-sm, 10px);
  background: var(--surface-2, #f4f4f4);
  color: var(--muted, #666);
}
.shop-qna-meta,
.shop-review-meta{ font-size: 12px; color: var(--muted-2, #888); }
.shop-qna-wait{ color: var(--muted, #666); font-size: 13px; }

.shop-legal-versions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  font-size: 13px;
}
.shop-legal-body{ line-height: 1.7; white-space: pre-wrap; }

.shop-policy-list{ margin: 0; padding-left: 18px; color: var(--muted, #666); font-size: 13px; }

/* ── 금액 표 — 장바구니 요약 · 주문서 · 주문 상세 ───────────────────── */
/* 🔴 실제 모양은 <dl class="shop-amount-table"><dt>…</dt><dd>…</dd>…</dl>
   이다(shop-cart.js · shop-checkout.js · shop-my-order.js) — div 가 아니라
   dt/dd 짝이다. 마지막 짝에는 .total 이 더 붙는다. */
.shop-amount-table,
.shop-cart-summary dl{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  margin: 0;
  padding: 16px;
  border-radius: var(--r-md, 12px);
  background: var(--surface-2, #f4f4f4);
  font-size: 14px;
  /* 🔴 숫자는 줄을 맞춘다 — 자릿수가 바뀌면 세로줄이 어긋나 표가 덜컹거린다 (2026-09-23) */
  font-variant-numeric: tabular-nums;
}
.shop-amount-table dt,
.shop-amount-table dd,
.shop-cart-summary dt,
.shop-cart-summary dd{ margin: 0; color: var(--muted, #666); }
.shop-amount-table dd,
.shop-cart-summary dd{ text-align: right; color: var(--fg, #222); }
.shop-amount-table dt.total,
.shop-amount-table dd.total,
.shop-cart-summary dt.total,
.shop-cart-summary dd.total{
  padding-top: 10px;
  margin-top: 2px;
  border-top: 1px solid var(--line, #e5e5e5);
  font-size: 17px;
  font-weight: 700;
  color: var(--fg-strong, #111);
}
.shop-cart-summary{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.shop-summary-total{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid var(--line, #e5e5e5);
  font-size: 18px;
  font-weight: 700;
}
.shop-discount{ color: var(--accent, #e8600a); font-weight: 700; }
.shop-list-price{ color: var(--muted-2, #888); text-decoration: line-through; font-size: 13px;
  /* 🔴 숫자는 줄을 맞춘다 — 자릿수가 바뀌면 세로줄이 어긋나 표가 덜컹거린다 (2026-09-23) */
  font-variant-numeric: tabular-nums;
}
.shop-price{ font-weight: 700; font-size: 18px;
  /* 🔴 숫자는 줄을 맞춘다 — 자릿수가 바뀌면 세로줄이 어긋나 표가 덜컹거린다 (2026-09-23) */
  font-variant-numeric: tabular-nums;
}
.shop-price-box{ display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

/* .shop-card(-thumb/-body/-cat/-name/-meta/-price) 는 상품 카드용이고
   shop-products.css 가 이미 정한다 — 여기서 다시 적지 않는다(규격화). */

/* ── 🔴 쇼핑몰 두 칸 — 장바구니 · 주문서 · 상품 상세가 «한 규칙» 을 쓴다 ─────────
   2026-09-23 소유자(무신사 구조) · 2026-09-24 소유자 「왼쪽 80% · 오른쪽 사이드」.

   왼쪽은 본디 볼 것(상품 목록 · 배송지 · 사진과 탭), 오른쪽은 «낼 것»(금액 ·
   주문하기). 오른쪽은 스크롤해도 따라온다 — 목록이 길어도 금액과 [주문하기] 가
   늘 눈에 있어야 한다.

   🔴 세 화면에 같은 줄을 세 번 적지 않는다. 종전에 그랬더니 상품 화면은 1fr/380,
      장바구니는 1fr/320, 주문서는 «아예 없어» 한 줄로 서 있었다. 한 곳에서 정한다.

   🔴 오른쪽은 4:1 — 지시대로 정확히 80:20 이다. 통(--container)이 1180px 이므로
      넓은 화면에서 오른쪽은 218px 로 선다. 200px 하한은 «안전망» 일 뿐 여기서는
      걸리지 않는다 — 통을 좁히는 브랜드에서 금액표가 글자 단위로 꺾이는 것만 막는다.

   🔴 좁은 화면에서는 한 줄로 되돌린다 — 두 칸을 우겨 넣으면 둘 다 못 읽는다.
      그때는 화면 아래에 붙는 막대(.shop-stickybar)가 오른쪽 칸의 몫을 한다. */
.shop-cart-grid,
.shop-checkout-grid,
.shop-product-grid{ display: grid; gap: 28px; align-items: start; }

@media (min-width: 900px){
  .shop-cart-grid,
  .shop-checkout-grid,
  .shop-product-grid{ grid-template-columns: minmax(0, 4fr) minmax(200px, 1fr); }

  .shop-cart-side,
  .shop-checkout-side,
  .shop-product-grid > .shop-product-side{
    position: sticky;
    top: calc(var(--nav-h, 64px) + 24px);
    /* 오른쪽 칸이 창보다 길어지면 «그 안에서» 구른다. 안 그러면 아래쪽 [주문하기]
       가 화면 밖에 잠겨 영영 못 누른다. */
    max-height: calc(100vh - var(--nav-h, 64px) - 48px);
    overflow-y: auto;
  }
}
.shop-checkout-side{ min-width: 0; }
.shop-cart-side .shop-cart-checkout{ width: 100%; padding: 15px 20px; border-radius: var(--r-sm, 10px); }

/* ── 장바구니 · 주문서 줄 ────────────────────────────────────────── */
.shop-cart-list,
.shop-cart-lines{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
/* 🔴 실제 줄 하나는 <li class="shop-cart-line">[사진] [정보] [수량칸] [금액]
   [삭제 단추]</li> 다(shop-cart.js) — 칸 개수가 고정이 아니라서 grid 대신
   유연한 flex 로 짠다. 주문 상세의 <li class="shop-order-item">이름 · 옵션 ·
   수량 · 금액</li>(사진 없음, shop-my-order.js)도 같은 줄에 얹는다. */
.shop-cart-line,
.shop-order-item{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-bottom: 1px solid var(--line, #e5e5e5);
}
.shop-cart-thumb{
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: var(--r-sm, 10px);
  background: var(--surface-2, #f0f0f0);
  overflow: hidden;
}
.shop-cart-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-cart-info{ display: flex; flex-direction: column; gap: 4px; min-width: 120px; flex: 1 1 160px; }
.shop-cart-name{ font-weight: 700; color: var(--fg-strong, #111); text-decoration: none; }
.shop-line-label{ font-size: 13px; color: var(--muted, #666); }
.shop-cart-qty{ display: flex; align-items: center; gap: 6px; flex: none; }
.shop-cart-qty input{ width: 56px; text-align: center; }
.shop-cart-amount,
.shop-line-price{ font-weight: 700; white-space: nowrap; flex: none; margin-left: auto;
  /* 🔴 숫자는 줄을 맞춘다 — 자릿수가 바뀌면 세로줄이 어긋나 표가 덜컹거린다 (2026-09-23) */
  font-variant-numeric: tabular-nums;
}
.shop-line-remove{
  border: none;
  background: none;
  color: var(--muted, #666);
  cursor: pointer;
  font-size: 13px;
  text-decoration: underline;
  flex: none;
}
.shop-order-items{ list-style: none; margin: 0 0 16px; padding: 0; }
.shop-order-item > *{ margin-right: 4px; }
.shop-order-item > :last-child{ margin-left: auto; margin-right: 0; font-weight: 700; }
.shop-buy-area,
.shop-buy-buttons,
.shop-agree{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.shop-buy-buttons{ flex-direction: row; flex-wrap: wrap; }
.shop-options{ display: flex; flex-direction: column; gap: 10px; }

/* ── 상품 상세 ───────────────────────────────────────────────────── */
.shop-product-side{ min-width: 0; }
.shop-product-head{ display: flex; flex-direction: column; gap: 8px; }
.shop-product-name{ font-size: clamp(20px, 3vw, 28px); font-weight: 700; margin: 0; }
.shop-product-cat{ color: var(--muted, #666); margin: 0; font-size: 13px; }
.shop-product-rating{ color: var(--muted, #666); margin: 0; font-size: 13px; }
.shop-rating{ color: var(--accent, #e8600a); }

/* 🔴 기준점을 갤러리에 둔다. 좌우 화살표(.shop-gallery-nav)는 position:absolute 인데
   기준이 될 조상이 없어서 «창» 을 기준으로 섰다 — 1600px 화면에서 12px · 1588px,
   사진과 한참 떨어진 창 양 끝에 붙어 있었다(2026-09-21 「상품 쪽이 왼쪽으로 쏠려」). */
.shop-gallery{ position: relative; display: flex; flex-direction: column; gap: 10px; }
.shop-gallery-stage{
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md, 12px);
  overflow: hidden;
  background: var(--surface-2, #f0f0f0);
}
.shop-gallery-stage img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-gallery-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: var(--surface, #fff);
  color: var(--fg, #222);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  cursor: pointer;
}
.shop-gallery-nav.prev{ left: 8px; }
.shop-gallery-nav.next{ right: 8px; }
.shop-gallery-thumbs{
  display: flex;
  gap: 8px;
  overflow-x: auto;
}
.shop-gallery-thumbs img{
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--r-sm, 8px);
  cursor: pointer;
  border: 1.5px solid transparent;
}
.shop-gallery-thumbs img[aria-current="true"]{ border-color: var(--fg-strong, #111); }

.shop-detail{ display: flex; flex-direction: column; gap: 20px; max-width: 720px; }
.shop-detail-text{ line-height: 1.8; white-space: pre-wrap; }
.shop-trades{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted, #666); }
.shop-reviews{ display: flex; flex-direction: column; gap: 14px; }

/* ── 회원 메뉴(상단바) ───────────────────────────────────────────── */
.shop-account-menu{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
}
/* 🔴 실제로 두 링크(로그인 · 장바구니)가 붙는 자리는 이 안의 .shop-mount 다
   (GLShop.mount() 가 .shop-account-menu 안에서 .shop-mount 를 찾아 그 안에 채운다).
   gap 을 .shop-account-menu 에만 둬서는 효과가 없다 — flex 자식이 .shop-mount
   하나뿐이라 그 안의 두 <a> 사이에는 틈이 없었다(«로그인장바구니» 로 붙어 보였다). */
.shop-account-menu .shop-mount{
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.shop-account-link,
.shop-account-cart{ color: inherit; text-decoration: none; }
.shop-account-cart{ position: relative; }
.shop-account-cart-count{
  display: inline-block;
  min-width: 16px;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--accent, #e8600a);
  color: var(--ondark-fg, #fff);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 16px;
}

.total{ font-weight: 700; }
.warn{ color: var(--danger, #c0392b); }

/* ── 휴대폰 폭(390px) — 목록 · 카드 줄을 세로로, 넓은 화면(1440px) 은
   위에서 정한 grid 가 이미 넉넉히 넓어진다. ────────────────────────── */
@media (max-width: 480px){
  .shop-claim-head,
  .shop-address-title{ align-items: flex-start; }
  .shop-cart-amount{ margin-left: 0; }
  .shop-buy-buttons{ flex-direction: column; }
  .shop-buy-buttons .btn{ width: 100%; }
}