/* ============================================================
   official-sales-renew.css — 공식판매 페이지 리뉴얼 오버레이
   · 모든 규칙은 body.renewal-os 하위로만 적용
   · 전역 element selector(svg/img/section/body/h1..) 사용 금지
   · 인라인 <style> 블록과 충돌하지 않게 specificity만으로 덮어씀
   ============================================================ */

/* ── 0. 스프라이트 아이콘 하드 캡 ── */
.renewal-os .ico-svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px;
  max-height: 20px;
  min-width: 20px;
  min-height: 20px;
  flex: 0 0 auto;
  flex-shrink: 0;
  display: inline-block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
}
.renewal-os .nav-toggle { color: var(--n-7); line-height: 0; }
.renewal-os .nav-toggle .ico-svg { width: 22px !important; height: 22px !important; min-width: 22px; min-height: 22px; max-width: 22px; max-height: 22px; }

/* ── 1. 페이지 헤드/아이브로우 ── */
.renewal-os .page-head .eyebrow {
  display: inline-block;
  background: var(--n-0);
  border: 1px solid var(--brand-line);
  color: var(--brand-ink);
  border-radius: var(--r-sm);
  padding: 5px 12px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: 0.02em;
  box-shadow: none;
}
.renewal-os .page-head h1 { color: var(--n-8); letter-spacing: var(--ls-heading); }
.renewal-os .page-head p { color: var(--n-6); }

/* ── 2. 필터 패널 ── */
.renewal-os .panel-card { border: 1px solid var(--n-3); box-shadow: none; }
.renewal-os .panel-card:hover { border-color: var(--n-4); box-shadow: var(--sh-2); }
.renewal-os .os-filters select {
  background: var(--n-0);
  border: 1px solid var(--n-3);
  border-radius: var(--r-sm);
  color: var(--n-7);
}
.renewal-os .os-filters select:focus {
  border-color: var(--brand);
  box-shadow: var(--focus);
  outline: none;
}

/* ── 3. 상품 카드 그리드 (os-card) ── */
.renewal-os .os-card { border: 1px solid var(--n-3); border-radius: var(--r-md); background: var(--n-0); }
.renewal-os .os-card:hover { border-color: var(--n-4); box-shadow: var(--sh-2); }

.renewal-os .os-card .thumb {
  border-radius: var(--r-md) var(--r-md) 0 0;
  background:
    radial-gradient(80% 70% at 30% 25%, var(--n-0) 0%, var(--sage-50) 55%, var(--sage-100) 100%);
}
.renewal-os .os-card .thumb-empty {
  border-radius: var(--r-md) var(--r-md) 0 0;
  background:
    radial-gradient(80% 70% at 30% 25%, var(--n-0) 0%, var(--sage-50) 55%, var(--sage-100) 100%);
  color: var(--n-6);
}

/* 썸네일 내 실루엣 아이콘 (JS가 동적 생성하는 경우 대비) */
.renewal-os .os-card .thumb .ico-svg,
.renewal-os .os-card .thumb-empty .ico-svg {
  width: 56px !important;
  height: 72px !important;
  min-width: 56px;
  min-height: 72px;
  max-width: 56px;
  max-height: 72px;
  color: var(--n-6);
  filter: drop-shadow(0 4px 10px rgba(20,22,26,0.08));
}

/* 등급 배지 톤 통일 (인라인 style 덮어쓰기) */
.renewal-os .os-card .grade,
.renewal-os .os-card [class*="grade"] {
  background: var(--brand-weak) !important;
  color: var(--brand-ink) !important;
  border: 1px solid var(--brand-line) !important;
  border-radius: var(--r-sm) !important;
  font-size: var(--fs-micro) !important;
  font-weight: var(--fw-semi) !important;
  padding: 3px 8px !important;
}
.renewal-os .os-card .grade.A,
.renewal-os .os-card [class*="grade"].A { background: var(--accent-weak) !important; color: var(--accent) !important; border-color: var(--accent) !important; }
.renewal-os .os-card .grade.B,
.renewal-os .os-card [class*="grade"].B { background: var(--warn-weak) !important; color: var(--warn) !important; border-color: var(--warn-line) !important; }
.renewal-os .os-card .grade.C,
.renewal-os .os-card [class*="grade"].C { background: var(--danger-weak) !important; color: var(--danger) !important; border-color: var(--danger-line) !important; }

.renewal-os .os-card .name { color: var(--n-8); font-weight: var(--fw-semi); }
.renewal-os .os-card .spec { color: var(--n-5); }
.renewal-os .os-card .price {
  color: var(--n-8);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
}
.renewal-os .os-card .price::after { content: "원"; font-family: var(--font-sans); font-weight: var(--fw-medium); color: var(--n-5); font-size: 0.72em; margin-left: 2px; letter-spacing: 0; }

/* 빈 상태 */
.renewal-os .os-empty { color: var(--n-5); }
.renewal-os .os-empty-title { color: var(--n-8) !important; }
.renewal-os .os-empty-sub { color: var(--n-5) !important; }
.renewal-os .os-empty-acts .btn { border-radius: var(--r-lg); min-height: 48px; font-weight: var(--fw-semi); }
.renewal-os .os-empty-acts .btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.renewal-os .os-empty-acts .btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }

/* ── 4. 상세 뷰 (osDetailView) ── */
.renewal-os #osMainPhotoWrap { border: 1px solid var(--sage-200); border-radius: var(--r-md); box-shadow: none; }
.renewal-os #osMainPhotoWrap .zoom-hint { background: rgba(20,22,26,0.6); color: #fff; font-size: var(--fs-micro); }
.renewal-os .os-detail-photos img { border: 1px solid var(--n-3); border-radius: var(--r-sm); }
.renewal-os .os-detail-photos img.active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-weak); }
.renewal-os #osDetailTitle { color: var(--n-8); letter-spacing: var(--ls-heading); }
.renewal-os #osDetailPrice {
  color: var(--n-8);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
}
.renewal-os .os-spec-table td { border-bottom: 1px dashed var(--n-3); }
.renewal-os .os-spec-table td:first-child { color: var(--n-5); }

/* 라이트박스 */
.renewal-os #osLightbox .lb-close { color: #fff; }
.renewal-os #osLightbox .lb-nav button { background: rgba(255,255,255,0.15); color: #fff; }
.renewal-os #osLightbox .lb-nav button:hover { background: rgba(255,255,255,0.3); }
.renewal-os #osLightbox .lb-count { color: #fff; opacity: 0.8; }

/* ── 5. 구매 박스 ── */
.renewal-os #osBuyBox h2 { color: var(--n-8); }
.renewal-os .opt-grid label,
.renewal-os #osShipBox label { border: 1px solid var(--n-3); border-radius: var(--r-md); background: var(--n-0); }
.renewal-os .opt-grid label:hover,
.renewal-os #osShipBox label:hover { border-color: var(--n-4); box-shadow: var(--sh-2); }
.renewal-os .opt-grid input:checked + span,
.renewal-os #osShipBox input:checked + span { border-color: var(--brand); background: var(--brand-weak); color: var(--brand-ink); }
.renewal-os .opt-grid input:checked + span::before,
.renewal-os #osShipBox input:checked + span::before { color: var(--brand); }

.renewal-os .notice-info { background: var(--brand-weak); border: 1px solid var(--brand-line); border-radius: var(--r-sm); color: var(--brand-ink); }
.renewal-os #osWarrantyChk:checked ~ #osWarrantyTxt { color: var(--brand-ink); }
.renewal-os .form-actions .btn { border-radius: var(--r-lg); min-height: 48px; font-weight: var(--fw-semi); }
.renewal-os .form-actions .btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.renewal-os .form-actions .btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.renewal-os .form-actions .btn:not(.primary) { background: var(--n-0); border: 1px solid var(--n-4); color: var(--n-7); }
.renewal-os .form-actions .btn:not(.primary):hover { border-color: var(--n-6); color: var(--n-8); }
.renewal-os .form-err { color: var(--danger); font-size: var(--fs-caption); }

/* ── 6. 푸터/토스트 ── */
.renewal-os .site-footer { border-top: 1px solid var(--n-3); }
.renewal-os .toast { background: var(--n-8); color: var(--n-0); border-radius: var(--r-md); }

/* ── 7. 뒤로가기 버튼 ── */
.renewal-os #osBackBtn { border-radius: var(--r-sm); background: var(--n-0); border: 1px solid var(--n-4); color: var(--n-7); }
.renewal-os #osBackBtn:hover { border-color: var(--n-6); color: var(--n-8); }