/* 🔴 상품 화면의 두 칸은 gl-shop.css 가 정한다 (2026-09-24). 여기에도 적어 두었더니
   장바구니 1fr/320 · 상품 1fr/380 으로 어긋났고, 주문서는 어느 쪽에도 없어 한 줄로
   서 있었다. 같은 줄을 두 곳에 두지 않는다. */

/* 상품 상세 — shop-product.js 가 그리는 자리 (ContentsDoc/14 §5 Track B). */

/* .shop-product-top 은 어느 화면도 내지 않는 이름이었다 — 치웠다(2026-09-24).
   shop-product.js 가 내는 것은 .shop-product-grid 다. */

/* 🔴 2026-09-27 — 좁은 화면(<900px) 배치가 둘 어긋나 있었다(무화 검수).
 *
 * ① 상품명·가격·옵션·구매(.shop-product-side)가 탭 구간(상세·문의·거래 내역·
 *    후기) «아래» 맨 끝에 나왔다. .shop-product-grid 는 [.shop-product-main
 *    (갤러리+탭+상세+문의+거래내역+후기), .shop-product-side(이름·가격·구매)]
 *    두 칸을 900px 부터 나란히 세운다(gl-shop.css). 그 아래에서는 grid 가
 *    한 줄로 접히는데, 두 칸이 DOM 순서 그대로 위아래로 쌓여 side 가 main
 *    통째보다 아래에 있었다 — 원한 순서(상단바→사진→이름/가격/옵션/구매→탭)와
 *    반대였다. .shop-product-main 을 display:contents 로 비워 그 자식(갤러리·
 *    탭줄·네 구간)을 .shop-product-grid 의 직계로 끌어올리고, order 로 다시
 *    세운다.
 *
 * ② 휴대폰 하단 구매 바(.shop-stickybar)가 화면 맨 위에 붙어 있었다.
 *    gl-shop.css 의 position:sticky;bottom:0 은 «스크롤하다 아래로 내려간
 *    것을 그 자리에 붙잡아 두는» 것이지, 문서 맨 앞(갤러리보다도 앞)에 있는
 *    것을 화면 아래로 끌어내리지 않는다 — 그래서 늘 문서 맨 위 제자리에
 *    그려졌다. 뷰포트 기준 고정(fixed)으로 바꾼다. 넓은 화면은 오른쪽
 *    구매 상자가 늘 보이므로 막대 자체가 필요 없어 감춘다. */
@media (max-width: 899.98px) {
  .shop-product-main { display: contents; }
  /* align-items 를 늘려 둔다 — 넓은 화면 격자의 «start» 가 남으면 사진이 제 폭(300px)으로 줄어 왼쪽에 붙는다 */
  .shop-product-grid { display: flex; flex-direction: column; align-items: stretch; }
  .shop-gallery { order: 1; }
  .shop-product-side { order: 2; }
  .shop-tabbar { order: 3; }
  #detail, #qna, #trades, #reviews { order: 4; }

  .shop-stickybar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
  }
  /* 두 버튼이 막대를 반씩 나눈다 — 제 글자 폭만 쓰면 왼쪽에 몰린다 */
  .shop-stickybar > * { flex: 1 1 0; }
  /* 고정 바에 마지막 구간(후기)·바닥글이 가리지 않게 여유를 둔다. */
  .shop-product-detail { padding-bottom: 84px; }
}
@media (min-width: 900px) {
  .shop-stickybar { display: none; }
}

/* 상품 상세는 화면 맨 위에 서는 칸이다 — 섹션 여백(.shop 위 56 + .wrap 위 36)이 겹쳐
   상단바와 «목록으로» 사이가 90px 넘게 비었다(2026-09-27 무화). 위 여백을 한 번만 준다. */
.shop-product-detail { padding-top: 0; }
.shop-product-detail > .wrap { padding-top: 24px; }

/* ── 사진 (2026-09-23 소유자 — 무신사 상품 사진: 왼쪽 세로 썸네일 + 큰 세로 사진) ──
   🔴 네모(1:1)에서 세로(3:4)로 바꾼다. 차수판 · 방범창처럼 «세로로 긴 것» 을 네모에
      넣으면 위아래가 잘리거나 좌우가 비어, 어느 쪽이든 물건이 작아 보인다.
   썸네일은 넓은 화면에서 사진 왼쪽에 세로로 선다 — 아래에 두면 큰 사진이 그만큼
   작아지고, 몇 장인지가 스크롤 아래로 밀려 안 보인다. 좁은 화면에서는 아래 가로로. */
.shop-gallery{ outline: none; }
@media (min-width: 720px){
  .shop-gallery{ display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: start; }
  .shop-gallery-stage{ grid-column: 2; grid-row: 1; }
  .shop-gallery-thumbs{ grid-column: 1; grid-row: 1; flex-direction: column; margin-top: 0; max-height: 100%; overflow-y: auto; }
}
.shop-gallery-count{
  position: absolute;
  right: 12px; bottom: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip) 72%, transparent);
  color: var(--ondark-fg);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.shop-gallery-stage{
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--surface-2, #f0f0f0);
  border-radius: var(--r-md, 12px);
  overflow: hidden;
}
.shop-gallery-stage img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-gallery-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 999px; border: none;
  background: color-mix(in srgb, var(--bg, #fff) 80%, transparent);
  /* 🔴 글자가 아니라 선 아이콘이라 상자 가운데가 곧 눈에 보이는 가운데다.
     글자(‹ ›)일 때는 글꼴 여백 때문에 늘 한쪽으로 밀려 보였다 (2026-09-23). */
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-strong, #111); cursor: pointer; padding: 0;
}
.shop-gallery-nav svg{ width: 18px; height: 18px; display: block; }
.shop-line-remove svg{ width: 14px; height: 14px; display: block; }
/* 🔴 종전에는 margin-top:-138px 로 «1:1 사진 높이의 절반» 을 손으로 박아 두었다.
   비율을 3:4 로 바꾸면 그 값이 어긋난다. 사진 칸 안에서 가운데를 잡게 둔다. */
.shop-gallery-nav.prev{ left: 12px; }
.shop-gallery-nav.next{ right: 12px; }
.shop-gallery-thumbs{ display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.shop-gallery-thumbs button{
  padding: 0; border: 2px solid transparent; border-radius: var(--r-sm, 8px);
  width: 64px; height: 85px; overflow: hidden; background: none; cursor: pointer; flex: none;
}
.shop-gallery-thumbs button[aria-current="true"]{ border-color: var(--accent, #e8600a); }
.shop-gallery-thumbs img{ width: 100%; height: 100%; object-fit: cover; }

.shop-product-cat{ margin: 0 0 4px; color: var(--muted, #666); font-size: 13px; }
.shop-product-name{ margin: 0 0 12px; font-size: 24px; }
.shop-price-box{ display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px;
  /* 🔴 숫자는 줄을 맞춘다 — 자릿수가 바뀌면 세로줄이 어긋나 표가 덜컹거린다 (2026-09-23) */
  font-variant-numeric: tabular-nums;
}
.shop-price-box .shop-price{ font-size: 22px; font-weight: 700; }
.shop-product-rating{ color: var(--muted, #666); font-size: 14px; }

.shop-options select{
  display: block; width: 100%; margin-bottom: 8px; padding: 10px 12px;
  border: 1px solid var(--line, #e5e5e5); border-radius: var(--r-sm, 8px);
}
/* 고르신 조합을 담을 수 없을 때 왜 그런지 알려 주는 한 줄(shop-product.js).
   🔴 겁주는 빨강이 아니라 «안내» 로 보이게 한다 — 사는 분의 잘못이 아니다.
   글이 비면 스스로 사라진다(자리가 비어 덜컥이지 않게). */
.shop-option-notice{
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: var(--r-sm, 8px);
  background: var(--surface-2, #f4f4f4);
  color: var(--muted, #666);
  font-size: 14px;
  line-height: 1.6;
}
.shop-option-notice:empty{ display: none; }
/* 다 떨어진 조합은 고를 수 없게 흐려 둔다 — 브라우저 기본보다 뚜렷하게. */
.shop-options select option:disabled{ color: var(--muted-2, #999); }
.shop-cart-line{ display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft, #eee); }
.shop-cart-line input[type="number"]{ width: 60px; padding: 6px; }
.shop-line-remove{ border: none; background: none; font-size: 18px; cursor: pointer; color: var(--muted, #666); }
.shop-summary-total{ display: flex; justify-content: space-between; margin: 12px 0; font-size: 16px; }
.shop-buy-buttons{ display: flex; gap: 10px; margin-top: 14px;
  align-items: center;
}
.shop-buy-buttons .btn{ flex: 1; }
.shop-quote-btn{ display: inline-block; text-align: center; text-decoration: none; }

.shop-detail{ margin: 32px 0; }
.shop-detail img{ display: block; width: 100%; margin-bottom: 12px; border-radius: var(--r-md, 12px); }
.shop-detail-text{ line-height: 1.7; white-space: pre-wrap; }
.shop-notice{
  margin-top: 16px; padding: 12px 14px; border-radius: var(--r-sm, 8px);
  background: var(--surface-2, #f4f4f4); color: var(--muted, #666); font-size: 14px;
}
.shop-notice-table{ margin-top: 20px; width: 100%; border-collapse: collapse; }
.shop-notice-table th, .shop-notice-table td{
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-soft, #eee); font-size: 14px;
}
/* 레드팀 L5(2026-09-25) — 굵기 500→400 정리(AI 티) 뒤 표 머리(th)가 칸(td)과 같은
   굵기가 되어 위계가 사라졌다. 400/700 두 값만 쓰므로 머리는 700 으로 — 이미 색(muted)도
   달라 굵기까지 겹치면 «표 머리답게» 더 또렷하다. */
.shop-notice-table th{ width: 30%; color: var(--muted, #666); font-weight: 700; }
.shop-policy-list{ margin-top: 16px; padding-left: 18px; color: var(--muted, #666); font-size: 14px; line-height: 1.8; }

.shop-qna-item, .shop-review-item{
  padding: 14px 0; border-bottom: 1px solid var(--line-soft, #eee);
}
.shop-qna-meta, .shop-review-meta{ font-size: 13px; color: var(--muted, #666); margin: 0 0 4px; }
.shop-qna-q, .shop-review-body{ margin: 0 0 4px; line-height: 1.6; }
.shop-qna-a, .shop-review-reply{ margin: 4px 0 0; color: var(--muted, #666); }
.shop-qna-wait{ margin: 4px 0 0; color: var(--muted-2, #999); font-size: 13px; }
.shop-qna-form{ margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.shop-qna-form textarea{ min-height: 80px; padding: 10px; border: 1px solid var(--line, #e5e5e5); border-radius: var(--r-sm, 8px); }
.shop-review-img{ width: 80px; height: 80px; object-fit: cover; border-radius: var(--r-sm, 8px); margin: 6px 6px 0 0; display: inline-block; }

.shop-trades-table{ width: 100%; border-collapse: collapse; }
.shop-trades-table td{ padding: 8px 6px; border-bottom: 1px solid var(--line-soft, #eee); font-size: 14px; }