/* ===== B2B 카탈로그 커스텀 스타일 ===== */
:root {
  --brand:       #1e3a5f;   /* 딥 네이비 */
  --brand-dark:  #152a47;   /* 더 짙은 네이비 */
  --brand-light: #2d5a8e;   /* 미디엄 네이비 */
  --brand-50:    #e8f0f8;   /* 아주 연한 네이비 */
  --brand-100:   #c5d9ee;   /* 연한 네이비 */
}

/* 스크롤바 커스텀 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }

/* 네비게이션 */
#nav-main { backdrop-filter: blur(10px); }

/* 카드 호버 효과 */
.product-card {
  transition: transform 0.2s, box-shadow 0.2s;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

/* 이미지 플레이스홀더 */
.img-placeholder {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 2.5rem;
}

/* 모달 애니메이션 */
.modal-overlay {
  animation: fadeIn 0.2s ease;
}
.modal-box {
  animation: slideUp 0.25s ease;
}
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes slideUp { from { transform: translateY(20px); opacity:0 } to { transform: translateY(0); opacity:1 } }

/* 토스트 */
#toast-container { z-index: 9999; }
.toast {
  animation: slideInRight 0.3s ease;
}
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* 배지 */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; font-size: 0.7rem; font-weight: 600; }

/* 상품 리스트뷰 행 */
.list-row:hover { background: #eef3f9; }

/* 로딩 스피너 */
.spinner {
  border: 3px solid #e2e8f0;
  border-top-color: var(--brand);
  border-radius: 50%;
  width: 32px; height: 32px;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* 회사소개 섹션 */
.section-hero {
  background: linear-gradient(135deg, #0f2236 0%, #1e3a5f 50%, #2d5a8e 100%);
}
.stat-card {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
}
.process-step {
  position: relative;
}
.process-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 24px;
  right: -50%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #1e3a5f, #2d5a8e);
}

/* 입력 포커스 */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(92,75,160,0.15);
}

/* 페이지네이션 */
.page-btn { min-width: 36px; }
.page-btn.active { background: var(--brand); color: #fff; }

/* 탭 */
.tab-btn { border-bottom: 2px solid transparent; }
.tab-btn.active { border-bottom-color: var(--brand); color: var(--brand); }

/* 상품 상세 */
.detail-img-thumb { cursor: pointer; transition: border-color 0.15s; }
.detail-img-thumb:hover, .detail-img-thumb.active { border-color: var(--brand); }

/* 관리자 사이드바 */
#admin-sidebar { min-height: calc(100vh - 64px); }
.sidebar-link { transition: background 0.15s; }
.sidebar-link:hover, .sidebar-link.active { background: rgba(92,75,160,0.08); color: var(--brand); }

/* 네이비 버튼 (Tailwind blue-* 대체용) */
.btn-navy {
  background-color: var(--brand);
  color: #fff;
  transition: background-color 0.15s;
}
.btn-navy:hover { background-color: var(--brand-dark); }

/* 네이비 텍스트 */
.text-navy { color: var(--brand); }
.bg-navy { background-color: var(--brand); }
.bg-navy-50 { background-color: var(--brand-50); }
.border-navy { border-color: var(--brand); }

/* ── 이미지 보호 ── */
img.no-save,
.no-save img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: auto;  /* 클릭은 허용, 드래그만 차단 */
}
/* 상세페이지 메인 이미지 영역 전체 */
#main-img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ── 라이트박스 페이드인 애니메이션 ── */
@keyframes lbFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ── 메인 히어로 슬라이더 ── */
.hero-slider-section {
  height: 320px;
}
@media (min-width: 640px) {
  .hero-slider-section {
    height: 440px;
  }
}
@media (min-width: 1024px) {
  .hero-slider-section {
    height: 540px;
  }
}