/* ================================================================
   여수 특산품몰 공통 CSS v3
   서브메뉴별 블루 계통 차별화 색상 적용
   ================================================================ */

/* ── 공통 CSS 변수 ── */
:root {
  /* 기존 그린 계통 (공통 유지) */
  --sh-green:  #1a6b3a;
  --sh-green2: #15803d;
  --sh-orange: #e8720c;
  --sh-dark:   #1a2e1a;
  --sh-bg:     #f8faf7;
  --sh-gray:   #6b7280;
  --sh-border: #e5e7eb;
  --sh-red:    #dc2626;

  /* ── 서브메뉴별 블루 계통 포인트 색상 ── */
  /* list.php  : 인디고 – 신뢰·탐색 */
  --bl-list:        #1e40af;
  --bl-list2:       #1d4ed8;
  --bl-list-light:  #eff6ff;
  --bl-list-border: #bfdbfe;
  --bl-list-text:   #1e3a8a;

  /* detail.php : 사이언 – 정보·집중 */
  --bl-detail:        #0e7490;
  --bl-detail2:       #0891b2;
  --bl-detail-light:  #ecfeff;
  --bl-detail-border: #a5f3fc;
  --bl-detail-text:   #164e63;

  /* product_form.php : 슬레이트블루 – 관리·입력 */
  --bl-form:        #3730a3;
  --bl-form2:       #4338ca;
  --bl-form-light:  #eef2ff;
  --bl-form-border: #c7d2fe;
  --bl-form-text:   #312e81;

  /* orders/admin : 틸 – 실행·처리 */
  --bl-admin:        #0f766e;
  --bl-admin2:       #0d9488;
  --bl-admin-light:  #f0fdfa;
  --bl-admin-border: #99f6e4;
  --bl-admin-text:   #134e4a;

  /* ── 타이포그래피 스케일 (PROJECT_RULES.md 원칙3 / layout.css --fs-* 공통 참조) ── */
  --sh-fs-xs: var(--fs-xs, 12px);   /* 12px — 배지 전용 */
  --sh-fs-sm: var(--fs-sm, 14px);   /* 14px — 메타·날짜·보조텍스트 최솟값 */
  --sh-fs-base: var(--fs-base, 16px);   /* 16px — 본문 기본 */
  --sh-fs-md: var(--fs-md, 17px);   /* 17px — 강조 본문·버튼·폼 */
  --sh-fs-lg: var(--fs-lg, 18px);   /* 18px — 카드 제목·섹션명 */
  --sh-fs-xl: var(--fs-xl, 20px);   /* 20px — 서브 헤더 */
  --sh-fs-2xl: var(--fs-2xl, 24px);   /* 24px — 페이지 제목 */
  --sh-fs-3xl: var(--fs-3xl, 28px);   /* 28px — 섹션 대제목 */
  --sh-fs-hero: var(--fs-hero, 32px);   /* 32px — 히어로 제목 */
}

/* ── 리셋 & 기본 ── */
* { box-sizing: border-box; }
body { font-family: var(--font-base); margin: 0; background: var(--color-bg); color: var(--color-text); } /* tokens.css 변수 기준 */
a { color: inherit; }
img { max-width: 100%; }

/* ── 페이지 공통 레이아웃 ── */
.sh-page-wrap { max-width: 1280px; margin: 0 auto; padding: 30px 20px; }
.sh-breadcrumb { font-size: var(--sh-fs-sm); color: var(--sh-gray); margin-bottom: 20px; }
.sh-breadcrumb a { text-decoration: none; }
.sh-breadcrumb span { margin: 0 6px; }

/* ── 공통 버튼 ── */
.btn-green   { background: var(--sh-green);  color: #fff; border: none; padding: 12px 28px; border-radius: 8px; font-size: var(--sh-fs-base); font-weight: 700; cursor: pointer; }
.btn-green:hover { background: var(--sh-green2); }
.btn-primary { background: var(--sh-green);  color: #fff; border: none; padding: 12px 28px; border-radius: 8px; font-size: var(--sh-fs-base); font-weight: 700; cursor: pointer; }
.btn-primary:hover { background: var(--sh-green2); }
.btn-orange  { background: var(--sh-orange); color: #fff; border: none; padding: 12px 28px; border-radius: 8px; font-size: var(--sh-fs-base); font-weight: 700; cursor: pointer; }
.btn-orange:hover { background: #ea580c; }
.btn-outline { background: #fff; color: var(--sh-green); border: 2px solid var(--sh-green); padding: 10px 24px; border-radius: 8px; font-size: var(--sh-fs-sm); font-weight: 600; cursor: pointer; }
.btn-outline:hover { background: var(--sh-bg); }

/* ── list.php 전용 버튼 (인디고) ── */
.btn-list   { background: var(--bl-list);  color: #fff; border: none; padding: 10px 22px; border-radius: 8px; font-size: var(--sh-fs-sm); font-weight: 700; cursor: pointer; }
.btn-list:hover { background: var(--bl-list2); }
.btn-list-outline { background: #fff; color: var(--bl-list); border: 2px solid var(--bl-list); padding: 8px 18px; border-radius: 8px; font-size: var(--sh-fs-sm); font-weight: 600; cursor: pointer; }
.btn-list-outline:hover { background: var(--bl-list-light); }

/* ── detail.php 전용 버튼 (사이언) ── */
.btn-detail  { background: var(--bl-detail); color: #fff; border: none; padding: 14px 30px; border-radius: 10px; font-size: var(--sh-fs-base); font-weight: 700; cursor: pointer; }
.btn-detail:hover { background: var(--bl-detail2); }
.btn-cart    { background: #fff; color: var(--bl-detail); border: 2px solid var(--bl-detail); padding: 14px 30px; border-radius: 10px; font-size: var(--sh-fs-base); font-weight: 700; cursor: pointer; }
.btn-cart:hover { background: var(--bl-detail-light); }

/* ── form 전용 버튼 (슬레이트블루) ── */
.btn-form    { background: var(--bl-form);  color: #fff; border: none; padding: 12px 28px; border-radius: 8px; font-size: var(--sh-fs-base); font-weight: 700; cursor: pointer; }
.btn-form:hover { background: var(--bl-form2); }
.btn-form-outline { background: #fff; color: var(--bl-form); border: 2px solid var(--bl-form); padding: 10px 24px; border-radius: 8px; font-size: var(--sh-fs-sm); font-weight: 600; cursor: pointer; }
.btn-form-outline:hover { background: var(--bl-form-light); }

/* ── admin 전용 버튼 (틸) ── */
.btn-admin   { background: var(--bl-admin); color: #fff; border: none; padding: 10px 22px; border-radius: 8px; font-size: var(--sh-fs-sm); font-weight: 700; cursor: pointer; }
.btn-admin:hover { background: var(--bl-admin2); }
.btn-admin-sm { background: var(--bl-admin); color: #fff; border: none; padding: 5px 12px; border-radius: 6px; font-size: var(--sh-fs-xs); font-weight: 700; cursor: pointer; }
.btn-admin-sm:hover { background: var(--bl-admin2); }

/* ── 폼 공통 ── */
.sh-form-group { margin-bottom: 20px; }
.sh-form-group label { display: block; font-size: var(--sh-fs-sm); font-weight: 600; color: #374151; margin-bottom: 6px; }
.sh-form-group input, .sh-form-group select, .sh-form-group textarea {
  width: 100%; border: 1px solid var(--sh-border); border-radius: 8px; padding: 10px 14px;
  font-size: var(--sh-fs-sm); outline: none; font-family: inherit;
}
.sh-form-group input:focus, .sh-form-group select:focus, .sh-form-group textarea:focus {
  border-color: var(--bl-form); box-shadow: 0 0 0 3px rgba(55,48,163,.1);
}

/* ── 알림 박스 ── */
.sh-alert { padding: 14px 18px; border-radius: 8px; font-size: var(--sh-fs-sm); margin-bottom: 20px; }
.sh-alert-success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.sh-alert-error   { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.sh-alert-info    { background: var(--bl-list-light); border: 1px solid var(--bl-list-border); color: var(--bl-list-text); }

/* ══════════════════════════════════════════════
   list.php 전용 – 인디고 테마
   ══════════════════════════════════════════════ */
/* 미니 헤더 */
.sh-mini-header-list {
  background: var(--bl-list);
  color: #dbeafe;
  font-size: var(--sh-fs-xs);
  padding: 8px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sh-mini-header-list a { color: #bfdbfe; text-decoration: none; }
.sh-mini-header-list a:hover { color: #fff; }
.sh-mini-header-list .logo { color: #93c5fd; font-weight: 700; }

/* 페이지 헤더 */
.sh-page-header-list {
  background: linear-gradient(135deg, var(--bl-list) 0%, var(--bl-list2) 100%);
  color: #fff;
  padding: 32px 20px;
  margin-bottom: 0;
}
.sh-page-header-list h1 { margin: 0 0 6px; font-size: var(--sh-fs-2xl); font-weight: 800; }
.sh-page-header-list p  { margin: 0; font-size: var(--sh-fs-sm); color: #bfdbfe; }

/* 사이드바 */
.sh-list-wrap { max-width: 1280px; margin: 0 auto; padding: 30px 20px; display: grid; grid-template-columns: 220px 1fr; gap: 30px; }
.sh-sidebar { flex-shrink: 0; }
.sh-sb-box { background: #fff; border: 1px solid var(--sh-border); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
.sh-sb-title { font-size: var(--sh-fs-sm); font-weight: 800; color: var(--bl-list-text); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--bl-list); }
.sh-sb-cat a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; text-decoration: none; font-size: var(--sh-fs-sm); color: #374151; margin-bottom: 2px; }
.sh-sb-cat a:hover, .sh-sb-cat a.active { background: var(--bl-list-light); color: var(--bl-list); font-weight: 700; }

/* 정렬 바 */
.sh-filter-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.sh-filter-left { display: flex; align-items: center; gap: 8px; }
.sh-filter-tag  { font-size: var(--sh-fs-sm); font-weight: 700; color: #1f2937; }
.sh-filter-count { font-size: var(--sh-fs-sm); color: var(--sh-gray); }
.sh-sort-select { border: 1px solid var(--bl-list-border); border-radius: 8px; padding: 8px 14px; font-size: var(--sh-fs-sm); cursor: pointer; outline: none; }
.sh-sort-select:focus { border-color: var(--bl-list); box-shadow: 0 0 0 3px rgba(30,64,175,.1); }

/* 상품 그리드 */
.sh-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sh-product-card { background: #fff; border: 1px solid var(--sh-border); border-radius: 12px; overflow: hidden; transition: all .2s; display: block; text-decoration: none; color: inherit; }
.sh-product-card:hover { box-shadow: 0 6px 20px rgba(30,64,175,.12); transform: translateY(-3px); border-color: var(--bl-list); }
.sh-product-img { position: relative; aspect-ratio: 1/1; overflow: hidden; background: #f3f4f6; }
.sh-product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.sh-product-card:hover .sh-product-img img { transform: scale(1.05); }
.sh-product-badges { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 3px; }
.sh-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
.sh-badge-best   { background: var(--bl-list2); color: #fff; }
.sh-badge-new    { background: #15803d; color: #fff; }
.sh-badge-sale   { background: var(--sh-red); color: #fff; }
.sh-badge-member { background: #1d4ed8; color: #fff; }
.sh-product-info { padding: 12px; }
.sh-product-cat  { font-size: 11px; color: var(--bl-list); font-weight: 600; margin-bottom: 3px; }
.sh-product-name { font-size: var(--sh-fs-sm); font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; }
.sh-product-origin { font-size: 11px; color: var(--sh-gray); margin-bottom: 8px; }
.sh-product-origin span { background: var(--bl-list-light); color: var(--bl-list-text); padding: 2px 6px; border-radius: 4px; }
.sh-price-row     { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.sh-price-rate    { font-size: var(--sh-fs-xs); font-weight: 700; color: var(--sh-red); }
.sh-price-sale    { font-size: var(--sh-fs-base); font-weight: 800; color: var(--sh-red); }
.sh-price-normal  { font-size: var(--sh-fs-base); font-weight: 800; color: #1f2937; }
.sh-price-original { font-size: 11px; color: #9ca3af; text-decoration: line-through; }
.sh-product-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.sh-rating { font-size: 11px; color: var(--sh-gray); }
.sh-cart-btn { background: var(--bl-list); color: #fff; border: none; border-radius: 6px; padding: 5px 10px; font-size: 11px; font-weight: 700; cursor: pointer; }
.sh-cart-btn:hover { background: var(--bl-list2); }

/* 빈 결과 & 페이지네이션 */
.sh-empty { text-align: center; padding: 80px 20px; color: var(--sh-gray); }
.sh-empty .icon { font-size: 60px; margin-bottom: 16px; }
.sh-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 40px; flex-wrap: wrap; }
.sh-pagination a, .sh-pagination span { padding: 8px 14px; border: 1px solid var(--sh-border); border-radius: 8px; font-size: var(--sh-fs-sm); text-decoration: none; color: #374151; }
.sh-pagination a:hover { border-color: var(--bl-list); color: var(--bl-list); }
.sh-pagination .current { background: var(--bl-list); color: #fff; border-color: var(--bl-list); }

/* ══════════════════════════════════════════════
   detail.php 전용 – 사이언 테마
   ══════════════════════════════════════════════ */
/* 미니 헤더 */
.sh-mini-header-detail {
  background: var(--bl-detail);
  color: #cffafe;
  font-size: var(--sh-fs-xs);
  padding: 8px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sh-mini-header-detail a { color: #a5f3fc; text-decoration: none; }
.sh-mini-header-detail a:hover { color: #fff; }
.sh-mini-header-detail .logo { color: #67e8f9; font-weight: 700; }

/* 상세 레이아웃 */
.sh-detail-wrap { max-width: 1280px; margin: 30px auto; padding: 0 20px; }
.sh-detail-main { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-bottom: 60px; }

/* 이미지 */
.sh-detail-img-wrap { position: relative; }
.sh-main-img { border-radius: 16px; overflow: hidden; aspect-ratio: 1/1; background: #f3f4f6; }
.sh-main-img img { width: 100%; height: 100%; object-fit: cover; }
.sh-detail-badges { position: absolute; top: 16px; left: 16px; display: flex; gap: 6px; flex-wrap: wrap; }
.sh-badge-best-lg { background: var(--bl-detail); color: #fff; font-size: var(--sh-fs-xs); font-weight: 700; padding: 4px 10px; border-radius: 6px; }
.sh-badge-new-lg  { background: #15803d; color: #fff; font-size: var(--sh-fs-xs); font-weight: 700; padding: 4px 10px; border-radius: 6px; }
.sh-badge-sale-lg { background: var(--sh-red); color: #fff; font-size: var(--sh-fs-xs); font-weight: 700; padding: 4px 10px; border-radius: 6px; }

/* 상품 정보 */
.sh-detail-info   { display: flex; flex-direction: column; gap: 16px; }
.sh-detail-cat    { font-size: var(--sh-fs-sm); color: var(--bl-detail); font-weight: 600; }
.sh-detail-name   { font-size: 26px; font-weight: 800; color: var(--sh-dark); line-height: 1.3; margin: 0; }
.sh-detail-summary { font-size: var(--sh-fs-sm); color: var(--sh-gray); line-height: 1.6; }
.sh-detail-rating { display: flex; align-items: center; gap: 10px; font-size: var(--sh-fs-sm); }
.sh-detail-price-box { background: var(--bl-detail-light); border: 1px solid var(--bl-detail-border); border-radius: 12px; padding: 20px; }
.sh-detail-price-label { font-size: var(--sh-fs-xs); color: var(--bl-detail-text); margin-bottom: 4px; }
.sh-detail-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sh-detail-price-rate { font-size: var(--sh-fs-xl); font-weight: 800; color: var(--sh-red); }
.sh-detail-price-sale { font-size: var(--sh-fs-hero); font-weight: 800; color: var(--bl-detail); }
.sh-detail-price-orig { font-size: var(--sh-fs-base); color: #9ca3af; text-decoration: line-through; }
.sh-detail-price-norm { font-size: var(--sh-fs-hero); font-weight: 800; color: #1f2937; }

/* 구매 박스 */
.sh-buy-box { background: #fff; border: 1px solid var(--bl-detail-border); border-radius: 12px; padding: 20px; }
.sh-buy-box h4 { margin: 0 0 14px; font-size: var(--sh-fs-sm); color: var(--bl-detail-text); }
.sh-opt-select { width: 100%; border: 1px solid var(--bl-detail-border); border-radius: 8px; padding: 10px 14px; font-size: var(--sh-fs-sm); outline: none; margin-bottom: 8px; }
.sh-opt-select:focus { border-color: var(--bl-detail); box-shadow: 0 0 0 3px rgba(14,116,144,.1); }
.sh-qty-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.sh-qty-btn { background: #f3f4f6; border: 1px solid var(--sh-border); border-radius: 6px; width: 34px; height: 34px; font-size: var(--sh-fs-lg); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sh-qty-btn:hover { background: var(--bl-detail-light); border-color: var(--bl-detail); }
.sh-qty-input { width: 60px; border: 1px solid var(--sh-border); border-radius: 6px; padding: 6px; text-align: center; font-size: var(--sh-fs-base); font-weight: 700; }
.sh-total-row { background: var(--bl-detail-light); border-radius: 8px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.sh-total-label { font-size: var(--sh-fs-sm); color: var(--bl-detail-text); }
.sh-total-price { font-size: 22px; font-weight: 800; color: var(--bl-detail); }
.sh-btn-row { display: flex; gap: 10px; }
.sh-btn-row button { flex: 1; }

/* 탭 & 설명 */
.sh-tab-wrap { border-bottom: 2px solid var(--sh-border); margin-bottom: 24px; display: flex; gap: 4px; }
.sh-tab { padding: 12px 20px; font-size: var(--sh-fs-sm); font-weight: 600; color: var(--sh-gray); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.sh-tab.active { color: var(--bl-detail); border-bottom-color: var(--bl-detail); }
.sh-detail-desc { font-size: var(--sh-fs-sm); line-height: 1.8; color: #374151; }
.sh-detail-desc table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.sh-detail-desc td, .sh-detail-desc th { border: 1px solid var(--sh-border); padding: 10px 14px; font-size: var(--sh-fs-sm); }
.sh-detail-desc th { background: var(--bl-detail-light); color: var(--bl-detail-text); font-weight: 700; width: 120px; }

/* 리뷰 */
.sh-review-card { background: #fff; border: 1px solid var(--sh-border); border-radius: 10px; padding: 16px; margin-bottom: 12px; }
.sh-review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sh-review-author { font-size: var(--sh-fs-sm); font-weight: 700; }
.sh-review-date { font-size: var(--sh-fs-xs); color: var(--sh-gray); }
.sh-review-rating { color: #f59e0b; font-size: var(--sh-fs-sm); margin-bottom: 6px; }
.sh-review-body { font-size: var(--sh-fs-sm); color: #374151; line-height: 1.6; }

/* 연관 상품 */
.sh-rel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sh-rel-card { border: 1px solid var(--sh-border); border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; display: block; transition: all .2s; }
.sh-rel-card:hover { box-shadow: 0 4px 14px rgba(14,116,144,.12); border-color: var(--bl-detail); }
.sh-rel-img { aspect-ratio: 1/1; overflow: hidden; background: #f3f4f6; }
.sh-rel-img img { width: 100%; height: 100%; object-fit: cover; }
.sh-rel-info { padding: 10px; }
.sh-rel-name { font-size: var(--sh-fs-xs); font-weight: 600; line-height: 1.4; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sh-rel-price { font-size: var(--sh-fs-sm); font-weight: 800; color: var(--bl-detail); }

/* ══════════════════════════════════════════════
   admin/product_form.php 전용 – 슬레이트블루 테마
   ══════════════════════════════════════════════ */
.sh-mini-header-form {
  background: var(--bl-form);
  color: #e0e7ff;
  font-size: var(--sh-fs-xs);
  padding: 8px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sh-mini-header-form a { color: #c7d2fe; text-decoration: none; }
.sh-mini-header-form a:hover { color: #fff; }

.sh-form-wrap { max-width: 900px; margin: 30px auto; padding: 0 20px; }
.sh-form-card { background: #fff; border: 1px solid var(--bl-form-border); border-radius: 16px; padding: 32px; margin-bottom: 24px; }
.sh-form-section-title {
  font-size: var(--sh-fs-base); font-weight: 800; color: var(--bl-form-text);
  margin: 0 0 20px; padding-bottom: 12px;
  border-bottom: 2px solid var(--bl-form);
  display: flex; align-items: center; gap: 8px;
}
.sh-page-header-form {
  background: linear-gradient(135deg, var(--bl-form) 0%, var(--bl-form2) 100%);
  color: #fff; padding: 28px 20px; margin-bottom: 0;
}
.sh-page-header-form h1 { margin: 0 0 4px; font-size: 22px; font-weight: 800; }
.sh-page-header-form p  { margin: 0; font-size: var(--sh-fs-sm); color: #c7d2fe; }

/* 폼 내 포커스 색상 override */
.sh-form-card .sh-form-group input:focus,
.sh-form-card .sh-form-group select:focus,
.sh-form-card .sh-form-group textarea:focus {
  border-color: var(--bl-form); box-shadow: 0 0 0 3px rgba(55,48,163,.12);
}

/* ══════════════════════════════════════════════
   admin 목록 페이지 전용 – 틸 테마
   ══════════════════════════════════════════════ */
.sh-mini-header-admin {
  background: var(--bl-admin);
  color: #ccfbf1;
  font-size: var(--sh-fs-xs);
  padding: 8px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sh-mini-header-admin a { color: #99f6e4; text-decoration: none; }
.sh-mini-header-admin a:hover { color: #fff; }
.sh-mini-header-admin .logo { color: #5eead4; font-weight: 700; }

.sh-page-header-admin {
  background: linear-gradient(135deg, var(--bl-admin) 0%, var(--bl-admin2) 100%);
  color: #fff; padding: 28px 20px;
}
.sh-page-header-admin h1 { margin: 0 0 4px; font-size: 22px; font-weight: 800; }
.sh-page-header-admin p  { margin: 0; font-size: var(--sh-fs-sm); color: #99f6e4; }

.sh-admin-wrap { max-width: 1280px; margin: 0 auto; padding: 30px 20px; }

/* 관리자 테이블 */
.sh-admin-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.sh-admin-table thead th {
  background: var(--bl-admin); color: #fff;
  font-size: var(--sh-fs-sm); font-weight: 700; padding: 12px 14px; text-align: left;
}
.sh-admin-table tbody tr { border-bottom: 1px solid #f3f4f6; }
.sh-admin-table tbody tr:hover { background: var(--bl-admin-light); }
.sh-admin-table tbody td { padding: 12px 14px; font-size: var(--sh-fs-sm); color: #374151; vertical-align: middle; }

/* 주문 상태 뱃지 */
.sh-status { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.sh-status-pending  { background: #fef9c3; color: #854d0e; }
.sh-status-paid     { background: var(--bl-admin-light); color: var(--bl-admin-text); border: 1px solid var(--bl-admin-border); }
.sh-status-shipping { background: var(--bl-list-light); color: var(--bl-list-text); }
.sh-status-done     { background: #f0fdf4; color: #166534; }
.sh-status-cancel   { background: #fef2f2; color: #991b1b; }

/* 통계 카드 */
.sh-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 30px; }
.sh-stat-card { background: #fff; border: 1px solid var(--sh-border); border-radius: 12px; padding: 20px; text-align: center; }
.sh-stat-card .stat-icon { font-size: var(--sh-fs-3xl); margin-bottom: 8px; }
.sh-stat-card .stat-label { font-size: var(--sh-fs-xs); color: var(--sh-gray); margin-bottom: 4px; }
.sh-stat-card .stat-value { font-size: 22px; font-weight: 800; color: var(--bl-admin); }
.sh-stat-card .stat-sub   { font-size: 11px; color: var(--sh-gray); margin-top: 2px; }

/* 검색/필터 바 (admin) */
.sh-admin-filter { background: #fff; border: 1px solid var(--sh-border); border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.sh-admin-filter input, .sh-admin-filter select { border: 1px solid var(--bl-admin-border); border-radius: 8px; padding: 8px 12px; font-size: var(--sh-fs-sm); outline: none; }
.sh-admin-filter input:focus, .sh-admin-filter select:focus { border-color: var(--bl-admin); box-shadow: 0 0 0 3px rgba(15,118,110,.1); }

/* 페이지네이션 (admin) */
.sh-admin-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 30px; flex-wrap: wrap; }
.sh-admin-pagination a, .sh-admin-pagination span { padding: 7px 13px; border: 1px solid var(--sh-border); border-radius: 6px; font-size: var(--sh-fs-sm); text-decoration: none; color: #374151; }
.sh-admin-pagination a:hover { border-color: var(--bl-admin); color: var(--bl-admin); }
.sh-admin-pagination .current { background: var(--bl-admin); color: #fff; border-color: var(--bl-admin); }

/* ══════════════════════════════════════════════
   공통 반응형
   ══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .sh-list-wrap   { grid-template-columns: 1fr; }
  .sh-sidebar     { display: none; }
  .sh-detail-main { grid-template-columns: 1fr; gap: 30px; }
  .sh-rel-grid    { grid-template-columns: repeat(2, 1fr); }
  .sh-stat-grid   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .sh-product-grid { grid-template-columns: repeat(2, 1fr); }
  .sh-rel-grid     { grid-template-columns: repeat(2, 1fr); }
  .sh-stat-grid    { grid-template-columns: repeat(2, 1fr); }
  .sh-btn-row      { flex-direction: column; }
}