/* =====================================================
   SELLPIN Phoenix Override CSS
   Phoenix v1.14.0 Bootstrap5 브랜드 커스터마이징
   ===================================================== */

/* ----- 폰트 ---------------------------------------- */
body, .navbar, .card, .btn, input, select, textarea {
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system,
    BlinkMacSystemFont, system-ui, sans-serif !important;
}

/* ----- Phoenix CSS 변수 오버라이드 ------------------ */
:root {
  --phoenix-primary: #2563EB;
  --phoenix-primary-rgb: 37, 99, 235;
  --phoenix-primary-text-emphasis: #1D4ED8;
  --phoenix-success: #16A34A;
  --phoenix-success-rgb: 22, 163, 74;
  --phoenix-danger: #DC2626;
  --phoenix-danger-rgb: 220, 38, 38;
  --phoenix-warning: #D97706;
  --phoenix-warning-rgb: 217, 119, 6;
  --phoenix-info: #0891B2;
  --phoenix-body-bg: #F9FAFB;
  --phoenix-card-bg: #FFFFFF;
  --phoenix-border-color: #E5E7EB;
  --phoenix-body-color: #111827;
  --phoenix-secondary-color: #6B7280;
}

/* ----- GNB ----------------------------------------- */
.navbar-top {
  height: 70px;
  border-bottom: 1px solid var(--phoenix-border-color);
  background: #fff !important;
}

.sellpin-logo {
  text-decoration: none;
}

/* 로고 이미지 — GNB용 */
.navbar-top .sellpin-logo {
  padding: 10px 0;
}
.sellpin-logo .logo-img {
  height: 50px;
  width: auto;
}
.sellpin-logo:hover .logo-img { opacity: 0.75; }

/* 로고 이미지 — 어두운 배경(랜딩 네비)용: 흰색 그대로 */
.sellpin-logo .logo-img-white {
  height: 50px;
  width: auto;
}


.navbar-nav-top .nav-link {
  color: #374151 !important;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0.875rem !important;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.navbar-nav-top .nav-link:hover,
.navbar-nav-top .nav-link.active {
  color: #2563EB !important;
  background: #EFF6FF;
}

.navbar-nav-icons .nav-link {
  color: #374151 !important;
  font-size: 1rem;
  padding: 0.4rem 0.6rem !important;
}
.navbar-nav-icons .nav-link:hover { color: #2563EB !important; }

/* ----- 콘텐츠 영역 ---------------------------------- */
.content {
  padding-top: 78px;     /* GNB 70px + 여유 8px */
  min-height: calc(100vh - 70px);
  background: #F9FAFB;
}

/* ----- 카드 ---------------------------------------- */
.card { border-color: var(--phoenix-border-color); }
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.07); }

/* ----- 상품 카드 이미지 (1:1 비율) ----------------- */
.product-img-wrapper {
  position: relative;
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
  background: #F3F4F6;
  border-radius: 0; /* card 자체에 radius 적용됨 */
}
.product-img-wrapper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.card:hover .product-img-wrapper img { transform: scale(1.03); }

/* ----- 플랫폼 배지 ---------------------------------- */
.badge-platform {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 4px;
  color: #fff !important;
}
.badge-coupang   { background: #E4002B; }
.badge-naver     { background: #03C75A; }
.badge-11st      { background: #FF5A2E; }
.badge-domeggook { background: #FF6600; }
.badge-domae     { background: #4A90D9; }
.badge-rakuten    { background: #BF0000; }
.badge-aliexpress { background: #FF6A00; }
.badge-gmarket    { background: #1A73E8; }
.badge-platform-default { background: #6B7280; }

/* ----- 가격 변동 색상 ------------------------------- */
.price-down { color: #16A34A; font-weight: 600; }
.price-up   { color: #DC2626; font-weight: 600; }
.price-same { color: #9CA3AF; }

/* ----- 수익률 배지 ---------------------------------- */
.profit-high   { color: #16A34A; }
.profit-mid    { color: #2563EB; }
.profit-low    { color: #6B7280; }
.profit-loss   { color: #DC2626; }

/* ----- 트렌드 키워드 칩 ----------------------------- */
.trend-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  font-size: 0.8125rem;
  color: #374151;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}
.trend-chip:hover {
  border-color: #2563EB;
  color: #2563EB;
  background: #EFF6FF;
}

/* ----- 검색바 --------------------------------------- */
.sellpin-search-bar {
  display: flex;
  align-items: center;
  background: #fff;
  border: 2px solid #E5E7EB;
  border-radius: 12px;
  padding: 8px 20px;
  height: 56px;
  transition: border-color .2s, box-shadow .2s;
}
.sellpin-search-bar:focus-within {
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.sellpin-search-bar input {
  flex: 1; border: none; outline: none;
  font-size: 1rem; color: #374151; background: transparent;
}
.sellpin-search-bar input::placeholder { color: #9CA3AF; }

/* ----- PIN 슬라이드 패널 ---------------------------- */
.pin-slide-panel {
  position: fixed; top: 0; right: -440px;
  width: 440px; height: 100vh;
  background: #fff;
  border-left: 1px solid #E5E7EB;
  box-shadow: -4px 0 20px rgba(0,0,0,.08);
  z-index: 1050;
  transition: right .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
.pin-slide-panel.open { right: 0; }
.pin-slide-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.3); z-index: 1049;
}
.pin-slide-overlay.open { display: block; }

/* ----- 알림 드롭다운 -------------------------------- */
.noti-dropdown-menu {
  width: 340px;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  overflow: hidden;
}
.noti-item-unread { background: #EFF6FF !important; }

/* ----- 섹션 헤더 ------------------------------------ */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.section-title { font-size: 1.0625rem; font-weight: 700; color: #111827; }
.section-more  { font-size: 0.8125rem; color: #6B7280; text-decoration: none; }
.section-more:hover { color: #2563EB; }

/* ----- 빈 상태 -------------------------------------- */
.empty-state {
  text-align: center; padding: 3rem 1rem;
  color: #9CA3AF; font-size: 0.875rem;
}
.empty-state i { font-size: 2.5rem; margin-bottom: .75rem; display: block; }

/* ----- 사이트 푸터 --------------------------------- */
.sellpin-footer {
  background: #F1F5F9;
  border-top: 1px solid var(--phoenix-border-color);
  padding: 24px 0;
  margin-top: 48px;
  font-size: 12px;
  color: #6B7280;
}
.sellpin-footer-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.sellpin-footer-links a {
  color: #374151;
  text-decoration: none;
  font-size: 12px;
}
.sellpin-footer-links a:hover { color: #2563EB; }
.sellpin-footer-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  color: #6B7280;
  font-size: 12px;
  line-height: 1.8;
}
.sellpin-footer-divider {
  display: inline-block;
  width: 1px;
  height: 10px;
  background: #D1D5DB;
  margin: 0 8px;
  vertical-align: middle;
}
.sellpin-footer-copy {
  font-size: 11px;
  color: #9CA3AF;
}

/* ----- 타이포그래피 가독성 강화 -------------------- */

/* 카드 본문 텍스트 */
.card-body { font-size: 0.9375rem; }         /* 15px */
.card-text  { font-size: 0.875rem; }          /* 14px */

/* 보조·삼차 텍스트 최소 크기 */
.text-body-secondary { font-size: 0.875rem; }  /* 14px */
.text-body-tertiary  { font-size: 0.8125rem; } /* 13px */

/* small 태그 최소 크기 */
small, .small { font-size: 0.8125rem !important; } /* 13px */

/* 폼 요소 텍스트 */
.form-label    { font-size: 0.9375rem; }       /* 15px */
.form-text     { font-size: 0.8125rem; }       /* 13px */
.form-control,
.form-select   { font-size: 0.9375rem; }       /* 15px */

/* 테이블 텍스트 */
.table         { font-size: 0.875rem; }        /* 14px */
.table-sm      { font-size: 0.8125rem; }       /* 13px */

/* 배지 최소 크기 */
.badge         { font-size: 0.75rem; }         /* 12px */

/* 드롭다운 메뉴 */
.dropdown-item  { font-size: 0.875rem; }       /* 14px */
.dropdown-menu  { font-size: 0.875rem; }       /* 14px */

/* 알림 목록 */
.noti-title    { font-size: 0.9375rem !important; } /* 15px */
.noti-content  { font-size: 0.875rem  !important; } /* 14px */
.noti-time     { font-size: 0.8125rem !important; } /* 13px */

/* 빈 상태 */
.empty-state   { font-size: 0.9375rem; }       /* 15px */

/* 섹션 타이틀 */
.section-title { font-size: 1.0625rem; font-weight: 700; color: #111827; }

/* 트렌드 칩 */
.trend-chip    { font-size: 0.875rem; }        /* 14px */

/* 모달 */
.modal-body    { font-size: 0.9375rem; }       /* 15px */

/* 반응형 ---------------------------------------------- */
@media (max-width: 991px) {
  .content { padding-top: 60px; }
  .navbar-top { height: auto; min-height: 60px; }
}