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

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

.shop{ padding: 56px 0; }
/* 🔴 화면의 첫 위젯이 쇼핑 부품이면(상품 목록 · 장바구니 · 로그인 …) 떠 있는 상단바
   (.nav — position:fixed) 밑으로 머리말이 파고들어 «ALL» 머리글이 로고 위에 겹쳤다
   (2026-09-27 하나 실크플라워 아틀리에 화면 검수). 첫 화면(.hero)은 자기 윗여백이 있어 괜찮고, 쇼핑 부품만
   56px 로 시작해 상단바 높이를 못 넘었다. 상단바 바로 뒤에 올 때만 그 높이만큼 더 띄운다. */
.nav + .shop{ padding-top: calc(var(--nav-h, 64px) + 72px); }
/* 🔴 .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;
  /* 모서리는 작은 층(--radius-sm) — 종전 알약(999px)은 AI 티 지문 ④(대표 결정 2026-10-03 «추천안대로»).
     .shop .btn 도 같은 규칙이라 장바구니 · 주문 · 상품 버튼이 함께 바뀐다. 쇼핑 밖의 전역 .btn(style.css)은 그대로 */
  border-radius: var(--radius-sm, var(--r-sm, 10px));
  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:focus-visible,
.shop-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.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;
  align-items: stretch;
  gap: 8px;   /* 칸 이름 → 입력칸 (종전 6 — 4의 배수 밖) */
}
.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 16px;   /* 좌우 종전 14 — 높이는 그대로, 글 시작만 2px 안으로 */
  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{
  /* 포커스 링 — 테두리를 진하게 + 버튼색 옅은 링 3px (2026-10-19 고객 화면 개편 · 종전 주황 외곽선 2px 은 칸과 떨어져 보였다) */
  outline: none;
  border-color: var(--fg-strong, #111);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip, #e8600a) 30%, transparent);
}
.shop input[aria-invalid="true"],
.shop select[aria-invalid="true"]{ border-color: var(--danger, #c0392b); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger, #c0392b) 14%, transparent); }
/* 칸 아래 오류 한 줄 — 서버가 칸 이름(errors [phone] …)을 주면 그 칸 아래에 (shop-member.js fieldErr) */
.shop-field-err{ margin: 0; font-size: 13px; color: var(--danger, #c0392b); }
.shop-field-err a{ color: inherit; font-weight: 700; text-underline-offset: 2px; }
.shop-field label small{ font-weight: 500; color: var(--muted, #666); margin-left: 6px; }
.shop-field-hint{ margin: 0; font-size: 13px; color: var(--muted, #666); }
/* 주소 칸 — 우편번호 + «주소 검색» 한 줄 · 기본 주소 · 상세 주소 (가입 · 계정 관리) */
.shop-addr{ display: grid; gap: 8px; }
.shop-addr-row{ display: grid; grid-template-columns: minmax(0, 140px) auto; gap: 8px; align-items: stretch; }
.shop-addr input[readonly]{ background: var(--surface-2, #f4f4f4); }
.shop-addr .gl-postcode-btn{ display: inline-flex; align-items: center; gap: 6px; height: 100%; min-height: 44px; padding: 0 16px; border-radius: var(--r-sm, 10px); border: 1.5px solid var(--line, #e5e5e5); background: var(--surface, #fff); color: var(--fg-strong, #111); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.shop-addr .gl-postcode-btn:hover{ border-color: var(--fg-strong, #111); }
.shop-addr .gl-postcode-btn:focus-visible{ outline: 2px solid var(--chip, #e8600a); outline-offset: 2px; }
.shop-addr .gl-postcode-manual{ grid-column: 1 / -1; display: grid; gap: 8px; }
.gl-a-sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.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: 8px; 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 24px;
  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%; min-height: 48px; padding: 12px 20px; border-radius: var(--r-sm, 10px); font-size: 15px; }   /* 상하 종전 14 — 잰 높이 48 그대로(이제 min-height 가 보장) */
.shop-auth .shop-social{ margin-top: 12px; }
.shop-auth .shop-links{ margin-top: 16px; justify-content: center; }   /* 종전 18 — 같은 줄인 .shop-auth-foot(16)을 눌러 18 로 세웠다 */
/* 소셜 단추를 가르는 줄 — 「또는」 을 글자로 적지 않는다(네 말로 번역해야 한다) */
.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;
  align-items: stretch;
  gap: 12px;   /* 종전 10 — 카드 폼 틈(12)과 한 리듬 */
}
.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;
  align-items: center;
  gap: 12px;   /* 종전 14 */
  flex-wrap: wrap;
  font-size: 13px;
}
.shop-links a{ color: var(--muted, #666); text-decoration: underline; text-underline-offset: 2px; }

/* ── 목록 · 줄(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;
  /* 알약(999px) 대신 --radius-sm 의 절반 — 배지 높이가 20px 이라 --radius-sm(10px) 을 그대로 주면 다시 알약이 된다.
     가입 동의 «필수/선택» 표(.shop-consent-tag)와 같은 꼴 — 작은 칩은 큰 판보다 덜 둥글게(10번 레퍼런스 ④) */
  border-radius: calc(var(--radius-sm, var(--r-sm, 8px)) / 2);
  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%; min-height: 48px; padding: 12px 20px; border-radius: var(--r-sm, 10px); }   /* 상하 종전 14 — 잰 높이 46.8 → 48 */

/* ── 장바구니 · 주문서 줄 ────────────────────────────────────────── */
.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.js 가 class 를 input 자체에 단다(감싸는 칸이 없다). 종전 규칙(.shop-cart-qty input)은 «안의 input» 을
   가리켜 한 번도 맞지 않았고, 수량 칸이 줄을 꽉 채웠다(2026-10-03 검수). 두 자리 수량이 보이게 안쪽 여백만 좁힌다 */
/* 🔴 .shop 를 붙여 공용 입력칸 규칙(.shop input[type="number"]{width:100%} — 0,2,1)과 같은 무게로 맞춘다. 뒤에 적혀 이긴다.
   종전(input.shop-cart-qty — 0,1,1)은 그 규칙에 져서 샘플 쇼핑 장바구니에서 여전히 줄을 꽉 채웠다(2026-10-03 5차 검수) */
.shop input.shop-cart-qty{ flex: none; width: 64px; padding-left: 8px; padding-right: 8px; text-align: center; font-variant-numeric: tabular-nums; }
/* 상품 정보 칸(세로 flex) 안의 배지(«품절 임박» · «지금은 살 수 없습니다») — 기본 stretch 로 칸 폭을 꽉 채우던 것을 글 폭으로 */
.shop-cart-info > .shop-badge{ align-self: flex-start; }
.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; }

/* 빌드된 HTML부터 숨긴다. JS 실행·회원 응답 전의 로그인/가입 노출을 막으며,
   모바일 판으로 옮겨도 요소 자체의 표시가 따라간다. 공간은 확인 중에 유지한다. */
[data-gl-auth-pending] { visibility: hidden !important; pointer-events: none !important; }
.shop-account-menu[data-gl-auth-pending] { min-width: 40px; min-height: 40px; }

/* ── 회원 메뉴(상단바) ───────────────────────────────────────────── */
.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%; }
}

/* ── 회원 화면 더하기 (2026-10-01 — 포털형 가입 · 계정 관리 · 회원 메뉴) ──────────────
   색은 역할 토큰만 쓴다 — 어두운 화면에서 함께 뒤집힌다. brand.json member 를 적지 않은 사이트(쇼핑몰)에는 이 모양이 나오지 않는다.
   2026-10-03 디자인 고도화 — 여백은 8 · 16 · 24 한 척도, 입력칸 44px, 칸 이름 · 입력칸 · 도움 글 세 층,
   전환은 160ms(움직임 줄이면 없음), 모서리는 --radius-* 토큰(없으면 --r-*). 마크업(shop-member.js · shop-account.js)은 그대로다.
   아바타(.shop-account-avatar)는 2026-10-03 대표 결정으로 사람 모양 선 아이콘 — 아래 «상단바 회원 메뉴» 절. */
.shop-auth-wide{ max-width: 520px; }
.shop .shop-auth-title{ margin: 0 0 8px; font-family: var(--font-family); font-size: 18px; font-weight: 700; text-align: center; letter-spacing: -0.02em; }
.shop-auth .shop-auth-sub{ margin-bottom: 16px; }
.shop-auth-foot{ margin-top: 16px; font-size: 13px; color: var(--muted); }
.shop-auth-foot a{ color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }

/* 글자 링크(전문 보기 · 바닥 안내 · 카드 아래 링크 줄) — 밑줄은 흐리게, 올리면 글자색으로 160ms. 초점은 토큰 고리
   (gl-billing.css 의 글자 링크와 한 벌. 카드 아래 «아이디 찾기 · 비밀번호 찾기 · 회원가입» 은 종전에 hover · 초점 모양이 없었다) */
.shop-consent-link,
.shop-auth-foot a,
.shop-links a{
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color .16s ease;
}
.shop-consent-link:hover,
.shop-auth-foot a:hover,
.shop-links a:hover,
.shop-consent-link:focus-visible,
.shop-auth-foot a:focus-visible,
.shop-links a:focus-visible{ text-decoration-color: currentColor; }
.shop-consent-link:focus-visible,
.shop-auth-foot a:focus-visible,
.shop-links a:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* 가입 — 동의 묶음: 전체 동의 + 항목마다 «필수/선택» 표 · 문구 · 전문 보기 링크 · 안내 글 */
.shop-consent{
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, var(--r-sm, 10px));
  padding: 16px;
  margin: 4px 0;
  background: var(--surface-2, var(--surface));
  color: var(--fg);
}
/* 체크 칸 16 — 항목 줄(14px × 1.6 = 22px)의 첫 줄 가운데에 오게 3px 내린다. 전체 동의 줄은 center 정렬이라 내리지 않는다 */
.shop-consent input[type="checkbox"]{ width: 16px; height: 16px; margin: 3px 0 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.shop-consent-all input[type="checkbox"]{ margin: 0; }
.shop-consent input[type="checkbox"]:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.shop-consent label{ cursor: pointer; }
.shop-consent-all{
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px;
  padding-bottom: 12px; margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.shop-consent-item{ display: flex; align-items: flex-start; gap: 8px; font-size: 14px; padding: 8px 0; line-height: 1.6; }
.shop-consent-tag{ display: inline-block; font-size: 12px; font-weight: 700; line-height: 1.5; padding: 0 6px; border-radius: calc(var(--radius-sm, var(--r-sm, 8px)) / 2); margin-right: 4px; vertical-align: 1px; background: var(--surface); border: 1px solid var(--line); color: var(--fg); }
/* «필수» 는 채운 배지(대표 결정 2026-10-03 «추천안대로» — 새 색값 없이). 글자는 --on-accent: gl-theme.js 가 브랜드 주황마다
   검정 · 흰색 중 대비가 높은 쪽을 모드별로 계산한다. 흰 글자는 주황 위 2.6~3.4:1 이라 작은 글자 4.5 에 못 미쳐 검정 쪽이 고른다.
   «선택» 은 위 테두리 모양 그대로 — 채운 것과 빈 것으로 갈린다 */
.shop-consent-tag.req{ background: var(--accent); border-color: var(--accent); color: var(--on-accent, var(--black)); }
.shop-consent-link{ margin-left: auto; white-space: nowrap; font-size: 13px; align-self: flex-start; color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
.shop-consent-sub{ font-size: 12px; color: var(--muted); margin: 0 0 8px 24px; line-height: 1.6; word-break: keep-all; }   /* 24px = 체크 칸 16 + 틈 8 — 항목 글과 같은 선에서 시작 */
.shop button:disabled.shop-btn,
.shop .shop-btn:disabled{ opacity: .45; cursor: not-allowed; }

/* 계정 관리 — 로그인 계정 · 프로필 · 비밀번호 변경
   폭 640 · 화면 제목과 같은 왼쪽 선 · 묶음 제목 → 상자 8 · 상자 → 다음 제목 24 · 칸 사이 16 · 칸 이름 → 입력칸 8 */
.shop-account{ max-width: 640px; margin: 0; }   /* 화면 제목과 같은 왼쪽 선에서 시작한다(가운데로 띄우면 제목과 본문의 시작점이 갈린다) */
.shop .shop-account-h{ margin: 24px 0 8px; font-family: var(--font-family); font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: 0; color: var(--fg-strong, var(--fg)); }   /* 본문 글꼴 — 한글에 자간 · 대문자 처리를 걸면 낱글자가 흩어진다 */
.shop .shop-account-h:first-child{ margin-top: 0; }
.shop-account-box{ border: 1px solid var(--line); border-radius: var(--radius-md, var(--r-md, 12px)); background: var(--surface); padding: 24px; }
.shop-account-box .shop-form{ max-width: none; gap: 16px; }
.shop-account-email{ display: block; font-size: 15px; line-height: 1.5; word-break: break-all; color: var(--fg-strong, var(--fg)); }
.shop-account-note{ margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); word-break: keep-all; }
/* 세 층 — 칸 이름(13 · 700 · 글자색) · 입력칸(15 · 44px) · 도움 글(13 · 400 · 흐린색). 칸 이름이 흐린색이면 도움 글과 한 층이 된다 */
.shop-account .shop-field,
.shop-member-reauth .shop-field{ gap: 8px; }
.shop-account .shop-field label,
.shop-member-reauth .shop-field label{ font-size: 13px; line-height: 1.4; color: var(--fg); }
.shop-account .shop-field input,
.shop-member-reauth .shop-field input{ height: 44px; padding: 0 16px; box-sizing: border-box; line-height: normal; }
/* 알림 줄 — 글이 없을 때는 자리를 차지하지 않는다(종전: .shop-msg 의 min-height 1.4em + 틈 16 이 저장 버튼 위에 빈 줄로 남았다.
   예전 규칙은 .shop-form-msg 를 봤는데 마크업(shop-member.js msgEl)의 이름은 .shop-msg 다) */
.shop-account .shop-msg,
.shop-member-reauth .shop-msg{ min-height: 0; font-size: 13px; line-height: 1.6; word-break: keep-all; }
.shop-account .shop-msg:empty,
.shop-member-reauth .shop-msg:empty{ display: none; }
/* 가입 화면(포털형 1단계 «동의하고 이메일 인증» 위)도 같은 빈 줄 — 같은 한 줄로 */
[data-gl-shop="member-join"] .shop-msg:empty,
[data-gl-shop="member-login"] .shop-msg:empty{ display: none; }   /* 로그인도 — «로그인 상태 유지» 와 버튼 사이 빈 줄(2026-10-03 검수) */
/* 주 버튼 — 폼마다 하나뿐이라 채운다(로그인 버튼과 같은 모양). 높이 44 · 왼쪽 시작선 · hover 는 강조색 */
.shop-account .shop-form .shop-btn,
.shop-member-reauth .shop-auth .shop-btn{
  align-self: flex-start; width: auto; min-width: 120px; min-height: 44px; padding: 0 24px;
  font-size: 14px;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.shop-account .shop-form .shop-btn[type="submit"],
.shop-member-reauth .shop-auth .shop-btn[type="submit"]{
  background: var(--chip, #111); border-color: var(--chip, #111); color: var(--ondark-fg, #fff);
}
.shop-account .shop-form .shop-btn[type="submit"]:hover,
.shop-member-reauth .shop-auth .shop-btn[type="submit"]:hover{
  background: var(--accent, #e8600a); border-color: var(--accent, #e8600a);
}

/* 비밀번호 재확인 — 단독 카드 640 · 화면 제목과 같은 왼쪽 선 · 설명 글은 왼쪽에서 읽는 폭(40em) · 주 버튼 하나만 채움 */
.shop-member-reauth .shop-auth{ max-width: 640px; margin: 0; padding: 24px; }
.shop-member-reauth .shop-auth .shop-auth-sub{ margin: 0 0 24px; max-width: 40em; font-size: 14px; line-height: 1.7; text-align: left; word-break: keep-all; }
.shop-member-reauth .shop-auth .shop-msg{ margin: 0 0 16px; }
.shop-member-reauth .shop-auth .shop-form{ gap: 16px; }
.shop-member-reauth .shop-auth .shop-auth-foot{ margin-top: 16px; justify-content: flex-start; text-align: left; }

/* 상단바 회원 메뉴 — 아바타 + 펼침 (brand.json member.menu).
   아바타는 사람 모양 선 아이콘(대표 결정 2026-10-03 «추천안대로» — 종전 «이니셜 한 글자를 주황 동그라미에» 는 AI 티 지문 ⑦).
   마크업(shop-account.js)은 그대로다 — 이니셜 글자는 남겨 두되 글자 크기 0 으로 숨기고, 읽는 이름은 aria-label(«계정 메뉴»).
   동그라미 틀은 중립(surface-2 · 선 line) · 아이콘은 글자색(--fg) 마스크라 밝게/어둡게가 함께 뒤집힌다 */
.shop-account-user{ position: relative; display: inline-flex; }
.shop-account-avatar{
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  padding: 0; box-sizing: border-box;
  background: var(--surface-2, var(--surface)); border: 1px solid var(--line); color: var(--fg);
  font: inherit; font-size: 0; line-height: 0;
  transition: border-color .16s ease;
}
.shop-account-avatar::before{
  content: ""; flex: none; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.25c0-4.1 3.4-6.75 7.5-6.75s7.5 2.65 7.5 6.75'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.25c0-4.1 3.4-6.75 7.5-6.75s7.5 2.65 7.5 6.75'/%3E%3C/svg%3E") center / contain no-repeat;
}
.shop-account-avatar:hover,
.shop-account-avatar[aria-expanded="true"]{ border-color: var(--fg); }
.shop-account-avatar:focus-visible{ outline: 2px solid var(--fg); outline-offset: 2px; }
.shop-account-pop a:focus-visible,
.shop-account-pop button:focus-visible{ outline: 2px solid var(--accent); outline-offset: -2px; }
.shop-account-pop{
  position: absolute; right: 0; top: 42px; z-index: 40; min-width: 224px;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--radius-md, var(--r-md, 12px)); padding: 8px;
  box-shadow: var(--shadow-soft);
}
.shop-account-pop[hidden]{ display: none; }
.shop-account-who{ padding: 8px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.shop-account-who b{ display: block; font-size: 14px; line-height: 1.5; }
.shop-account-who span{ display: block; font-size: 12px; line-height: 1.5; color: var(--muted); word-break: break-all; }
/* 항목 높이 40 — 글자 14 를 세로 가운데에, hover 는 surface-2 로 160ms */
.shop-account-pop a,
.shop-account-pop button{
  display: flex; align-items: center; width: 100%; min-height: 40px; text-align: left; padding: 0 12px; border-radius: var(--radius-sm, var(--r-sm, 8px));
  background: transparent; border: 0; color: var(--fg); font: inherit; font-size: 14px; line-height: 1.4; cursor: pointer; text-decoration: none;
  transition: background-color .16s ease;
}
.shop-account-pop a:hover,
.shop-account-pop button:hover{ background: var(--surface-2, var(--bg)); }
.shop-auth .shop-auth-or + .shop-auth-sub{ margin-top: 16px; }
.shop-links span{ color: var(--muted, #666); }
.shop-auth h2 + .shop-form{ margin-top: 16px; }

/* 휴대폰(390px) — 상자 안 여백 16 · 주 버튼은 폭 그대로 */
@media (max-width: 480px){
  .shop-account-box{ padding: 16px; }
  .shop-member-reauth .shop-auth{ padding: 24px 16px; }
  .shop-consent{ padding: 16px 12px; }
  .shop-account .shop-form .shop-btn,
  .shop-member-reauth .shop-auth .shop-btn{ width: 100%; }
}
/* 움직임을 줄인 분에게는 전환이 없다 */
@media (prefers-reduced-motion: reduce){
  .shop-consent-link,
  .shop-auth-foot a,
  .shop-links a,
  .shop-account-pop a,
  .shop-account-pop button,
  .shop-account-avatar,
  .shop-account .shop-form .shop-btn,
  .shop-member-reauth .shop-auth .shop-btn{ transition: none; }
}
.shop-field-label{ display: flex; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted, #666); }
.shop-field-label small{ font-weight: 500; }

/* 상단바 계정 버튼 — 로그인하면 채운 사람 아이콘(2026-10-19 대표님 «추천대로» · 헤더 계정 목업). 첫 글자가 아니다.
   비로그인은 넓은 화면에서 «로그인» 글자, 상단바가 접히면(gl-nav.js gl-nav-collapsed) 선 사람 아이콘 하나 — 누르면 바로 로그인 화면.
   계정 버튼은 접혀도 ☰ 안으로 들어가지 않는다(gl-nav.js) */
:is([data-gl-nav-bar], .gl-nav-panel) .shop-account-menu .shop-account-avatar.is-in{ background: var(--fg-strong, var(--fg)); border-color: var(--fg-strong, var(--fg)); color: var(--bg); }
.shop-account-avatar.is-in::before{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.25' fill='black'/%3E%3Cpath d='M4 20.75c0-4.4 3.6-7.25 8-7.25s8 2.85 8 7.25z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.25' fill='black'/%3E%3Cpath d='M4 20.75c0-4.4 3.6-7.25 8-7.25s8 2.85 8 7.25z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}
.shop-account-ico{ width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.shop-account-pop a, .shop-account-pop button{ gap: 10px; }
.shop-account-pop .shop-account-ico{ color: var(--muted); }
.shop-account-hr{ border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.shop-account-link.is-guest .shop-account-ico{ display: none; }
[data-gl-nav-bar].gl-nav-collapsed .shop-account-link.is-guest{
  width: var(--gl-nav-control-size, 40px); height: var(--gl-nav-control-size, 40px); padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface);
}
[data-gl-nav-bar].gl-nav-collapsed .shop-account-link.is-guest .shop-account-ico{ display: block; width: 20px; height: 20px; }
[data-gl-nav-bar].gl-nav-collapsed .shop-account-link.is-guest .shop-account-label{ display: none; }
/* 로그인 · 가입 화면 제목 — 업무 화면처럼 본문 글꼴 28px 굵게, 카드 위 가운데(2026-10-19 고객 화면 개편 «64px 붓글씨 제목은 소개 화면에만») */
:root .shop-member-join .section-head, :root .shop-member-login .section-head{ max-width: 460px; margin: 0 auto 20px; text-align: center; }
:root .shop-member-join .section-head h2, :root .shop-member-login .section-head h2{ font-family: var(--font-family); font-size: 28px; line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
@media (max-width: 480px){ :root .shop-member-join .section-head h2, :root .shop-member-login .section-head h2{ font-size: 24px; } }
/* 가입 · 로그인 주 버튼 = 버튼색(화면당 하나) */
.shop-member-join .shop-auth .shop-form > .shop-btn[type="submit"]:not(:disabled), .shop-member-login .shop-auth .shop-form > .shop-btn[type="submit"]:not(:disabled){ background: var(--chip); border-color: var(--chip); color: var(--ondark-fg); }