/*
  구매자(소비자/식당) 모바일 화면 (#1 GMK-UX-001)
  모바일 우선, 하단 탭 내비게이션, 카드형 목록.
*/
.buyer-body {
  font-family: var(--font-family-base);
  font-size: var(--mobile-font-body);
  color: var(--color-text);
  background: var(--color-bg-subtle);
  margin: 0;
  padding-bottom: 72px; /* 하단 내비게이션 높이만큼 여백 */
}

@media (min-width: 1024px) {
  .buyer-body { padding-bottom: 0; }
}

/* 모바일 터치 영역 48px 이상 기준(#1)에 맞춘 폼 필드 */
.kream-content .field-input,
.kream-content .form-card { max-width: none; }
.kream-content .field-input {
  min-height: var(--touch-target-min);
  font-size: var(--mobile-font-body);
}
.kream-content .form-card { padding: var(--spacing-4); }

.buyer-section-title {
  font-size: 19px;
  font-weight: 800;
  margin: var(--spacing-2) 0 var(--spacing-3);
}

.buyer-bottomnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom);
}
/* PC(사이드바 노출 폭)에서는 하단 탭 대신 사이드바로 이동하므로 하단 탭을 숨긴다.
   반드시 위 기본 규칙(display:flex)보다 뒤에 와야 한다 — 순서가 바뀌면 PC에서도 하단 탭이
   계속 보이는 문제가 생긴다(#1 GMK-UX-001 회귀, 중매인 화면에서도 동일하게 발견됨). */
@media (min-width: 1024px) {
  .buyer-bottomnav { display: none; }
}
.buyer-bottomnav__item {
  flex: 1;
  min-height: var(--touch-target-min);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
}
.buyer-bottomnav__item.is-active { color: var(--color-primary); }
.buyer-bottomnav__icon { font-size: 20px; }

/* 하단 푸터 - 개인정보처리방침 등 정책 링크를 담는다. 모바일 하단 탭(fixed) 위에 일반 흐름으로 놓인다. */
.buyer-footer {
  padding: var(--spacing-5) var(--spacing-4);
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.buyer-footer__links { margin-bottom: var(--spacing-2); display: flex; align-items: center; justify-content: center; gap: 10px; }
.buyer-footer__links a {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.buyer-footer__links-sep { color: var(--color-border); }
.buyer-footer__copy { font-size: 12px; color: var(--color-text-muted); margin: 0; }

/* 개인정보처리방침 등 관리자가 위지윅으로 작성한 본문을 읽기 좋게 표시한다. */
.buyer-policy-content { font-size: 14px; line-height: 1.7; color: var(--color-text); max-width: 720px; }
.buyer-policy-content h3 { font-size: 16px; font-weight: 800; margin: var(--spacing-5) 0 var(--spacing-2); }
.buyer-policy-content h3:first-child { margin-top: 0; }
.buyer-policy-content p { margin: 0 0 var(--spacing-3); }
.buyer-policy-content ul, .buyer-policy-content ol { margin: 0 0 var(--spacing-3); padding-left: 1.4em; }
.buyer-policy-content li { margin-bottom: 4px; }

/* 검색창: 관리자 .admin-search-box(아이콘+인풋)와 같은 모양이되, 터치 영역은 모바일 기준(48px)을 유지한다. */
.buyer-search-box { position: relative; margin-bottom: var(--spacing-3); }
.buyer-search-box input {
  width: 100%;
  min-height: var(--touch-target-min);
  padding: 0 var(--spacing-4) 0 40px;
  font-size: var(--mobile-font-body);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.buyer-search-box .material-symbols-outlined {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--color-text-muted);
  pointer-events: none;
}

/* 카테고리 탭 + 품목 검색을 한 줄에 (관리자 품목 마스터 화면의 "구분 탭 + 등록 버튼" 배치 참고). */
.buyer-category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}
.buyer-category-row .buyer-tabs { margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
.buyer-category-row .buyer-search-box { margin-bottom: 0; width: 220px; max-width: 100%; flex-shrink: 0; }

.buyer-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  min-width: 0;
  margin-bottom: var(--spacing-3);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.buyer-tabs::-webkit-scrollbar { display: none; }
.buyer-tabs__item {
  flex-shrink: 0;
  min-height: 36px;
  border: 1px solid var(--color-border);
  background: #fff;
  padding: 7px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-muted);
  border-radius: 999px;
  cursor: pointer;
}
.buyer-tabs__item.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.buyer-cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  width: 100%;
  font-size: var(--mobile-font-button);
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
}

/*
  장바구니: 관리자 표 스타일(사진·상품명·규격·수량·소계를 한 행에)로 스캔 속도를 올리고,
  요약 패널은 주문상세와 같은 영수증 스타일을 재사용해 장바구니→체크아웃→주문상세가 같은
  시각 언어로 이어지게 한다 (#요청: 관리자 + 영수증 형식 결합).
*/
.buyer-qty-stepper { display: flex; align-items: center; gap: 6px; }
.buyer-qty-stepper__btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text);
  cursor: pointer;
}
.buyer-qty-stepper__btn:hover { background: var(--color-bg-subtle); }
.buyer-qty-stepper__input {
  width: 40px;
  height: 28px;
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.buyer-icon-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text-muted);
  cursor: pointer;
  text-decoration: none;
}
.buyer-icon-action-btn .material-symbols-outlined { font-size: 20px; }
.buyer-icon-action-btn--danger:hover { background: #fff5f5; color: var(--color-danger); border-color: var(--color-danger); }

/* 목록형 화면 최상단 페이지 헤더 - 중매인 .broker-page-header와 같은 무게로 강조한다. */
.buyer-page-header {
  padding-bottom: var(--spacing-3);
  margin-bottom: var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
}
.buyer-page-header__title { font-size: 22px; font-weight: 800; color: var(--color-text); margin: 0; }

/* 마이페이지 프로필 헤더: 아바타 + 이름/연락처 + 정보수정 버튼 (중매인 내정보와 동일한 패턴). */
.buyer-profile-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  margin-bottom: var(--spacing-4);
}
.buyer-profile-avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.buyer-profile-avatar .material-symbols-outlined { font-size: 30px; }
.buyer-profile-header__info { flex: 1; min-width: 0; }
.buyer-profile-header__name { font-size: 18px; font-weight: 800; color: var(--color-text); margin: 0 0 4px; }
.buyer-profile-header__meta { font-size: 13px; color: var(--color-text-muted); margin: 0; white-space: nowrap; }
.buyer-profile-header__edit {
  flex-shrink: 0;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}

/* 마이페이지 요약 아이콘 행 (회원유형/수신동의/배송지 개수) - 중매인 내정보 퀵메뉴 행과 동일. */
.buyer-quicklinks {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg);
  margin-bottom: var(--spacing-4);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.buyer-quicklinks__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  border-right: 1px solid var(--color-border);
}
.buyer-quicklinks__item:last-child { border-right: none; }
.buyer-quicklinks__item .material-symbols-outlined { font-size: 24px; color: var(--color-primary); }

/*
  KREAM(kream.co.kr/search) 참고 - 테두리 없는 정사각형 사진이 화면을 지배하고, 사진 아래 텍스트는
  중매인(작은 회색)·상품명(중간)·가격(굵게) 세 줄로만 간결하게 (#요청: 레이아웃을 KREAM 느낌으로).
*/
.kream-page-title { font-size: 22px; font-weight: 800; margin: 0 0 var(--spacing-4); }

.kream-toolbar { margin-bottom: var(--spacing-5); }
.kream-tabs {
  display: flex;
  gap: var(--spacing-4);
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--spacing-3);
  scrollbar-width: none;
}
.kream-tabs::-webkit-scrollbar { display: none; }
.kream-tabs__item {
  flex-shrink: 0;
  padding: 10px 2px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
}
.kream-tabs__item.is-active { color: var(--color-text); font-weight: 800; border-bottom-color: var(--color-text); }

.kream-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 16px;
}
@media (min-width: 560px) { .kream-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .kream-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .kream-grid { grid-template-columns: repeat(5, 1fr); } }

.kream-card, .kream-card:visited, .kream-card:hover, .kream-card:active { text-decoration: none; color: var(--color-text); display: block; }
.kream-card__image {
  position: relative;
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  background: var(--color-bg-subtle) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  margin-bottom: 12px;
  transition: opacity 0.15s ease;
}
@media (hover: hover) {
  .kream-card:hover .kream-card__image { opacity: 0.85; }
}
.kream-card__status {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 3px;
}
.kream-card__new {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  background: var(--color-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 3px;
}
.kream-card__broker {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kream-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kream-card__price { font-size: 16px; font-weight: 800; color: var(--color-text); margin: 0; }
.kream-card__ref { font-size: 11px; color: var(--color-text-muted); margin: 2px 0 0; }

/* 주문내역: 상태 탭 필터 + 카드형 리스트 (#요청: 표 대신 카드, 상태별 상단 탭). */
.buyer-order-list { display: flex; flex-direction: column; gap: var(--spacing-3); }
.buyer-order-card,
.buyer-order-card:visited,
.buyer-order-card:hover,
.buyer-order-card:active {
  display: block;
  padding: var(--spacing-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.15s ease;
}
.buyer-order-card:hover { border-color: var(--color-text); }
.buyer-order-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-3);
  font-size: 13px;
  color: var(--color-text-muted);
}
.buyer-order-card__body { display: flex; align-items: center; gap: var(--spacing-3); }
.buyer-order-card__thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-subtle);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}
.buyer-order-card__info { flex: 1; min-width: 0; }
.buyer-order-card__name {
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.buyer-order-card__meta { font-size: 13px; color: var(--color-text-muted); margin: 0; }
.buyer-order-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--spacing-3);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-border);
}
.buyer-order-card__badges { display: flex; gap: 6px; }
.buyer-order-status-badges { display: inline-flex; gap: 6px; }
.buyer-order-card__price { font-weight: 800; font-size: 16px; }

/* 주문상태/결제상태 배지 - 색상 점을 빼고 더 플랫하게, 카드/상세 화면 톤에 맞춘다. */
.buyer-order-card__badges .status-badge,
.buyer-order-status-badges .status-badge {
  padding: 3px 10px;
  font-size: 12px;
}
.buyer-order-card__badges .status-badge::before,
.buyer-order-status-badges .status-badge::before {
  display: none;
}

/* 오늘의 시세 대시보드: 품목 선택 리스트(좁은 열) + 다중 시세 비교 차트(넓은 열) (#요청: 대시보드+다중선택 비교). */
.kream-dashboard { display: flex; flex-direction: column; gap: var(--spacing-5); }
@media (min-width: 900px) {
  .kream-dashboard { flex-direction: row; align-items: flex-start; }
  .kream-dashboard__list { width: 300px; flex-shrink: 0; }
  .kream-dashboard__chart { flex: 1; min-width: 0; }
}
#itemPicker { max-height: 480px; overflow-y: auto; border-top: 1px solid var(--color-border); }
.kream-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  font-size: 14px;
}
.kream-item-row:hover { background: var(--color-bg-subtle); }
.kream-item-row input[type="checkbox"] { flex-shrink: 0; width: 16px; height: 16px; }
.kream-item-row__name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kream-item-row__count { font-size: 12px; color: var(--color-text-muted); flex-shrink: 0; }

/*
  오늘의 시세: 가락시장 공식 시세표 참고 - 매일 가격을 빠르게 비교해야 하는 식당 구매자에게는
  이미지 카드보다 품목·규격·가격·중매인을 한 줄로 촘촘히 늘어놓은 표가 더 실용적이다.
  (#28 GMK-UX-002: 목적에 따라 카드형/표형을 구분한다 - 관리자 표와 같은 톤, 사진은 작게만 곁들인다)
*/
.buyer-table-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}
.buyer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mobile-font-body);
}
.buyer-table th, .buyer-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.buyer-table th {
  background: var(--color-bg);
  font-weight: 700;
  color: var(--color-text);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.buyer-table tbody tr:last-child td { border-bottom: none; }
.buyer-table tbody tr { cursor: pointer; transition: background-color 0.12s ease; text-decoration: none; color: inherit; }
.buyer-table tbody tr:hover { background: var(--color-bg-subtle); }
.buyer-table__thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}
.buyer-table .amount-cell { font-weight: 800; font-size: 15px; }

/* 오늘의 시세 상단 품목별 가격 추이 그래프 카드 - 표만 있을 때 상단이 허전해 보이는 문제를 보완한다. */
.buyer-trend-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  margin-bottom: var(--spacing-4);
}
.buyer-trend-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}
.buyer-trend-card__title { font-size: 16px; font-weight: 800; margin: 0; }

/*
  상품 상세: 모바일은 세로로 쌓이지만 1024px 이상에서는 사진(넓은 열)과 가격·CTA(고정 사이드 패널)
  로 나눠 PC에서 좁은 단일 열이 화면 오른쪽을 텅 비워두는 문제를 없앤다
  (중매인 홈 대시보드 2단 그리드와 같은 방향, #28 GMK-UX-002).
  이미지 폭(480px)에 맞춰 열 너비를 좁혀 간격을 줄였는데, 넓은 화면에서는 블록 전체가 왼쪽으로
  쏠려 보이는 문제가 있어 컨테이너 안에서 가운데 정렬한다 (#요청).
*/
@media (min-width: 1024px) {
  .buyer-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 480px) 1fr;
    gap: var(--spacing-5);
    max-width: 900px;
    margin: 0 auto;
    align-items: start;
  }
  .buyer-detail-gallery { order: 1; }
  .buyer-detail-info { order: 2; position: sticky; top: var(--spacing-6); }
}
.buyer-detail-gallery__main {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-3);
}
.buyer-detail-gallery__thumbs { display: flex; gap: 8px; overflow-x: auto; }
.buyer-detail-gallery__thumbs > div {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle) center/cover no-repeat;
}
.buyer-detail-info__card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.buyer-detail-info__name { font-size: 20px; font-weight: 800; margin: 0 0 6px; }
.buyer-detail-info__spec { font-size: 14px; color: var(--color-text-muted); margin: 0 0 10px; }
.buyer-detail-info__price { font-size: 26px; font-weight: 800; margin: 0 0 10px; }
.buyer-detail-info__price small { font-size: 14px; font-weight: 500; color: var(--color-text-muted); }
.buyer-detail-info__meta { font-size: 13px; color: var(--color-text-muted); margin: 2px 0; }

/* 내정보 계정 행: 섹션 제목 대신 구분선 위 한 줄에 라벨+로그아웃 버튼을 나란히 둔다(중매인과 동일). */
.buyer-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4) 0;
  margin-top: var(--spacing-4);
  border-top: 1px solid var(--color-border);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}
/* 아이콘 + 텍스트로만 이루어진 보조 액션 링크 (정보 수정, 배송지 추가 등). */
.buyer-icon-text-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.buyer-icon-text-link .material-symbols-outlined { font-size: 18px; }

/* 기본 배송지 표시 - 컬러 상태점 배지 대신 검정/화이트로 나머지 마이페이지 톤에 맞춘다. */
.buyer-default-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-text);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* 저장/삭제 등 액션 직후 안내 - 배너로 자리 차지하지 않고 잠깐 떴다가 사라지는 팝오버형 토스트. */
.buyer-toast {
  position: fixed;
  top: 84px;
  left: 50%;
  z-index: 1080;
  padding: 12px 20px;
  background: var(--color-text);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18);
  pointer-events: none;
  opacity: 0;
  animation: buyer-toast-in 0.25s ease forwards, buyer-toast-out 0.3s ease 2.4s forwards;
}
@keyframes buyer-toast-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes buyer-toast-out {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}

/* 장바구니·주문접수: PC에서 상품 목록(넓은 열) + 요약·CTA(고정 사이드 패널)로 나눈다. */
@media (min-width: 1024px) {
  .buyer-cart-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--spacing-6);
    align-items: start;
  }
  .buyer-cart-main { order: 1; }
  .buyer-cart-side { order: 2; position: sticky; top: var(--spacing-6); }
}

/*
  주문상세: "지금 어디까지 왔는지"를 가장 먼저 보여주는 배송 추적 스테퍼 + 실제 영수증처럼
  보이는 주문 내역 카드(점선 구분선, 이중선 총액)를 결합한다. 처리 이력 텍스트 목록보다
  진행 상태를 훨씬 빠르게 스캔할 수 있고, 소비자 앱에서 익숙한 "영수증" 은유를 준다.
*/
.buyer-tracker {
  display: flex;
  align-items: flex-start;
  padding: var(--spacing-4) var(--spacing-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-4);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.buyer-tracker__step {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.buyer-tracker__step:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 9px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}
.buyer-tracker__step.is-line-done:not(:first-child)::before { background: var(--color-primary); }
.buyer-tracker__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-bg-subtle);
  border: 2px solid var(--color-border);
  z-index: 1;
}
.buyer-tracker__step.is-done .buyer-tracker__dot,
.buyer-tracker__step.is-current .buyer-tracker__dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.buyer-tracker__label { font-size: 12px; font-weight: 700; color: var(--color-text-muted); }
.buyer-tracker__step.is-done .buyer-tracker__label,
.buyer-tracker__step.is-current .buyer-tracker__label { color: var(--color-text); }

/* 취소된 주문은 스테퍼 대신 이 배너를 보여준다 - 나머지 화면과 같은 중립 톤 박스에, 아이콘만 danger 색으로 강조. */
.buyer-cancel-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--spacing-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-4);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.buyer-cancel-banner .material-symbols-outlined { font-size: 22px; color: var(--color-danger); flex-shrink: 0; }
.buyer-cancel-banner__title { font-weight: 700; font-size: 15px; margin: 0; color: var(--color-text); }
.buyer-cancel-banner__reason { font-size: 13px; color: var(--color-text-muted); margin: 4px 0 0; }

/* 처리 이력: Bootstrap list-group 대신 점 마커 + 구분선 방식으로 나머지 화면과 톤을 맞춘다. */
.buyer-history-list { display: flex; flex-direction: column; }
.buyer-history-row { display: flex; gap: 10px; padding: 10px 0; }
.buyer-history-row:not(:last-child) { border-bottom: 1px solid var(--color-border); }
.buyer-history-row__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-text);
  margin-top: 7px;
  flex-shrink: 0;
}
.buyer-history-row__body { flex: 1; min-width: 0; }
.buyer-history-row__status {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  font-weight: 700;
  font-size: 14px;
}
.buyer-history-row__time { font-weight: 500; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; }
.buyer-history-row__note { font-size: 13px; color: var(--color-text-muted); margin: 4px 0 0; }

/* 영수증 스타일 주문 내역 카드 */
.buyer-receipt {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  margin-bottom: var(--spacing-4);
}
.buyer-receipt__line {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) 0;
  border-bottom: 1px dashed var(--color-border);
}
.buyer-receipt__line:last-of-type { border-bottom: none; }
.buyer-receipt__thumb {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg) center/cover no-repeat;
}
.buyer-receipt__name { font-weight: 700; font-size: 14px; margin: 0; }
.buyer-receipt__meta { font-size: 12px; color: var(--color-text-muted); margin: 2px 0 0; }
.buyer-receipt__amount { margin-left: auto; font-weight: 700; font-size: 15px; white-space: nowrap; }
.buyer-receipt__divider { border: none; border-top: 1px dashed var(--color-border); margin: var(--spacing-3) 0; }
.buyer-receipt__row { display: flex; justify-content: space-between; font-size: 14px; color: var(--color-text-muted); margin: 0 0 6px; }
.buyer-receipt__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--spacing-3);
  margin-top: var(--spacing-2);
  border-top: 3px double var(--color-text);
  font-weight: 800;
}
.buyer-receipt__total span:last-child { font-size: 22px; color: var(--color-primary); }

/*
  KREAM(kream.co.kr) 참고 - 좌측 고정 사이드바 없이 상단 헤더 중심 내비게이션 + 여백을 넉넉히 쓰는
  화이트/블랙 위주의 미니멀한 레이아웃 (#요청: 구매자 메뉴/레이아웃을 아예 새로 구성).
*/
.kream-body { background: #fff; }
.kream-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}
.kream-header__row {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--spacing-4);
  height: 60px;
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
}
.kream-header__logo {
  font-size: 19px;
  font-weight: 900;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.kream-header__menu {
  display: none;
  align-items: center;
  gap: var(--spacing-4);
  flex-shrink: 0;
  height: 100%;
}
@media (min-width: 1024px) {
  .kream-header__menu { display: flex; }
}
.kream-header__menu-link {
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.kream-header__menu-link.is-active { color: var(--color-text); border-bottom-color: var(--color-text); }
.kream-header__menu-link:hover { color: var(--color-text); }

.kream-search {
  display: none;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 400px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg-subtle);
}
@media (min-width: 768px) {
  .kream-search { display: flex; }
  /* 헤더 검색창이 보이는 폭에서는 페이지 안의 중복 검색창을 숨긴다. */
  .buyer-search-box--mobile-only { display: none; }
}
.kream-search input { flex: 1; min-width: 0; border: none; background: none; font-size: 14px; outline: none; }
.kream-search .material-symbols-outlined { font-size: 18px; color: var(--color-text-muted); }

.kream-header__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  margin-left: auto;
  flex-shrink: 0;
}
.kream-header__icon-link {
  position: relative;
  display: flex;
  color: var(--color-text);
  text-decoration: none;
}
.kream-header__icon-link .material-symbols-outlined { font-size: 22px; }
.kream-header__icon-link.is-active { color: var(--color-primary); }
.kream-header__text-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  white-space: nowrap;
}
.kream-header__text-link:hover { color: var(--color-text); }
.kream-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.kream-main { background: #fff; }
.kream-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--spacing-4);
}
@media (min-width: 768px) {
  .kream-content { padding: var(--spacing-6) var(--spacing-4) 48px; }
}

/* 상품 타일 참고시세 칩 - 가락시장 시세 대비 우리 가격을 짧게 보여준다. */
.buyer-product-tile__ref {
  font-size: 11px;
  color: var(--color-text-muted);
  margin: 2px 0 0;
}

/* 장바구니: 표 대신 카드형 리스트 아이템 (쇼핑몰 장바구니 참고). */
.buyer-cart-list { display: flex; flex-direction: column; gap: var(--spacing-3); }
.buyer-cart-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.buyer-cart-item__thumb {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-subtle) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}
.buyer-cart-item__body { flex: 1; min-width: 0; }
.buyer-cart-item__name { font-weight: 700; font-size: 15px; margin: 0 0 4px; }
.buyer-cart-item__spec { font-size: 13px; color: var(--color-text-muted); margin: 0 0 10px; }
.buyer-cart-item__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.buyer-cart-item__subtotal { font-weight: 800; font-size: 16px; }

/* 결제: 배송지를 선택 가능한 카드로 (쇼핑몰 배송지 선택 UI 참고). */
.address-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: var(--spacing-3) var(--spacing-4);
  margin-bottom: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.address-card:has(input:checked) { border-color: var(--color-primary); }
.address-card input[type="radio"] { margin-top: 4px; flex-shrink: 0; }
.address-card__label { font-weight: 700; }
.address-card__meta { font-size: 14px; color: var(--color-text-muted); display: block; }