/* =========================================
   파일: /public/assets/css/inventory.css (v3.1 정리본 / 전체 교체)
   - ✅ 모달(img / preorder) 중복 제거
   - ✅ 이미지 모달: 잘림 방지(object-fit:contain), 패널/뷰포트 안정
   - ✅ 닫기 버튼 가독성 개선(우상단)
   - ✅ 네비/닷/모바일 패딩 안정화
   - ✅ 선오더 모달: PC에서 더 큼 + 모바일 스택
   - ✅ price typo(ont-size) 수정
========================================= */

/* ===== CSS Variables (Design Tokens) ===== */
:root {
  --color-primary: #111;
  --color-primary-hover: #333;
  --color-bg: #fff;
  --color-bg-secondary: #f6f6f6;
  --color-bg-tertiary: #f8f9fb;
  --color-text: #111;
  --color-text-secondary: #555;
  --color-text-muted: #666;
  --color-border: #eaeaea;
  --color-border-dark: #d9d9d9;
  --color-border-light: #e3e6eb;
  --color-link: #0b63ce;
  --color-link-hover: #084a9e;

  --color-success: #1c7ed6;
  --color-success-bg: #e7f5ff;
  --color-success-border: #a5d8ff;

  --color-warning: #e67700;
  --color-warning-bg: #fff9db;
  --color-warning-border: #ffe8a3;

  --color-danger: #d9480f;
  --color-danger-bg: #fff5f5;
  --color-danger-border: #ffc9c9;

  --color-info: #7048e8;
  --color-info-bg: #f3f0ff;
  --color-info-border: #d0bfff;

  --color-neutral: #495057;
  --color-neutral-bg: #f1f3f5;
  --color-neutral-border: #ced4da;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-round: 999px;

  --font-xs: 11px;
  --font-sm: 12px;
  --font-base: 13px;
  --font-md: 14px;
  --font-lg: 16px;
  --font-xl: 18px;

  --max-width: 1280px;
  --topbar-height: 60px;
  --topbar-height-mobile: 120px;

  --touch-target: 44px;
  --touch-target-sm: 36px;

  --z-base: 1;
  --z-sticky: 20;
  --z-fixed: 50;
  --z-topbar: 100;
  --z-dropdown: 500;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-tooltip: 1500;

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.12);
}

/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body{
  background: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--font-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}

a{ color: var(--color-link); text-decoration: none; transition: color var(--transition-fast); }
a:hover{ color: var(--color-link-hover); text-decoration: underline; }
a:focus-visible{ outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-xs); }

button{
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
button:focus-visible{ outline: 2px solid var(--color-primary); outline-offset: 2px; }
button:disabled{ cursor: not-allowed; opacity: 0.4; }
button:not(:disabled):active{ transform: translateY(1px); }

input, select, textarea{ font-family: inherit; font-size: inherit; line-height: inherit; }
input:disabled, select:disabled, textarea:disabled{ opacity: 0.4; cursor: not-allowed; }

.page{ max-width: var(--max-width); margin: 0 auto; padding: var(--space-lg); }
@media (max-width: 640px){ .page{ padding: var(--space-sm); } }

.is-hidden{ display: none !important; }

.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ===== Buttons ===== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--touch-target-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-base);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: all var(--transition-fast);
  user-select: none;
}
.btn:hover:not(:disabled){ background: var(--color-bg-secondary); transform: translateY(-1px); }

.btn-primary{
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-bg);
}
.btn-primary:hover:not(:disabled){ background: var(--color-primary-hover); }

.btn-small{
  min-height: 28px;
  padding: 6px 10px;
  font-size: var(--font-sm);
}

@media (max-width: 640px){
  .btn{
    min-height: var(--touch-target);
    padding: var(--space-md) var(--space-lg);
  }
}

/* ===== Nav ===== */
.topbar-right{
  display:flex;
  align-items:center;
  gap: var(--space-md);
  order: 2;
  min-width: 0; /* ✅ 모바일 스크롤 레이아웃 안정화 */
}

.navBar{
  display:flex;
  align-items:center;
  gap: var(--space-sm);
  flex-wrap: wrap; /* ✅ PC에서는 자연스럽게 */
  min-width: 0;
}

.navBar .btn,
.navBar .navBtn{
  flex: 0 0 auto;
  white-space: nowrap;
}

.navBtn.active{
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-bg);
}

.btn-cart{ position: relative; }
.cart-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: var(--space-xs);
  border-radius: var(--radius-round);
  border: 1px solid var(--color-border-dark);
  background: var(--color-bg);
  font-size: var(--font-xs);
  font-weight: 800;
  line-height: 1;
}
.cart-badge.is-zero{ opacity: 0.4; }

/* ===== Topbar ===== */
.topbar{
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.topbar-inner{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-sm) var(--space-lg);
  display:flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--topbar-height);
}

.topbar-left{ flex: 1 1 auto; min-width: 0; order:1; }
.topbar-left-row{ display:flex; align-items:center; gap: var(--space-md); flex-wrap: wrap; }

.topbar-title{
  font-size: var(--font-lg);
  font-weight: 900;
  letter-spacing: -0.4px;
  line-height: 1.1;
  white-space: nowrap;
}

.topbar-badge{
  display:inline-flex;
  align-items:center;
  height: 20px;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-round);
  border: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
  font-size: var(--font-xs);
  font-weight: 900;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.topbar-summary{
  font-size: var(--font-sm);
  color: var(--color-text-secondary);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.topbar-who{
  display:inline-flex;
  align-items:center;
  gap: var(--space-xs);
  font-size: var(--font-base);
  color: var(--color-text-muted);
  white-space: nowrap;
}

#whoami{
  font-weight: 800;
  color: var(--color-text);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-right{ display:flex; align-items:center; gap: var(--space-md); order:2; }

.topbar-mid{
  flex: 0 0 100%;
  width: 100%;
  order:3;
  display:flex;
  align-items:center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.topbar-mid::-webkit-scrollbar{ display:none; }

.topMidIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px; height:26px;
  flex-shrink:0;
  border-radius: var(--radius-round);
  border:1px solid var(--color-border);
  background: var(--color-bg-tertiary);
  font-size: var(--font-md);
}

.topMidBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 30px;
  padding: 0 var(--space-md);
  border-radius: var(--radius-round);
  border: 1px solid var(--color-border-dark);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-sm);
  font-weight: 900;
  white-space: nowrap;
  text-decoration: none;
  flex-shrink:0;
  transition: all var(--transition-fast);
}
.topMidBtn:hover{ background: var(--color-bg-tertiary); text-decoration:none; transform: translateY(-1px); }
.topMidBtn--notice{ border-color:#d0ebff; background:#e7f5ff; }
.topMidBtn--promo{ border-color: var(--color-border); background: var(--color-bg); }

@media (max-width: 640px){
  .topbar-inner{ padding: var(--space-sm); min-height:auto; }
  .topbar-left-row{ gap: var(--space-sm); }
  .topbar-title{ font-size: var(--font-md); }
  .topbar-summary{ flex: 0 0 100%; max-width: 100%; font-size: 11px; }
  .topbar-who{ flex: 0 0 100%; font-size: var(--font-sm); }
  .topbar-right{
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
}

.navBar{
  flex: 1 1 auto;
  flex-wrap: nowrap;                 /* ✅ 줄바꿈 금지 */
  overflow-x: auto;                  /* ✅ 가로 스크롤 */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 6px;
  padding-bottom: 2px;
}

.navBar::-webkit-scrollbar{ display:none; }

.navBar .btn,
.navBar .navBtn,
.navBar .btn-cart{
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 38px;
  padding: 9px 12px;
  font-size: 13px;
  border-radius: 10px;
}
}

/* ===== Filters ===== */
.brandTabs{
  margin: -2px 0 10px;
  overflow: hidden;
}

.brandTabs-track{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 0 2px;
  max-height: 98px;
}

.brandTabs-track::-webkit-scrollbar{ display:none; }

.brandTab{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  max-width: 180px;
  padding: 0 14px;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-round);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-base);
  font-weight: 900;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.brandTab:hover{
  background: var(--color-bg-secondary);
  transform: translateY(-1px);
}

.brandTab.is-active{
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-bg);
}

.brandTab--logo{
  min-width: 126px;
  background: var(--color-bg);
}

.brandTab--logo.is-active{
  border-color: var(--color-primary);
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow:
    inset 0 0 0 3px var(--color-primary),
    0 1px 2px rgba(0,0,0,.08);
}

.brandTab-img{
  display: block;
  max-width: 92px;
  max-height: 24px;
  object-fit: contain;
}

.brandTab--text.is-active .brandTab-img{
  filter: brightness(0) invert(1);
}

.brandTab--logo.is-active .brandTab-img{
  filter: none;
}

.brandTab-text{
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filters{
  display:flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items:center;
  margin-bottom: var(--space-lg);
}

.filters select,
.filters input[type="search"]{
  height: var(--touch-target-sm);
  padding: 0 var(--space-md);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-size: var(--font-base);
  outline: none;
  transition: border-color var(--transition-fast);
}

.filters select:focus,
.filters input[type="search"]:focus{ border-color: var(--color-primary); }

.filters input[type="search"]{ flex: 1 1 auto; min-width: 200px; }

.filter-check{
  display:inline-flex;
  align-items:center;
  gap: var(--space-sm);
  font-size: var(--font-base);
  font-weight: 600;
  user-select:none;
  cursor:pointer;
}
.filter-check input[type="checkbox"]{ width:18px; height:18px; cursor:pointer; }

#btn-load{
  height: var(--touch-target-sm);
  padding: 0 var(--space-lg);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-bg);
  font-weight: 900;
  transition: all var(--transition-fast);
}
#btn-load:hover:not(:disabled){ background: var(--color-primary-hover); transform: translateY(-1px); }

@media (max-width: 640px){
  .brandTabs{
    margin-bottom: var(--space-sm);
  }

  .brandTabs-track{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    gap: 6px;
    padding-bottom: 7px;
  }

  .brandTab{
    min-height: 40px;
    max-width: 148px;
    padding: 0 12px;
    font-size: 13px;
  }

  .brandTab-img{
    max-width: 78px;
    max-height: 22px;
  }

  .brandTab--logo{
    min-width: 112px;
  }

  .filters{ gap: var(--space-sm); }
  .filters select,
  .filters input[type="search"]{
    height: var(--touch-target);
    font-size: var(--font-md);
  }
  .filters select{ flex: 1 1 calc(50% - 4px); min-width: 0; }
  .filters input[type="search"]{ flex: 0 0 100%; }
  .filter-check{ flex: 0 0 100%; }
  #btn-load{ flex: 0 0 100%; height: var(--touch-target); }
}

/* ===== Table ===== */
.tableWrap{
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}

#inventory-table{
  width: 100%;
  min-width: 900px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

#inventory-table thead th{
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-bg-secondary);
  border-bottom: 2px solid var(--color-border-dark);
  padding: var(--space-md) var(--space-sm);
  font-size: var(--font-sm);
  font-weight: 800;
  color: var(--color-text-secondary);
  text-align: center;
  white-space: nowrap;
}

#inventory-table td{
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-sm);
  vertical-align: middle;
  font-size: var(--font-base);
  background: var(--color-bg);
}

#inventory-table tbody tr:hover td{ background: var(--color-bg-secondary); }
#inventory-table tbody tr:last-child td{ border-bottom: none; }

/* Column widths */
.col-img{ width: 100px; min-width: 100px; max-width: 100px; text-align: center; }
.col-sku{ width: 85px; min-width: 85px; max-width: 85px; text-align: center; }
.col-brand{ display: none; }
.col-model{ width: 200px; min-width: 180px; }
/* 옵션 컬럼 폭 (기존 대비 약 60%) */
.col-option{
  width: 150px;
  min-width: 150px;
  max-width: 150px;
}
/* 옵션(컬러/사이즈) 2줄 스택: 위=컬러, 아래=사이즈 */
.col-option .optionWrap{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.col-option .optionWrap select{
  width: 100%;
  min-width: 0;
}


.opt-color,
.opt-size{
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
}

.opt-color:focus-visible,
.opt-size:focus-visible{
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.col-stock{ width: 90px; min-width: 90px; text-align: center; }
.col-price{ width: 130px; min-width: 120px; }

.col-action{
  width: 110px;
  min-width: 110px;
  max-width: 110px;
  position: sticky;
  right: 0;
  background: var(--color-bg);
  z-index: calc(var(--z-sticky) + 10);
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.05);
}
#inventory-table thead th.col-action{
  background: var(--color-bg-secondary);
  z-index: calc(var(--z-sticky) + 20);
}

.col-model,
.col-option{
  overflow-wrap: anywhere;
  word-break: break-word;
}

.col-sku{
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: text;
}
#inventory-table th.col-sku,
#inventory-table td.col-sku{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ===== 상품 셀 (모바일 SKU+모델 통합용) ===== */
.modelCell{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.modelCell-sku{
  display: none;
  font-size: 11px;
  font-weight: 800;
  color: var(--color-text-muted);
  letter-spacing: 0.2px;
  line-height: 1.25;
}
.modelCell-name{
  min-width: 0;
  font-size: var(--font-md);
  font-weight: 800;
  line-height: 1.35;
  color: var(--color-text);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.modelCell-name a{
  color: inherit;
  text-decoration: none;
}
.modelCell-name a:hover{
  text-decoration: underline;
}
.modelCell-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* ===== 옵션 요약(컬러/사이즈 종수 + 컬러칩) ===== */
.modelCell-summary{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.modelCell-summary-text{
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.colorChipRow{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: help;
}
.colorChip{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
  flex-shrink: 0;
}
.colorChip-extra{
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-muted);
  line-height: 1;
}

.badges{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* thumbs */
.thumb-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow:hidden;
  background: var(--color-bg-secondary);
  cursor:pointer;
  transition: all var(--transition-fast);
}
.thumb-wrap:hover{ border-color: var(--color-primary); transform: scale(1.05); }
.thumb-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.thumb,
.lazy-img{
  display:block;
  width:100%;
  height:100%;
}

/* badges */
.badge{
  display:inline-flex;
  align-items:center;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.badge-new{ background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
.badge-hot{ background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid var(--color-danger-border); }

/* stock badge */
.stock-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 70px;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.stock-badge.is-high{ background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
.stock-badge.is-medium{ background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning-border); }
.stock-badge.is-low{ background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid var(--color-danger-border); }
.stock-badge.is-preorder{ background: var(--color-info-bg); color: var(--color-info); border: 1px solid var(--color-info-border); }
.stock-badge.is-soldout{ background: var(--color-neutral-bg); color: var(--color-neutral); border: 1px solid var(--color-neutral-border); }

/* price */
.price-info{ display:flex; flex-direction: column; gap: 4px; }
.price-row{ display:flex; align-items: baseline; gap: 6px; }
.price-label{ font-size: 10px; font-weight: 600; color: var(--color-text-muted); }
.price-value{ font-size: var(--font-md); font-weight: 800; color: var(--color-text); }

.price-original{ font-size: var(--font-sm); color: var(--color-text-muted); text-decoration: line-through; }
.price-discount{
  display: inline-flex;
  align-items: center;
  gap: 4px;

  font-size: 12px;          /* 11 → 12 */
  font-weight: 900;         /* 더 선명 */
  color: var(--color-danger);

  padding: 2px 6px;         /* 배지 느낌 */
  border-radius: 999px;
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);

  letter-spacing: -0.2px;
}

/* 소비자가는 톤다운 + 취소선 */
.price-info .price-row:first-child .price-value{
  font-size: 11px;
  opacity: 0.5;
  font-weight: 700;
  text-decoration: line-through;
}
.price-info .price-row:first-child .price-label{ opacity: 0.55; }

/* ✅ 공급가는 강조(오타 수정: ont-size -> font-size) */
.price-info .price-row:nth-child(2) .price-value{
  font-size: 14px;
  opacity: 1;
  font-weight: 900;
}


.price-msrp{
  font-variant-numeric: tabular-nums;
}

.price-mask{
  display:inline-flex;
  align-items:center;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
}

.price-note{
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.35;
}

/* ===== Action ===== */
.actionWrap{
  display:flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

.qty-btn{
  width: 28px;
  height: 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background: transparent;
  font-size: var(--font-base);
  font-weight: 900;
  color: var(--color-text);
  cursor:pointer;
  transition: all var(--transition-fast);
}
.qty-btn:hover:not(:disabled){ background: var(--color-bg-secondary); }
.qty-btn:disabled{ opacity: 0.3; }

.row-qty{
  width: 36px;
  height: 28px;

  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);

  background: transparent;
  text-align: center;

  font-size: var(--font-sm);
  font-weight: 800;
  line-height: 28px; /* ✅ 클릭/포커스 흔들림 방지 핵심 */

  color: var(--color-text);
  outline: none;

  appearance: textfield;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
}

.row-qty::-webkit-inner-spin-button,
.row-qty::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.btn-add{
  flex: 0 0 100%;
  width: 100%;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-bg);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  transition: all var(--transition-fast);
}
.btn-add:hover:not(:disabled){ background: var(--color-primary-hover); transform: translateY(-1px); }
.btn-add.is-blocked{
  background: var(--color-neutral-bg);
  border-color: var(--color-neutral-border);
  color: var(--color-neutral);
}
.btn-add.is-preorder{ background: var(--color-info); border-color: var(--color-info); }
.row-blocked{ opacity: 0.92; }
.price-cost.is-hidden{ color: var(--color-text-muted); }

/* ===== Loading ===== */
.is-loading{ position: relative; pointer-events: none; opacity: 0.6; }
.is-loading::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ===== Hero ===== */
#topContent{ margin-bottom: 6px; }
.heroBannerTrack{ display:flex; gap: var(--space-md); margin-bottom: 6px; }
.heroBannerCard{
  position: relative;
  flex: 0 0 calc((100% - 24px) / 3);
  height: 200px;
  border-radius: var(--radius-lg);
  overflow:hidden;
  cursor:pointer;
  transition: transform var(--transition-fast);
}
.heroBannerCard:hover{ transform: translateY(-4px); }
.heroBannerCard img{ width: 100%; height: 100%; object-fit: cover; object-position: center; }

@media (max-width: 640px){
  /* ✅ 모바일에서는 SKU를 상품 셀 안으로 이동해 가독성 확보 */
  #inventory-table{
    min-width: 760px;
  }
  #inventory-table th.col-sku,
  #inventory-table td.col-sku{
    display: none;
  }
  .col-img{
    width: 78px;
    min-width: 78px;
    max-width: 78px;
  }
  .thumb-wrap{
    width: 60px;
    height: 60px;
  }
  .col-model{
    width: 230px;
    min-width: 230px;
  }
  .modelCell{
    gap: 5px;
  }
  .modelCell-sku{
    display: block;
  }
  .modelCell-name{
    font-size: 13px;
    line-height: 1.35;
  }
  .col-option{
    width: 132px;
    min-width: 132px;
    max-width: 132px;
  }
  .col-stock{
    width: 82px;
    min-width: 82px;
  }
  .stock-badge{
    min-width: 60px;
    padding: 6px 8px;
    font-size: 11px;
  }
  .col-price{
    width: 112px;
    min-width: 112px;
  }
  .price-label{
    font-size: 9px;
  }
  .price-value{
    font-size: 13px;
  }
  .col-action{
    width: 108px;
    min-width: 108px;
    max-width: 108px;
  }
  .actionWrap{
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    gap: 6px 4px;
    align-items: center;
  }
  .actionWrap > .qty-btn,
  .actionWrap > .row-qty{
    width: 100%;
  }
  .actionWrap .qty-btn{
    height: 28px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
  }
  .actionWrap .row-qty{
    height: 28px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    line-height: 26px;
  }
  .actionWrap .btn-add{
    grid-column: 1 / -1;
    min-height: 32px;
    padding: 7px 8px;
    font-size: 11px;
  }
}

@media (max-width: 1024px){
  .heroBannerCard{ flex: 0 0 calc((100% - 12px) / 2); height: 160px; }
}
@media (max-width: 640px){
  .heroBannerTrack{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: var(--space-sm);
    scrollbar-width: none;
  }
  .heroBannerTrack::-webkit-scrollbar{ display:none; }
  .heroBannerCard{ flex: 0 0 calc(100% - 16px); scroll-snap-align: start; height: 140px; }
}


/* =========================================
   IMAGE CAROUSEL MODAL (v3.2) ✅ 모달 섹션 전체 교체본
   목적:
   - 원본이 세로로 길거나 큰 이미지도 "안 잘리고" 항상 contain으로 축소
   - 모바일 주소창(dvh) / safe-area 대응
   - 닫기 버튼 가독성/위치 고정
========================================= */

@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes slideUp{ from{opacity:0; transform: translateY(20px);} to{opacity:1; transform: translateY(0);} }

.img-modal{
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
}
.img-modal.is-active{
  display: flex;
  align-items: center;
  justify-content: center;

  /* ✅ safe-area + 기본 패딩 */
  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
}

/* backdrop */
.img-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(4px);
  animation: fadeIn var(--transition-base);
  z-index: 1;
}

/* panel */
.img-modal__panel{
  position: relative;
  z-index: 2;

  width: min(980px, 96vw);
  /* ✅ vh + dvh 둘 다 (모바일 주소창/동적뷰포트 안정) */
  height: min(740px, 90vh);
  height: min(740px, 90dvh);

  display: flex;
  flex-direction: column;

  background: var(--color-bg);
  border-radius: var(--radius-xl);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  animation: slideUp var(--transition-slow);
  overflow: hidden;
}

/* stage */
.img-modal__stage{
  position: relative;
  flex: 1;
  min-height: 0;          /* ✅ 핵심: 자식 height:100%가 제대로 먹게 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

/* viewport: ✅ 이미지가 "무조건" 그릇 안에서 contain */
.img-modal__viewport{
  flex: 1;
  min-height: 0;          /* ✅ 핵심 */
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  border-radius: calc(var(--radius-xl) - 6px);
  background: #000;

  /* 모바일 스크롤/스와이프 충돌 줄이기 */
  touch-action: pan-y;
}
.img-modal__viewport.is-zoomed{
  /* 줌 상태에선 스와이프 대신 제스처 우선 */
  touch-action: pinch-zoom;
}

/* img: ✅ 그릇에 꽉 채우고 contain으로 축소 (잘림 방지) */
.img-modal__img{
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center;

  user-select: none;
  -webkit-user-drag: none;

  transform: scale(1);
  transition: transform var(--transition-base);
  will-change: transform;
}

/* close button */
.img-modal__close{
  position:absolute;
  top: 12px;
  right: 12px;
  z-index: 5;

  width: 44px;
  height: 44px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.58);
  color: #fff;

  font-size: 22px;
  line-height: 1;

  /* ✅ 어두운 배경에서 항상 또렷하게 */
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.img-modal__close:hover{ background: rgba(0,0,0,.72); }

/* nav */
.img-modal__nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;

  width: 46px;
  height: 46px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.45);
  color: #fff;

  font-size: 30px;
  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
/* ✅ 현재 HTML(.img-modal__prev/.img-modal__next) + 구버전(--prev/--next) 둘 다 커버 */
.img-modal__prev,
.img-modal__nav--prev{ left: 10px; }

.img-modal__next,
.img-modal__nav--next{ right: 10px; }

.img-modal__nav:hover{ background: rgba(0,0,0,.62); }

/* dots */
.img-modal__dots{
  display:flex;
  gap: 8px;
  justify-content:center;
  padding: 12px 14px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}
.img-modal__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.22);
}
.img-modal__dot.is-active{ background: rgba(0,0,0,.72); }

@media (max-width: 640px){
  .img-modal.is-active{
    padding:
      max(12px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  .img-modal__panel{
    width: calc(100% - 24px);
    height: min(78vh, 640px);
    height: min(78dvh, 640px);
  }

  .img-modal__nav{ width: 42px; height: 42px; font-size: 28px; }
  .img-modal__close{ width: 42px; height: 42px; font-size: 20px; }

}
/* =========================================
   PREORDER MODAL (v3.1) - 단일 정의 (중복 제거)
   - JS: modal.classList.add("is-active")로 열림
========================================= */

.preorder-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 2147483000;
}
.preorder-modal.is-active{ display:flex; }

.preorder-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
}

.preorder-content{
  position: relative;
  width: min(720px, 96vw);
  max-height: min(80vh, 820px);
  overflow: auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  padding: 22px 22px 18px;
}

/* header */
.preorder-header{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 14px;
}
.preorder-badge{
  display:inline-flex;
  align-items:center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: #111;
  color: #fff;
}
.preorder-title{
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* body */
.preorder-body{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
}

.preorder-product{
  border: 1px solid #e8e8e8;
  background: #fafafa;
  border-radius: 14px;
  padding: 14px;
}
.preorder-product .pp-brand{
  font-size: 12px;
  font-weight: 800;
  color: #666;
  margin-bottom: 6px;
}
.preorder-product .pp-model{
  font-size: 16px;
  font-weight: 900;
  color: #111;
  line-height: 1.25;
  margin-bottom: 6px;
}
.preorder-product .pp-option{
  font-size: 13px;
  font-weight: 700;
  color: #444;
}

/* eta */
.preorder-eta{
  border: 1px solid #dbe8ff;
  background: #f3f8ff;
  border-radius: 14px;
  padding: 14px;
}
.preorder-eta .eta-label{
  font-size: 12px;
  font-weight: 900;
  color: #0b63ce;
  margin-bottom: 6px;
}
.preorder-eta .eta-value{
  font-size: 16px;
  font-weight: 900;
  color: #111;
}

/* qty */
.preorder-qty{
  grid-column: 1 / -1;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
  padding: 12px 14px;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  background: #fff;
}
.preorder-qty label{
  font-size: 13px;
  font-weight: 900;
  color: #111;
}
.preorder-qty input{
  width: 140px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid #d9d9d9;
  padding: 0 12px;
  font-size: 15px;
  font-weight: 800;
  outline: none;
}
.preorder-qty input:focus{
  border-color: #0b63ce;
  box-shadow: 0 0 0 4px rgba(11,99,206,.15);
}

/* note */
.preorder-note{
  grid-column: 1 / -1;
  font-size: 13px;
  color: #444;
  line-height: 1.6;
  background: #f8f9fb;
  border: 1px solid #e3e6eb;
  border-radius: 14px;
  padding: 12px 14px;
}

/* actions */
.preorder-actions{
  display:flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}
.preorder-actions .btn{
  height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  font-weight: 900;
  border: 1px solid #d9d9d9;
  background: #fff;
}
.preorder-actions .btn:hover{ background: #f6f6f6; }
.preorder-actions .btn.btn-primary{
  border-color: #111;
  background: #111;
  color:#fff;
}
.preorder-actions .btn.btn-primary:hover{ filter: brightness(1.05); }

/* mobile */
@media (max-width: 560px){
  .preorder-content{
    width: min(520px, 96vw);
    padding: 18px 16px 14px;
    max-height: 86vh;
  }
  .preorder-body{ grid-template-columns: 1fr; }
  .preorder-title{ font-size: 20px; }
  .preorder-qty{
    flex-direction: column;
    align-items: stretch;
  }
  .preorder-qty input{ width: 100%; }
}

/* ===== 성능 최적화 ===== */
.is-resizing,
.is-resizing *{
  transition: none !important;
  animation: none !important;
}
@media (prefers-reduced-motion: no-preference){
  .tableWrap{ scroll-behavior: smooth; }
}


/* ===== 고대비 ===== */
@media (prefers-contrast: high){
  :root{
    --color-border: #000;
    --color-border-dark: #000;
    --color-text-muted: #000;
  }
  .btn{ border-width: 2px; }
  .stock-badge,
  .badge{ border-width: 2px; }
}

/* ===== Print ===== */
@media print{
  .topbar,
  .filters,
  .col-action,
  .heroBannerTrack{ display:none !important; }

  .tableWrap{ border:none; box-shadow:none; }
  #inventory-table{ min-width: 0; }
  #inventory-table thead th{ position: static; }
}
/* =========================================
   PATCH: 버튼 눌림(translateY) 범위 제한
   - 전역 button:active 이동은 모달 dots/네비까지 흔들리게 함
   - 눌림 효과는 .btn 계열에만 적용
========================================= */

/* 1) 전역 active 이동 효과 제거(override) */
button:not(:disabled):active{
  transform: none;
}

/* 2) 눌림 효과는 .btn에만 유지 */
.btn:not(:disabled):active{
  transform: translateY(1px);
}
/* 3) 이미지 모달 컨트롤은 클릭/포커스/active에서도 절대 이동 금지 */
.img-modal__close,
.img-modal__nav,
.img-modal__dot{
  transform: none !important;
}

/* 4) dot은 버튼 성격(베이스라인/포커스) 영향 줄이기 */
.img-modal__dot{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  outline: none;
}
.img-modal__dot:focus-visible{
  box-shadow: 0 0 0 3px rgba(0,0,0,.15);
}

/* --- img modal pan/zoom override (viewer v1) --- */
.img-modal__viewport.is-zoomed{
  touch-action: none;   /* JS가 핀치/팬 처리 */
  cursor: grab;
}
.img-modal__viewport.is-zoomed:active{
  cursor: grabbing;
}
/* sale badge / percent (JS legacy classes 지원 + badge-sale 추가) */
.sale-badge,
.badge-sale,            /* ✅ JS가 실제로 쓰는 클래스 */
.discount,
.percent,
[data-badge="sale"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 2px 8px;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 900;
  line-height: 1;

  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger-border);

  white-space: nowrap;
}

/* 레벨별 살짝 차이 (원하면 더 세게 해도 됨) */
.badge-sale-50{ opacity: 0.95; }
.badge-sale-60{ transform: scale(1.02); }
.badge-sale-70{ transform: scale(1.05); }

/* =========================================
   Site banner video support
   - image / video 공통 사이즈 유지
========================================= */
.heroBannerMedia{
  display:block;
  width:100%;
  height:170px;
  border-radius:14px;
  object-fit:cover;
  background:#000;
}

.heroBannerVideo{
  background:#000;
}

@media (max-width: 768px){
  .heroBannerMedia{
    height:140px;
    border-radius:12px;
  }
}

/* =========================================
   ✅ 상품 상세 모달 (내부 상세페이지, Product_Detail)
   - .preorder-modal과 동일한 is-active 토글 패턴
   - detail_content는 escape + 줄바꿈(<br>)만 적용된 텍스트로 렌더링됨
     (JS에서 innerHTML 직접 주입 금지, escape 후 줄바꿈 처리)
========================================= */
.pd-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 2147483000;
}
.pd-modal.is-active{ display:flex; }

.pd-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
}

.pd-modal-content{
  position: relative;
  width: min(960px, 96vw);
  max-height: min(86vh, 880px);
  overflow: auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  padding: 22px 22px 18px;
}

.pd-modal-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e8e8e8;
  background: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.pd-modal-close:hover{ background: #f6f6f6; }

.pd-modal-header{
  padding-right: 44px;
  margin-bottom: 14px;
}
.pd-modal-brand{
  font-size: 12px;
  font-weight: 800;
  color: #666;
  margin-bottom: 4px;
}
.pd-modal-title{
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #111;
}

.pd-modal-loading,
.pd-modal-error{
  padding: 28px 4px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #666;
}
.pd-modal-error{ color: #c0392b; }

.pd-modal-main{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pd-modal-summary{
  font-size: 14px;
  font-weight: 700;
  color: #444;
  line-height: 1.6;
  background: #f8f9fb;
  border: 1px solid #e3e6eb;
  border-radius: 14px;
  padding: 12px 14px;
}
.pd-modal-summary:empty{ display:none; }

.pd-modal-gallery{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pd-modal-gallery:empty{ display:none; }

.pd-gallery-main{
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.pd-gallery-main-image{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top center;
  border-radius: 12px;
  border: 1px solid #eee;
  background: #fafafa;
}
.pd-gallery-thumbs{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
}
.pd-gallery-thumb{
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.pd-gallery-thumb.is-active{
  border-color: #111;
}
.pd-gallery-thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  background: #f3f3f3;
}
.pd-modal-text{
  font-size: 14px;
  line-height: 1.7;
  color: #222;
  word-break: break-word;
  white-space: normal;
}
.pd-modal-text:empty{ display:none; }

@media (max-width: 560px){
  .pd-modal-content{
    width: 96vw;
    padding: 18px 16px 14px;
    max-height: 90vh;
  }
  .pd-modal-title{ font-size: 19px; }
  .pd-gallery-thumb{
    width: 64px;
    height: 64px;
  }
}

.img-modal.is-product-detail-preview{
  z-index: 2147483001;
}
.pd-gallery-thumb:focus-visible{
  outline: 2px solid #111;
  outline-offset: 2px;
}