@import url("../design-system/css/common.css");
/* ============================================================
   예우 용품몰 — 이 묶음 화면에만 있는 배치 (yw-shop__…)  (2026-10-29)
   쪽: shop · shop-list · product · compare · cart · order · pay · order-done
   부품(머리 줄 · 칩 막대 · 상품 카드 · 수량 · 입력 칸 · 진행 표시 · 고정 버튼 · 금액 · 완료 · 빈 화면 …)은 공통에서 온다.
   여기서 부품의 겉모양을 덮어쓰지 않는다.
   ============================================================ */
.yw-shop { line-height: normal; }

/* 머리 줄 — 탭 화면 제목 + 장바구니 */
.yw-shop__bar-title { font-family: var(--font-serif); font-weight: var(--font-weight-serif); font-size: var(--font-size-heading); }
.yw-shop__cart { position: relative; }
.yw-shop__count {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-full); background: var(--fill-action); color: var(--on-action);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.yw-shop__count[hidden] { display: none; }

/* 첫 화면 */
.yw-shop__intro { padding: var(--space-sm) var(--screen-margin) 0; }
.yw-shop__intro-title { font-family: var(--font-serif); font-weight: var(--font-weight-serif); font-size: var(--font-size-display); line-height: var(--line-height-tight); }
.yw-shop__intro-desc { margin-top: var(--space-sm); font-size: var(--font-size-body-sm); color: var(--text-secondary); line-height: 1.55; }
.yw-shop__cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-sm); }
.yw-shop__cat { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); min-height: var(--touch-min); padding: var(--space-sm) 0; font-size: var(--font-size-caption); color: var(--text); }
.yw-shop__cat .yw-list__icon { width: 48px; height: 48px; background: var(--surface-raised); border: 1px solid var(--border-hairline); }
.yw-shop__sample { margin-top: var(--space-md); }

.yw-shop__intro + .yw-section { margin-top: var(--space-xl); }

/* 목록 */
.yw-shop__chips { padding-top: var(--space-xs); }
.yw-shop__list-head { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-lg) var(--screen-margin) var(--space-md); }
.yw-shop__list-count { font-size: var(--font-size-meta); color: var(--text-secondary); }

/* 상세 */
.yw-shop__hero {
  position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; margin: 0 var(--screen-margin);
  border: 1px solid var(--border-card); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--accent-line); overflow: hidden;
}
.yw-shop__hero img { width: 100%; height: 100%; object-fit: contain; }
.yw-shop__hero svg { width: 56px; height: 56px; }
.yw-shop__hero .yw-badge { position: absolute; top: var(--space-md); left: var(--space-md); background: var(--surface-raised); }
.yw-shop__name { margin-top: var(--space-xl); font-size: var(--font-size-title); font-weight: 700; line-height: var(--line-height-tight); }
.yw-shop__cat-name { font-size: var(--font-size-caption); color: var(--text-accent); font-weight: 500; }
.yw-shop__price { margin-top: var(--space-md); }
.yw-shop__price-now { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.yw-shop__price-was { margin-top: 2px; font-size: var(--font-size-meta); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.yw-shop__facts { margin: 0; }
.yw-shop__fact { display: flex; gap: var(--space-lg); padding: var(--space-md) var(--space-card-x); font-size: var(--font-size-body-sm); }
.yw-shop__fact + .yw-shop__fact { border-top: 1px solid var(--border-hairline); }
.yw-shop__fact dt { flex: none; width: 76px; color: var(--text-secondary); }
.yw-shop__fact dd { margin: 0; flex: 1; }
.yw-shop__qty-row { display: flex; justify-content: space-between; align-items: center; min-height: var(--touch-min); margin-top: var(--space-lg); font-size: var(--font-size-body-sm); font-weight: 500; }
.yw-shop__added { margin-top: var(--space-md); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-sm); background: var(--status-success-tint); color: var(--fill-action); font-size: var(--font-size-body-sm); }
.yw-shop__added a { font-weight: 700; text-decoration: underline; }
.yw-shop__added[hidden] { display: none; }
.yw-shop__bar-pair { display: flex; gap: var(--space-sm); flex: 1; }
.yw-shop__bar-pair .yw-button--line { flex: 1; min-height: 56px; padding: 0 var(--space-md); white-space: nowrap; }
.yw-shop__bar-pair .yw-button--primary { flex: 1.3; padding: 0 var(--space-md); white-space: nowrap; }

/* 장바구니 · 주문 줄 */
.yw-shop__lines > * + * { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--border-hairline); }
.yw-shop__line-option { display: block; margin-top: 2px; font-size: var(--font-size-caption); color: var(--text-secondary); }

/* 비교 */
.yw-shop__compare-result { margin-top: var(--space-xl); }
.yw-shop__compare-big { font-size: 22px; font-weight: 700; color: var(--fill-action); font-variant-numeric: tabular-nums; }

/* 주문서 · 결제 */
.yw-shop__form-title { margin-bottom: var(--space-md); font-size: var(--font-size-body); font-weight: 700; }
.yw-shop__direct[hidden] { display: none; }
.yw-shop__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.yw-shop__row2 .yw-field + .yw-field { margin-top: 0; }
.yw-shop__sample-note { margin-top: var(--space-md); font-size: var(--font-size-caption); color: var(--text-secondary); text-align: center; }
.yw-shop__bar-space { flex: 1; }