/* ============================================================
   헬스팜 모바일 반응형 — 모든 페이지 공통
   ============================================================
   - 태블릿:  ≤ 1024px
   - 모바일:  ≤ 768px
   - 작은폰:  ≤ 480px
   ============================================================ */

/* ============================================================
   햄버거 + 드로어 — 모바일 메뉴
   ============================================================ */
.hf-burger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  margin-right: 8px;
  -webkit-tap-highlight-color: transparent;
}
.hf-burger span {
  display: block;
  width: 100%;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .25s;
  transform-origin: center;
}
.hf-burger.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hf-burger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hf-burger.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.hf-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, background .3s ease;
  backdrop-filter: blur(0);
}
.hf-backdrop.open {
  background: rgba(0,0,0,.45);
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(2px);
}

.hf-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 72%;
  max-width: 290px;
  background: #fff;
  z-index: 999;
  display: flex;
  flex-direction: column;
  transform: translateX(-105%);
  transition: transform .42s cubic-bezier(.32, .72, 0, 1);
  box-shadow: 4px 0 32px rgba(0,0,0,.18);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.hf-drawer.open {
  transform: translateX(0);
}

.hf-drawer-head {
  background: #fff;
  padding: 20px 18px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--g8);
  border-bottom: 1px solid var(--g2);
  flex-shrink: 0;
}
.hf-drawer-close {
  width: 36px; height: 36px;
  background: var(--g1);
  border: none;
  color: var(--g6);
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s;
}
.hf-drawer-close:hover, .hf-drawer-close:active { background: var(--g2) }

.hf-drawer-user {
  padding: 14px 18px;
  border-bottom: 1px solid var(--g2);
  background: var(--g1);
}

.hf-drawer-nav {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
}
.hf-d-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  text-decoration: none;
  color: var(--g7);
  border-left: 3px solid transparent;
  transition: background .2s, border-color .2s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.hf-d-item:active { background: var(--g1); }
.hf-d-item.on {
  background: var(--pp);
  border-left-color: var(--p);
}
.hf-d-item.on .hf-d-tx b { color: var(--p); }
.hf-d-ic {
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hf-d-ic svg {
  width: 20px;
  height: 20px;
  stroke: #6B7280;
  fill: none;
  stroke-width: 1.6;
}
.hf-d-item.on .hf-d-ic svg { stroke: var(--p); }
.hf-d-tx { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.hf-d-tx b { font-size: 15px; font-weight: 600; color: var(--g8); }
.hf-d-tx small { display: none; }

.hf-drawer-cta {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--g2);
  background: #fff;
  flex-shrink: 0;
}
.hf-cta-btn {
  padding: 11px;
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: transform .15s, opacity .2s;
}
.hf-cta-btn:active { transform: scale(.97); opacity: .9; }
.hf-cta-btn.ghost   { background: var(--g1); color: var(--g7); }
.hf-cta-btn.primary { background: var(--p); color: #fff; }
.hf-cta-btn.orange  { background: #fff; color: var(--p); border: 1.5px solid var(--p); }

/* 드로어 열린 상태에서 body 스크롤 잠금 */
body.hf-no-scroll { overflow: hidden !important; }

/* ============================================================
   태블릿 (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .wrap {
    grid-template-columns: 200px 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
  }
  .hd-inner {
    padding: 0 14px;
  }
  .nav .ni {
    padding: 0 10px !important;
    font-size: 12px !important;
  }
}

/* ============================================================
   모바일 (≤ 768px) — 핵심
   ============================================================ */
@media (max-width: 768px) {

  /* 본문 글자 살짝 작게 */
  body { font-size: 13px }

  /* 1열 레이아웃 — flex/grid 모두 column 으로 */
  .wrap {
    display: block !important;
    flex-direction: column !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 10px 10px !important;
    gap: 10px !important;
  }

  div[style*="grid-template-columns:240px 1fr"],
  div[style*="grid-template-columns:200px 1fr"],
  div[style*="grid-template-columns: 240px 1fr"],
  div[style*="grid-template-columns:2fr 1fr"],
  div[style*="grid-template-columns:1.6fr 1fr"],
  div[style*="grid-template-columns:1.5fr 1fr"],
  div[style*="grid-template-columns:1fr 280px"],
  div[style*="grid-template-columns:1fr 250px"],
  div[style*="grid-template-columns: 1fr 280px"],
  div[style*="grid-template-columns: 1fr 250px"] {
    display: block !important;
    grid-template-columns: 1fr !important;
    padding: 10px !important;
  }

  /* 사이드바 — 풀 너비 + sticky 해제 */
  .wrap aside.sb,
  .wrap > aside,
  aside.sb,
  aside[style*="sticky"],
  aside[style*="position:sticky"] {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px;
    flex: none !important;
  }

  /* 메인 콘텐츠 풀 너비 */
  .wrap main, .wrap .ct, main {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  /* 헤더 — 햄버거 모드 (로고 좌측 · 로그인 + 햄버거 우측) */
  .hd-inner {
    padding: 8px 12px !important;
    flex-wrap: nowrap !important;
    gap: 6px;
    align-items: center !important;
  }
  .hf-burger {
    display: flex !important;
    order: 1;          /* 좌측 끝으로 */
    margin-left: 0;
    margin-right: 4px;
    align-self: center;
  }
  .logo {
    font-size: 16px !important;
    order: 1;
    flex: 1;
    margin-right: 0 !important;
  }
  /* 기존 데스크탑 nav 숨김 (드로어 사용) */
  .nav { display: none !important; }
  .hd-right, .hd-cta {
    order: 2;
    margin-left: auto;
    gap: 4px !important;
    align-items: center !important;
  }
  /* 헤더 우측 CTA 버튼들 모바일에서는 햄버거 안에 있으니 숨김 */
  .hd-cta { display: none !important; }
  /* 모바일 헤더의 .hbtn (로그인/셀러 가입/공급사 입점/파트너센터/로그아웃) — 드로어에 다 있으므로 헤더에서 hide */
  .hd-right .hbtn,
  .hd-right form { display: none !important; }
  /* 열람 카운터 같은 hd-right 위젯은 작게 */
  .hd-right > a, .hd-right > button {
    font-size: 10px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* 히어로 — 패딩 + 폰트 줄임 */
  .hero,
  div[style*="padding:32px"] {
    padding: 18px !important;
  }
  .hero-title,
  div[style*="font-size:28px"] {
    font-size: 20px !important;
  }
  .hero-sub,
  div[style*="font-size:14px"] {
    font-size: 12px !important;
  }
  .hero-stats > div div:first-child {
    font-size: 18px !important;
  }

  /* ── v18 상품 그리드 강제 2열 (.pgrid, .pcard, .plist 등) ── */
  .pgrid, .plist, .sgrid, .qgrid,
  [class*="-grid"], [class*="-list"][class*="grid"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  /* 카드 너비 제약 풀고 텍스트 줄바꿈 강제 */
  .pcard, .scard, .qcard, .sellercard, .rank-card,
  .pcard *, .scard *, .qcard *, .sellercard *, .pgrid > * {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }
  .pcard, .scard, .qcard {
    padding: 10px !important;
    font-size: 11px !important;
  }
  /* 카드 가격·텍스트 정렬 */
  .pcard .pname, .pcard .pprice, .pcard .psupplier {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
  /* 미리보기/자세히 보기 버튼 가로 배치 */
  .pcard .pbtns, .pcard .pactions {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
  }
  .pcard .pbtns button, .pcard .pactions button,
  .pcard .pbtns a, .pcard .pactions a {
    flex: 1;
    padding: 6px !important;
    font-size: 10px !important;
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
  }

  /* inline style 그리드 (홈에서 만든 것) */
  div[style*="grid-template-columns:repeat(auto-fill,minmax(280px,1fr))"],
  div[style*="grid-template-columns:repeat(auto-fill,minmax(290px,1fr))"],
  div[style*="grid-template-columns:repeat(auto-fill,minmax(260px,1fr))"],
  div[style*="grid-template-columns:repeat(auto-fill,minmax(220px,1fr))"],
  div[style*="grid-template-columns:repeat(auto-fill,minmax(180px,1fr))"],
  div[style*="grid-template-columns:repeat(auto-fill,minmax(160px,1fr))"] {
    grid-template-columns: repeat(2,1fr) !important;
    gap: 8px !important;
  }

  /* 멤버십·KPI 그리드 — 1~2열 */
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2,1fr) !important;
    gap: 10px !important;
  }
  div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2,1fr) !important;
    gap: 8px !important;
  }
  .stat-grid {
    grid-template-columns: repeat(2,1fr) !important;
    gap: 8px !important;
  }
  .plans {
    grid-template-columns: 1fr !important;
  }
  .plancard {
    margin-bottom: 12px;
  }

  /* 테이블 — 가로 스크롤 */
  .card-body table,
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* 폼 — 100% 너비 */
  form input, form textarea, form select {
    font-size: 14px !important; /* iOS 자동 줌 방지 */
  }
  form div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* 푸터 — 1~2 컬럼 */
  footer div[style*="grid-template-columns:2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
  }
  footer div[style*="grid-template-columns:2fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* 모달 — 화면 거의 꽉 차게 */
  .modal {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 40px) !important;
    margin: 12px !important;
  }
  .ov {
    padding: 10px !important;
  }

  /* 면책 배너 — 글자 작게 */
  body > div:first-of-type[style*="background:linear-gradient(90deg,#FEF3C7"] {
    font-size: 11px !important;
    padding: 7px 12px !important;
    line-height: 1.5 !important;
  }

  /* Admin 사이드바 — 모바일 햄버거로 숨김 (이미 mob-menu-btn 있음) */
  .sidebar:not(.mob-open) {
    transform: translateX(-100%);
  }

  /* 정렬바 가로 스크롤 */
  .sortbar {
    overflow-x: auto;
    flex-wrap: nowrap !important;
  }

  /* 카테고리 칩 그리드 줄임 */
  .chips {
    gap: 4px !important;
  }
  .chip {
    font-size: 11px !important;
    padding: 4px 9px !important;
  }

  /* ─────────────────────────────────────────────
     ① 상단 헤더 정리 — 로그인만 노출, 가입 CTA는 햄버거로
     ───────────────────────────────────────────── */
  .hd-right .hbtn.solid,
  .hd-right .hbtn.hot,
  .hd-right .plan-pill,
  .hd-right > a[href*="membership"]:not(.hbtn) {
    display: none !important;
  }
  .hd-right .hbtn.ghost {
    padding: 5px 10px !important;
    font-size: 11px !important;
  }

  /* ─────────────────────────────────────────────
     ② qtags / sortbar / nav 가로 스크롤 + 우측 페이드 마스크
     ───────────────────────────────────────────── */
  /* .qtags — 가로 스크롤 + 우측 페이드 (가로 스크롤 알림용) */
  .qtags {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 24px !important;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 30px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 30px), transparent 100%);
  }
  /* .sortbar — 가로 스크롤 가능하되 마스크 없음 (우측 필터 알약 선명하게) */
  .sortbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .qtags::-webkit-scrollbar,
  .sortbar::-webkit-scrollbar { display: none; }
  .qtags > a,
  .sortbar > * {
    flex-shrink: 0 !important;
  }

  /* ─────────────────────────────────────────────
     ③ qi-menu 6개 — 모바일에서 2×3 그리드
     ───────────────────────────────────────────── */
  /* 주간 TOP 100 등 퀵 메뉴 — 모바일 hide */
  .hf-quick-card { display: none !important; }

  .qi-menu {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    padding: 0 !important;
  }
  .qi-menu .qi {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    padding: 8px 4px !important;
    border-radius: 14px !important;
    background: var(--g1, #F8F9FA) !important;
    border: none !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: -0.2px !important;
    line-height: 1.2 !important;
    word-break: keep-all !important;
    color: var(--g8) !important;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .qi-menu .qi.hot {
    background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%) !important;
    border-color: transparent !important;
    color: #9A3412 !important;
  }
  .qi-menu .qi:active {
    transform: scale(.96);
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
  }
  .qi-menu .qi-ic {
    font-size: 28px !important;
    margin-bottom: 4px !important;
    line-height: 1 !important;
  }
  .qi-menu .qi-ic svg {
    width: 26px !important;
    height: 26px !important;
  }

  /* ─────────────────────────────────────────────
     ④ 면책 배너 — 모바일에서는 숨김 (푸터/약관에서 안내)
     ───────────────────────────────────────────── */
  .hf-disclaimer { display: none !important; }

  /* ─────────────────────────────────────────────
     ⑤ 상품 필터 — 토글 버튼으로 접기 (Bottom Sheet 느낌)
     ───────────────────────────────────────────── */
  .hf-filter-card .sbhead {
    padding: 0 !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
  }
  .hf-filter-card .sbhead .hf-filter-label { display: none !important; }
  .hf-filter-card .sbhead .sbreset {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    color: var(--g6) !important;
    background: var(--g1);
    margin-left: auto;
  }
  .hf-filter-card .sbhead .sbreset:active { background: var(--g2); }
  .hf-filter-card .sbhead .sbreset .sbreset-svg { display: inline-block !important; }
  .hf-filter-card .sbhead .sbreset .sbreset-text { display: none !important; }
  .hf-filter-toggle {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--g2, #E5E7EB);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--g8, #1F2937);
    cursor: pointer;
    text-align: left;
  }
  .hf-filter-toggle .hf-filter-chev {
    margin-left: auto;
    transition: transform .25s ease;
    font-size: 10px;
    color: var(--g5, #6B7280);
  }
  .hf-filter-toggle[aria-expanded="true"] .hf-filter-chev {
    transform: rotate(180deg);
  }
  .hf-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px; height: 20px;
    padding: 0 6px;
    background: var(--p, #15803D);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
  }
  .hf-filter-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.32,.72,0,1);
  }
  .hf-filter-card.open .hf-filter-body {
    max-height: 1200px;
    margin-top: 10px;
  }
}

/* PC/태블릿에서는 토글 버튼 숨기고 라벨/필터 그대로 */
@media (min-width: 769px) {
  .hf-filter-toggle { display: none !important; }
  .hf-filter-card .hf-filter-body { max-height: none !important; overflow: visible !important; }
}

/* ============================================================
   ♡ / 공급사 아바타 / 마감 라벨 — 데스크탑+모바일 공통 (C 작업)
   ============================================================ */
/* 찜 버튼 — 회색 ♡ → 클릭 시 빨간 ♥ */
.plike {
  border: none !important;
  font-family: inherit;
  color: #6B7280 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  padding: 0 !important;
  -webkit-tap-highlight-color: transparent;
}
.plike.on {
  color: #DC2626 !important;
  animation: hfLikePop .35s ease;
}
@keyframes hfLikePop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* 마감 라벨 — neutral 변형 (회색, 마감 임박 아닐 때) */
.pmeta .al.neutral {
  color: #94A3B8 !important;
  font-weight: 600 !important;
  background: transparent !important;
  padding: 0 !important;
}

/* 공급사 행 — 아바타 + 이름 정렬 */
.pseller {
  display: flex !important;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.pseller-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  letter-spacing: 0;
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}

/* ============================================================
   🤍 헤더 — 네이버 스타일 흰 배경 + 다크 텍스트
   ============================================================ */
.hd {
  position: static !important;   /* sticky 해제 — 스크롤 시 위로 사라짐 */
  background: #fff !important;
  color: #1F2937 !important;
  border-bottom: 1px solid #EAECEF !important;
  box-shadow: none !important;
}
.hd-inner {
  height: 64px !important;
  gap: 20px;
}

/* 데스크탑 nav 텍스트 — 다크 그레이 */
.hd .nav .ni {
  color: #4B5563 !important;
}
.hd .nav .ni:hover {
  color: #1F2937 !important;
}
.hd .nav .ni .ni-sub {
  color: #9CA3AF !important;
}
.hd .nav .ni.on {
  color: var(--p, #15803D) !important;
}
.hd .nav .ni.on .ni-sub {
  color: var(--p, #15803D) !important;
  opacity: .7;
}

/* 우측 버튼들 */
.hd .hbtn {
  height: 36px;
  padding: 0 14px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
}
.hd .hbtn.ghost {
  color: #374151 !important;
  border: 1px solid #E5E7EB !important;
  background: #fff !important;
}
.hd .hbtn.ghost:hover {
  background: #F9FAFB !important;
  border-color: #D1D5DB !important;
}
.hd .hbtn.solid {
  background: var(--p, #15803D) !important;
  color: #fff !important;
  border: none !important;
}
.hd .hbtn.solid:hover {
  background: var(--pd, #166534) !important;
}
.hd .hbtn.hot {
  background: var(--o, #F97316) !important;
  color: #fff !important;
  border: none !important;
}
.hd .hbtn.hot:hover {
  background: #EA580C !important;
}

/* 햄버거 라인 — 다크로 */
.hf-burger span { background: #374151 !important; }

/* 셀러 열람 카운터 — 흰 헤더에 맞게 */
.hd .hd-right a[title*="열람 현황"] {
  background: #F0FDF4 !important;
  border: 1px solid #BBF7D0 !important;
  color: #166534 !important;
}
.hd .hd-right a[title*="열람 현황"] > span:first-child {
  color: #15803D !important;
}
.hd .hd-right a[title*="열람 현황"] > span:last-child {
  color: #166534 !important;
}
.hd .hd-right a[title*="열람 현황"] > div {
  background: rgba(22,163,74,.15) !important;
}
.hd .hd-right a[title*="열람 현황"] > div > div {
  background: #15803D !important;
}

/* 플랜 칩 */
.hd .plan-pill {
  background: #F3F4F6 !important;
  color: #374151 !important;
  border: 1px solid #E5E7EB !important;
}

/* 헤더 Sellerway 로고 — 새 로고 (4.79:1 와이드 비율) */
.hf-logo-img {
  height: 30px !important;
  width: auto;
  max-width: none;
  display: block;
  position: relative;
  top: 3px;
  background: transparent !important;
  filter: none;
  transition: opacity .15s ease;
}
.hf-logo-img:hover { opacity: .8; }
.logo { margin-right: 18px !important; }

@media (max-width: 1024px) {
  .hf-logo-img { height: 28px !important; }
  .hd-inner { height: 58px !important; }
}
@media (max-width: 768px) {
  .hf-logo-img { height: 32px !important; }
  .hd-inner {
    height: 50px !important;
    gap: 8px;
    position: relative !important;
    justify-content: space-between !important;
  }
  /* 모바일에서 로고 정중앙 (absolute) — 햄버거 좌측, 로그인 우측 */
  .hd .logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }
}
@media (max-width: 480px) {
  .hf-logo-img { height: 26px !important; }
  .hd-inner { height: 46px !important; }
}

/* 빵부스러기 — 홈에서는 PC/모바일 모두 숨김 */
.hf-bc-home { display: none !important; }

/* 흐르는 NEW 티커 — 모든 화면에서 숨김 (산만함) */
.ticker { display: none !important; }

/* ============================================================
   🔥 섹션 헤더 (네이버 스타일) — pgrid 위 큰 제목 + 부제
   ============================================================ */
.hf-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 22px 4px 14px;
  gap: 12px;
}
.hf-section-title {
  font-size: 22px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -.6px;
  line-height: 1.3;
  margin: 0;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}
.hf-section-title em {
  color: var(--p, #15803D);
  font-style: normal;
}
.hf-section-sub {
  font-size: 12.5px;
  color: #6B7280;
  margin-top: 5px;
  font-weight: 500;
}
.hf-section-count {
  font-size: 13px;
  color: #9CA3AF;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .hf-section-head {
    margin: 24px 4px 12px;
    align-items: center;
  }
  .hf-section-title { font-size: 20px; font-weight: 800; letter-spacing: -.4px; }
  .hf-section-sub { font-size: 12px; margin-top: 4px; }
  .hf-section-count { font-size: 11.5px; }
}

/* ============================================================
   📌 모바일 카테고리 탭 — 활성 시 브랜드 그린 pill (CGV 스타일)
   ============================================================ */
@media (max-width: 768px) {
  .subnav {
    align-items: center !important;
    padding: 8px 14px !important;
    gap: 4px;
  }
  .stab {
    padding: 0 14px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    border-bottom: none !important;
    border-radius: 20px !important;
    margin-bottom: 0 !important;
    color: #454545 !important;
    letter-spacing: -0.2px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: background .15s ease, color .15s ease !important;
  }
  .stab.on {
    background: var(--p, #15803D) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-bottom-color: transparent !important;
  }
}

/* ============================================================
   📌 모바일 — 트렌디 핵심 (흰 배경 + 카드/칩 보더 제거)
   ============================================================ */
@media (max-width: 768px) {
  /* 본문 배경 흰색 통일 */
  body { background: #fff !important; }

  /* 상품 카드 보더 제거 */
  .pcard,
  .pgrid:not(.list-mode) .pcard {
    border: none !important;
  }

  /* 헤더(로고 영역) 아래쪽 회색 실선 제거 */
  .hd {
    border-bottom: none !important;
  }

  /* 모바일 — 큰 채팅 fab 제거, 우측 핸들 탭으로만 채팅 열기 */
  #hf-chat-fab { display: none !important; }

  /* 정렬바 컨테이너 — 보더/배경 제거 (자연스럽게 본문에 녹음) */
  .sortbar {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  /* 정렬칩(.sbtn2) — 카테고리 탭과 동일 패턴: 비활성 회색 fill, 활성 그린 fill */
  .sbtn2 {
    border: none !important;
    background: #F3F5F7 !important;
    color: #454545 !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    padding: 7px 14px !important;
  }
  .sbtn2.on {
    background: var(--p, #15803D) !important;
    color: #fff !important;
    font-weight: 700 !important;
  }

  /* qi-menu 칩 — 보더 제거, 옅은 회색 fill (hot 칩은 옅은 오렌지 그대로) */
  .qi-menu .qi {
    border: none !important;
    background: #F8F9FA !important;
  }

  /* 필터 본문 — 카카오페이 스타일 (2열 그리드 + 둥근 보더박스) */
  .hf-filter-body .sbsec {
    padding: 18px !important;
    border-bottom: none !important;
  }
  .hf-filter-body .sbsec + .sbsec {
    border-top: 1px solid var(--g1) !important;
  }
  .hf-filter-body .sblabel {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--g8) !important;
    margin-bottom: 12px !important;
    letter-spacing: -.2px;
  }
  .hf-filter-body .chips {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .hf-filter-body .chip {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px !important;
    padding: 13px 10px !important;
    border-radius: 12px !important;
    background: #fff !important;
    border: 1.5px solid var(--g2, #E5E7EB) !important;
    color: var(--g7, #374151) !important;
    font-weight: 500 !important;
    line-height: 1.2;
    transition: all .15s ease;
  }
  .hf-filter-body .chip.on {
    background: #ECFDF5 !important;
    border-color: var(--p, #15803D) !important;
    color: var(--p, #15803D) !important;
    font-weight: 700 !important;
  }
  .qi-menu .qi.hot {
    border: none !important;
    /* background 그라데이션은 기존 룰 유지 */
  }

  /* 상품 필터 토글 — 보더 제거, 옅은 회색 fill */
  .hf-filter-toggle {
    border: none !important;
    background: #F8F9FA !important;
  }

  /* ============================================================
     📌 필터 바텀시트 — 정렬바 우측 알약 → 화면 하단에서 슬라이드 업
     ============================================================ */
  /* 정렬바 위 기존 큰 "상품 필터" 토글 영역 hide */
  .sbcard.hf-filter-card .sbhead { display: none !important; }

  /* 정렬바 우측 필터 알약 버튼 */
  .sortbar-filter-btn {
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: var(--g8) !important;
    color: #fff !important;
    padding: 8px 14px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border: none !important;
    cursor: pointer;
    font-family: inherit;
  }
  .sortbar-filter-btn:active { transform: scale(.97); }
  .sortbar-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--g8);
    font-size: 11px;
    font-weight: 800;
    padding: 0 7px;
    height: 17px;
    border-radius: 10px;
    margin-left: 2px;
  }

  /* 필터 카드 본체 → 바텀시트 변환 */
  .sbcard.hf-filter-card {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: 82vh !important;
    height: auto !important;
    border-radius: 18px 18px 0 0 !important;
    z-index: 999 !important;
    background: #fff !important;
    transform: translateY(100%) !important;
    transition: transform .35s cubic-bezier(.32, .72, 0, 1) !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,.18) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 !important;
    margin: 0 !important;
  }
  .sbcard.hf-filter-card.open {
    transform: translateY(0) !important;
  }

  /* 바텀시트 헤더 — 핸들바 + 제목 + 닫기 */
  .hf-bs-head {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 14px 18px 14px;
    z-index: 1;
    border-bottom: 1px solid var(--g2);
    touch-action: pan-y;
  }
  .hf-bs-handle {
    width: 36px;
    height: 4px;
    background: var(--g3);
    border-radius: 2px;
    margin: 0 auto 14px;
  }
  .hf-bs-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .hf-bs-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--g8);
  }
  .hf-bs-title-group {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  .hf-bs-reset {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--g7);
    background: var(--g1);
    border-radius: 14px;
    padding: 5px 11px 5px 9px;
    text-decoration: none;
    cursor: pointer;
  }
  .hf-bs-reset:active { background: var(--g2); color: var(--p); }
  .hf-bs-reset svg { flex-shrink: 0; }

  /* 바텀시트 안 검색 input — 박스형, 큼직하게 + 좌측 검색 아이콘 */
  .hf-filter-body .sbinput {
    font-size: 14px !important;
    padding: 14px 44px 14px 44px !important;
    border-radius: 12px !important;
    border: 1.5px solid var(--g2) !important;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat left 14px center !important;
    color: var(--g8) !important;
    transition: border-color .15s, background-color .15s;
  }
  .hf-filter-body .sbinput:focus {
    border-color: var(--p) !important;
    outline: none;
  }
  .hf-filter-body .sbinput::placeholder {
    color: var(--g5);
    font-size: 14px;
  }
  .hf-bs-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--g1);
    color: var(--g6);
    cursor: pointer;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
  }
  .hf-bs-close:active { background: var(--g2); }

  /* 백드롭 */
  .hf-filter-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .hf-filter-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }
}

/* 바텀시트 헤더는 모바일에서만 보임 — PC는 hide */
@media (min-width: 769px) {
  .hf-bs-head { display: none; }
  .hf-filter-backdrop { display: none; }
  .sortbar-filter-btn { display: none; }
  /* PC는 큰 채팅 fab 사용, 작은 핸들 탭은 모바일 전용 */
  #hf-chat-fab-tab { display: none !important; }
}

/* ============================================================
   📌 Sticky 카테고리 탭 (.subnav) — 스크롤 시 상단 고정
   헤더(.hd)는 position:static 이라 위로 사라지고, 카테고리바만 top:0에 착 붙음.
   가로 스크롤은 seller.css의 overflow-x:auto + 스크롤바 숨김으로 유지.
   ============================================================ */
.subnav {
  position: -webkit-sticky !important;  /* 구형 iOS Safari 폴백 */
  position: sticky !important;
  top: 0 !important;
  z-index: 100;
  background: #fff !important;
  border-bottom: 1px solid #EAECEF !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
  /* 가로 스크롤 바가 세로(페이지) 스크롤 제스처를 가로채지 않게 — 세로는 페이지로 통과 */
  touch-action: pan-x;
}

/* ============================================================
   💻 PC 헤더 정돈 (≥ 769px) — 네이버/쿠팡 수준 정렬·간격·활성 표시
   ============================================================ */
@media (min-width: 769px) {
  /* 헤더 inner — 본문 .wrap (1340px)과 정렬 통일 */
  .hd-inner {
    max-width: 1340px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    gap: 24px !important;
    align-items: center !important;
  }

  /* 로고 — 자체 마진 제거 (gap으로 통일 관리) */
  .hd .logo {
    margin-right: 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
  }

  /* ─── 데스크탑 메인 nav 정돈 ─── */
  .hd .nav {
    display: flex !important;
    align-items: stretch !important;
    gap: 2px !important;
    flex: 1 1 auto;
    height: 100%;
    min-width: 0;
  }
  .hd .nav .ni {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 0 16px !important;
    height: 100% !important;
    min-width: 0;
    font-size: 15.5px !important;
    font-weight: 800 !important;
    color: #374151 !important;
    position: relative;
    transition: color .15s ease;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -1px;
    white-space: nowrap;
  }
  .hd .nav .ni .ni-sub {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #9CA3AF !important;
    line-height: 1.2 !important;
    letter-spacing: -.2px;
  }
  .hd .nav .ni:hover {
    color: #111827 !important;
  }
  .hd .nav .ni:hover .ni-sub {
    color: #6B7280 !important;
  }
  /* 활성 메뉴 — 두꺼운 그린 underline + 굵은 텍스트 + 그린 컬러 */
  .hd .nav .ni.on {
    color: var(--p, #15803D) !important;
    border-bottom-color: var(--p, #15803D) !important;
  }
  .hd .nav .ni.on .ni-sub {
    color: var(--p, #15803D) !important;
    opacity: .85;
    font-weight: 700 !important;
  }

  /* ─── 우측 CTA 영역 정돈 ─── */
  .hd .hd-right {
    gap: 8px !important;
    flex-shrink: 0;
    align-items: center;
    margin-left: 0 !important;
  }
  .hd .hbtn {
    height: 40px !important;
    padding: 0 18px !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    letter-spacing: -.2px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .hd .hbtn.ghost {
    background: #fff !important;
    color: #1F2937 !important;
    border: 1px solid #E5E7EB !important;
  }
  .hd .hbtn.ghost:hover {
    background: #F9FAFB !important;
    border-color: #9CA3AF !important;
  }
  .hd .hbtn.solid {
    background: var(--p, #15803D) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(22,163,74,.2) !important;
  }
  .hd .hbtn.solid:hover {
    background: var(--pd, #166534) !important;
    box-shadow: 0 4px 12px rgba(22,163,74,.3) !important;
    transform: translateY(-1px);
  }
  .hd .hbtn.hot {
    background: var(--o, #F97316) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(249,115,22,.2) !important;
  }
  .hd .hbtn.hot:hover {
    background: #EA580C !important;
    box-shadow: 0 4px 12px rgba(249,115,22,.3) !important;
    transform: translateY(-1px);
  }

  /* ─── 카테고리 탭 (.subnav) PC 정돈 — 평소 좌측, sticky 활성 시 가운데 ─── */
  .subnav {
    padding-left: max(20px, calc((100% - 1340px) / 2)) !important;
    padding-right: max(20px, calc((100% - 1340px) / 2)) !important;
    height: 52px;
    align-items: center;
    justify-content: flex-start !important;   /* 평소 좌측 */
    border-bottom: 1px solid #EAECEF !important;
    transition: justify-content .2s ease, box-shadow .2s ease;
  }
  /* 스크롤되어 상단에 붙었을 때 — 가운데 정렬 + 그림자 강화 */
  .subnav.is-stuck {
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
  }
  .stab {
    padding: 0 16px !important;
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #6B7280 !important;
    border-bottom: 3px solid transparent !important;
    transition: color .18s ease, border-color .18s ease !important;
    white-space: nowrap;
    margin-bottom: -1px;
  }
  .stab:hover {
    color: #1F2937 !important;
    border-bottom-color: #D1D5DB !important;
  }
  .stab.on {
    color: var(--p, #15803D) !important;
    font-weight: 800 !important;
    border-bottom-color: var(--p, #15803D) !important;
  }

  /* 셀러 열람 카운터 — 더 작고 미니멀하게 */
  .hd .hd-right a[title*="열람 현황"] {
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
  }
  .hd .plan-pill {
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
  }
}

/* ============================================================
   💻 큰 모니터 (≥ 1440px) — 본문 .wrap이 1340px 고정이므로 헤더도 동일 유지
   ============================================================ */

/* 공급자 등급 아이콘 (👑/⭐/🌿) — 공급사명 앞에 표시 */
.pseller-tier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.12));
}
.pseller-tier.tier-premium,
.pseller-tier.tier-biz {
  font-size: 14px;
}
.pseller-tier.tier-pro {
  color: #F59E0B;
}

/* 💻 PC 전용 공급자 칩 — 카드 본문 우상단에 absolute 배치 */
.psup-chip-pc { display: none; } /* 기본 숨김 */

@media (min-width: 769px) {
  /* PC에서만 표시 */
  .pcard .pbody { position: relative; }
  .pcard .pmeta { padding-right: 110px; } /* 칩 자리 확보 */

  .psup-chip-pc {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    position: absolute;
    top: 8px;
    right: 8px;
    max-width: 130px;
    padding: 3px 9px 3px 3px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    transition: transform .15s ease, border-color .15s ease, box-shadow .18s ease;
  }
  .psup-chip-pc:hover {
    border-color: var(--p, #15803D);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(22,163,74,.12);
  }
  .psup-chip-ava {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    font-size: 11px;
    color: #fff;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
  }
  .psup-chip-tier {
    font-size: 12px;
    line-height: 1;
    margin-left: -3px;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
    flex-shrink: 0;
  }
  .psup-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -.2px;
    max-width: 78px;
  }

  /* 푸터의 큰 공급자 원 — PC GRID에서는 숨김 (본문 칩이 그 역할) */
  .pgrid:not(.list-mode) .pcard .pfprofile { display: none !important; }

  /* PC GRID — 카드 자동 채움 + hover lift */
  .pgrid:not(.list-mode) {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 14px !important;
  }
  .pgrid:not(.list-mode) .pcard {
    border-radius: 12px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .pgrid:not(.list-mode) .pcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
    border-color: var(--p, #15803D);
  }

  /* 푸터 = 미리보기 + 자세히 보기. 미리보기는 그대로, 자세히 보기 풀너비 확장 */
  .pgrid:not(.list-mode) .pcard .pfoot { display: flex !important; }
  .pgrid:not(.list-mode) .pcard .pfbtn.apply { flex: 1 !important; }

  /* ============================================================
     💻 PC LIST MODE — 검색결과형 카드 (좌:정사각 이미지 / 중:정보 / 우:액션)
     ============================================================ */
  .pgrid.list-mode {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .pgrid.list-mode .pcard {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    min-height: 220px;
  }
  .pgrid.list-mode .pcard:hover {
    border-color: var(--p, #15803D) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
    transform: none !important;
  }
  /* 좌측 — 정사각 썸네일 220×220 */
  .pgrid.list-mode .pcard-img {
    width: 220px !important;
    height: 220px !important;
    aspect-ratio: 1 !important;
    flex: 0 0 220px !important;
    border-radius: 0 !important;
  }
  .pgrid.list-mode .pcard-img .pcard-photo {
    object-fit: cover !important;
  }
  /* 본문 — 가운데 정보 영역, 풀 가로 */
  .pgrid.list-mode .pbody {
    flex: 1 1 auto !important;
    padding: 18px 22px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    position: relative;
  }
  .pgrid.list-mode .pmeta {
    padding-right: 0 !important;
    margin-bottom: 8px !important;
  }
  .pgrid.list-mode .ptitle {
    font-size: 16px !important;
    line-height: 1.4 !important;
    -webkit-line-clamp: 2 !important;
    margin-bottom: 10px !important;
    height: auto !important;
  }
  .pgrid.list-mode .ptags {
    margin-bottom: 12px !important;
  }
  .pgrid.list-mode .pprices {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 28px !important;
    margin-top: auto;
  }
  .pgrid.list-mode .pprices > div {
    text-align: left !important;
    display: flex;
    align-items: baseline;
    gap: 6px;
  }
  .pgrid.list-mode .pp-supply {
    font-size: 11px !important;
    color: var(--g5);
  }
  .pgrid.list-mode .pp-val {
    font-size: 14px !important;
  }
  .pgrid.list-mode .pp-sell {
    font-size: 18px !important;
    font-weight: 900 !important;
  }
  .pgrid.list-mode .pseller {
    font-size: 12px !important;
    margin-top: 8px !important;
  }
  /* 본문 안 PC 칩(.psup-chip-pc)은 list mode에선 숨김 (액션 영역에 표시) */
  .pgrid.list-mode .psup-chip-pc {
    display: none !important;
  }

  /* 우측 — 액션 영역 (공급자 프로필 + 자세히 보기 CTA) */
  .pgrid.list-mode .pfoot {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    flex: 0 0 200px !important;
    padding: 18px !important;
    border-top: none !important;
    border-left: 1px solid var(--g2, #E5E7EB) !important;
    background: linear-gradient(to bottom, #FAFBFC, #fff) !important;
  }
  .pgrid.list-mode .pfprofile {
    display: flex !important;
    width: 56px !important;
    height: 56px !important;
    font-size: 24px !important;
  }
  .pgrid.list-mode .pfprofile-emoji {
    font-size: 28px !important;
  }
  .pgrid.list-mode .pfprofile-tier {
    font-size: 16px !important;
    top: -6px !important;
    right: -4px !important;
  }
  .pgrid.list-mode .pfbtn:first-child {
    display: none !important;  /* 미리보기 — list mode에서 숨김 */
  }
  .pgrid.list-mode .pfbtn.apply {
    width: 100% !important;
    flex: none !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #15803D, #166534) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 8px rgba(22,163,74,.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform .15s ease, box-shadow .18s ease !important;
  }
  .pgrid.list-mode .pfbtn.apply:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(22,163,74,.35) !important;
  }
}

/* 푸터 공급자 프로필 — 큰 원형 아바타 + 등급 뱃지 */
.pfprofile {
  position: relative;
  flex: 0 0 36px;
  height: 36px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 1px 3px rgba(0,0,0,.1);
  -webkit-tap-highlight-color: transparent;
}
.pfprofile:hover { transform: scale(1.08); }
.pfprofile:active { transform: scale(.92); }
.pfprofile-emoji {
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
}
.pfprofile-tier {
  position: absolute;
  top: -4px;
  right: -2px;
  font-size: 12px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
  pointer-events: none;
}

/* 마진 인라인 칩 — "판매가 +45%" 형태로 가격 옆에 자연스럽게 */
.pmargin-inline {
  display: inline-block;
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: .2px;
  box-shadow: 0 1px 2px rgba(220,38,38,.25);
}
.pseller-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   📦 상품 카드 — 모바일 전용 컴팩트 디자인 (B 작업)
   ============================================================ */
@media (max-width: 768px) {

  /* ── ① list-mode 토글 자체를 숨김 + 항상 그리드 강제 ── */
  .view-toggle { display: none !important; }
  .pgrid.list-mode {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .pgrid.list-mode .pcard {
    flex-direction: column !important;
  }
  .pgrid.list-mode .pcard-img {
    width: 100% !important;
    aspect-ratio: 1 !important;
    flex-shrink: 1 !important;
  }

  /* ── ② 카드 컨테이너 — 그림자/라운드 강조 ── */
  .pcard {
    border-radius: 12px !important;
    border: 1px solid #F1F3F5 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
    overflow: hidden !important;
    transition: transform .18s ease !important;
  }
  .pcard:active { transform: scale(.97) !important; }
  .pcard:hover {
    transform: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
    border-color: #F1F3F5 !important;
  }

  /* ── ③ 이미지 영역 — 정사각 유지 + emoji 폰트 축소 ── */
  .pcard-img {
    aspect-ratio: 1 !important;
    font-size: 38px !important;
  }

  /* ── ④ HOT/NEW/BEST 뱃지 — 작게 ── */
  .pbadge {
    top: 6px !important; left: 6px !important;
    font-size: 9px !important;
    padding: 2px 5px !important;
    border-radius: 3px !important;
    letter-spacing: .3px;
  }

  /* ── ⑤ 찜 아이콘 — 동그라미 배경 제거, 순수 하트만 + 터치 영역 확대 ── */
  .plike {
    top: 8px !important; right: 8px !important;
    width: 36px !important; height: 36px !important;
    font-size: 24px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    color: rgba(255,255,255,.95) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.45) !important;
  }

  /* ── ⑥ 마진 칩 (구) — 마크업에서 제거됐지만 안전망으로 숨김 ── */
  .pmargin { display: none !important; }
  /* 인라인 마진 칩 — 모바일에서 약간 작게 */
  .pmargin-inline {
    font-size: 9.5px !important;
    padding: 1px 5px !important;
  }

  /* ── ⑦ 본문 패딩 — 좌우 대칭, 라인 사이 호흡 ── */
  .pbody {
    padding: 10px 10px 12px !important;
  }

  /* ── ⑧ 메타(마감 D-N + 공급방법) — 한 줄 정렬, 크게 ── */
  .pmeta {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-bottom: 6px !important;
    line-height: 1.2 !important;
    font-size: 11px !important;
    color: var(--g6) !important;
  }
  .pmeta .al {
    background: #FEE2E2 !important;
    color: #DC2626 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }
  /* 마감 임박 아닌 경우 — 회색 톤 (D-7 등 일반) */
  .pmeta .al.soft {
    background: #F1F5F9 !important;
    color: #475569 !important;
  }
  .pmeta .ptag-method {
    background: #DCFCE7 !important;
    color: #15803D !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    border: none !important;
  }

  /* ── ⑨ 상품명 — 두 줄, 줄간격 압축 ── */
  .ptitle {
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    margin-bottom: 5px !important;
    -webkit-line-clamp: 2 !important;
    font-weight: 700 !important;
    color: #1F2937 !important;
  }

  /* ── ⑩ 태그 — 첫 1개만 노출 (overflow 숨김) ── */
  .ptags {
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    margin-bottom: 6px !important;
  }
  .ptags .ptag2:nth-child(n+2) { display: none !important; }
  .ptag2 {
    font-size: 9px !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
  }

  /* ── ⑪ 가격 영역 — 세로 정렬, 공급가가 아래(메인 강조 위치) ── */
  .pprices {
    display: flex !important;
    flex-direction: column-reverse !important;
    margin-bottom: 4px !important;
  }
  .pprices > div {
    text-align: left !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
  .pprices > div + div { margin-top: 1px !important; }
  .pp-supply {
    font-size: 10px !important;
    color: #94A3B8 !important;
    flex-shrink: 0;
    min-width: 34px !important;
    text-align: left !important;
  }
  /* B2B 셀러 입장: 공급가가 메인 강조 ─ 크고 그린 */
  .pp-val {
    font-size: 16px !important;
    color: var(--p, #15803D) !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }
  /* 판매가는 보조 정보 ─ 작고 옅게 */
  .pp-sell {
    font-size: 12px !important;
    color: #94A3B8 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  /* ── ⑫ 공급사명 — 1줄 ellipsis ── */
  .pseller {
    font-size: 10px !important;
    color: #6B7280 !important;
    margin-top: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ── ⑬ 푸터 — 공급자 프로필 + 자세히 보기 CTA (모던 캡슐) ── */
  .pfoot {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px !important;
    border-top: 1px solid #F1F3F5 !important;
    background: #FAFBFC !important;
  }
  /* 자세히 보기 — 그라디언트 그린 캡슐 CTA */
  .pfbtn.apply {
    flex: 1 !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #15803D 0%, #166534 100%) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: -.3px !important;
    white-space: nowrap !important;
    border-right: none !important;
    box-shadow: 0 2px 6px rgba(22,163,74,.25) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, box-shadow .18s ease !important;
    -webkit-tap-highlight-color: transparent;
  }
  .pfbtn.apply:active {
    transform: scale(.98);
    box-shadow: 0 1px 3px rgba(22,163,74,.2) !important;
  }

  /* 모바일 카드 동선 — fadeUp 애니메이션 줄임 (부드럽게) */
  .pcard:nth-child(n) { animation-duration: .25s !important; }
}

/* ============================================================
   더 작은 폰 (≤ 380px) — 카드 정보 더 압축
   ============================================================ */
@media (max-width: 380px) {
  .pgrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .ptitle { font-size: 12px !important; }
  .pp-val  { font-size: 14px !important; }
  .pp-sell { font-size: 11px !important; }
  .pfbtn   { font-size: 10px !important; padding: 7px 3px !important; }
  /* 미리보기 버튼은 우선순위 낮음 — 작은폰에서 숨김 */
  .pfbtn:first-child { display: none !important; }
  .pfbtn.apply { width: 100% !important; }
}

/* ============================================================
   작은 폰 (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  .hd-inner {
    padding: 6px 10px !important;
  }
  .logo {
    font-size: 14px !important;
  }
  .nav .ni {
    font-size: 10px !important;
  }
  .hbtn {
    padding: 4px 8px !important;
    font-size: 10px !important;
  }
  .hero-title,
  h1 {
    font-size: 18px !important;
  }
  /* ⚠️ 작은 폰(<480px)에서도 상품 그리드는 2열 유지 — 1열은 카드가 너무 큼 */
  /* (.pgrid, .plist 등은 768px 영역의 2열 규칙 그대로 사용) */
  div[style*="grid-template-columns:repeat(auto-fill,minmax(220px,1fr))"],
  div[style*="grid-template-columns:repeat(auto-fill,minmax(180px,1fr))"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  /* 일반 2열 inline grid는 1열로 (단, 패널 안 통계는 위에서 예외 처리됨) */
  div[style*="grid-template-columns:repeat(2,1fr)"]:not([style*="min-width:240px"]) {
    grid-template-columns: 1fr !important;
  }
  /* 카드 패딩 */
  div[style*="padding:14px"], div[style*="padding:18px"] {
    padding: 12px !important;
  }
}

/* ============================================================
   🏪 SUPPLIERS / 🏆 RANKING / 💎 MEMBERSHIP / 🛒 SELLERS — 모바일 카드 (E 작업)
   ============================================================ */
@media (max-width: 768px) {

  /* ─────────────────────────────────────────────
     E-1) suppliers/index .pvcard — 가로 3분할 → 세로 column
     ───────────────────────────────────────────── */
  .pvlist {
    gap: 11px !important;
  }
  .pvcard {
    flex-direction: column !important;
    padding: 14px !important;
    gap: 12px !important;
    border-radius: 12px !important;
  }
  .pvcard:hover {
    transform: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  }
  .pvcard:active { transform: scale(.985) !important; }

  /* 좌측 헤더(아바타+이름) — column에서는 가로로 펼침 */
  .pvcard > div:first-child {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    min-width: 0 !important;
    width: 100% !important;
    text-align: left !important;
  }
  .pv-ava {
    width: 52px !important; height: 52px !important;
    font-size: 22px !important;
    border-radius: 10px !important;
  }
  .pv-crown {
    font-size: 8px !important;
    padding: 1px 4px !important;
    top: -5px !important;
  }
  .pv-info {
    min-width: 0 !important;
    flex: 1 !important;
    gap: 2px !important;
  }
  .pv-name { font-size: 14px !important; font-weight: 800 !important; }
  .pv-type, .pv-loc, .pv-access { font-size: 11px !important; }
  .pv-mgr {
    font-size: 10px !important;
    padding: 1px 6px !important;
    margin-top: 4px !important;
  }

  /* 가운데 본문 */
  .pv-body { width: 100% !important; }
  .pv-desc {
    font-size: 12px !important;
    line-height: 1.55 !important;
    padding: 10px 12px !important;
    margin-bottom: 9px !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .pv-stats {
    border-radius: 8px !important;
    margin-bottom: 9px !important;
  }
  .pvs-col { padding: 7px 4px !important; }
  .pvs-l { font-size: 9px !important; margin-bottom: 2px !important; }
  .pvs-v { font-size: 12px !important; }
  .pvs-col:nth-child(4) .pvs-v { font-size: 10px !important; }
  .pv-prods { gap: 4px !important; }
  .pvp-item {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }

  /* 우측 액션 — 가로 풀너비 */
  .pv-right {
    flex-direction: row !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
  }
  .pvbtn {
    flex: 1 !important;
    padding: 11px 10px !important;
    font-size: 12px !important;
    border-radius: 9px !important;
  }

  /* ─────────────────────────────────────────────
     E-2) ranking .rank-card — 컴팩트 + 액티브 피드백
     ───────────────────────────────────────────── */
  .rank-list { gap: 7px !important; }
  .rank-card {
    padding: 11px 12px !important;
    gap: 10px !important;
    border-radius: 10px !important;
  }
  .rank-card:hover {
    transform: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  }
  .rank-card:active { transform: scale(.985) !important; }
  .rank-num {
    font-size: 18px !important;
    width: 30px !important;
  }
  .rank-emoji {
    width: 40px !important; height: 40px !important;
    font-size: 24px !important;
  }
  .rank-name {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  .rank-meta {
    font-size: 10.5px !important;
    line-height: 1.4 !important;
  }

  /* ─────────────────────────────────────────────
     E-3) membership .plancard — 패딩/폰트 모바일 최적화
     ───────────────────────────────────────────── */
  .plans { gap: 12px !important; }
  .plancard {
    padding: 18px !important;
    border-radius: 14px !important;
    margin-bottom: 0 !important;
  }
  .plan-badge2 {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }
  .plan-num {
    font-size: 30px !important;
  }
  .plan-won, .plan-mo {
    font-size: 13px !important;
  }
  .plan-free-txt {
    font-size: 24px !important;
  }
  .plan-desc {
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
  }
  .plan-feats {
    padding-left: 0 !important;
  }
  .plan-feats li {
    font-size: 12px !important;
    line-height: 1.55 !important;
    margin-bottom: 6px !important;
  }
  .plan-btn2 {
    padding: 12px !important;
    font-size: 13px !important;
    width: 100% !important;
    border-radius: 10px !important;
  }
  .mb-point-card {
    padding: 18px !important;
    border-radius: 16px !important;
  }
  .mb-point-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .mb-point-option {
    min-height: 112px;
    padding: 17px 10px 14px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .mb-point-option:nth-child(3) {
    grid-column: 1 / -1;
    min-height: 96px;
  }
  .mb-biz-card {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
    padding: 18px !important;
    border-radius: 18px !important;
    margin-bottom: 20px !important;
  }
  .mb-biz-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.7);
    box-shadow: 0 4px 12px rgba(249,115,22,.12);
    font-size: 24px !important;
  }
  .mb-biz-body {
    min-width: 0;
  }
  .mb-biz-title {
    font-size: 15px !important;
    line-height: 1.45 !important;
    word-break: keep-all;
  }
  .mb-biz-desc {
    margin-top: 6px !important;
    font-size: 12.5px !important;
    line-height: 1.65 !important;
    word-break: keep-all;
  }
  .mb-biz-btn {
    grid-column: 1 / -1;
    width: 100% !important;
    margin-top: 4px;
    padding: 13px 16px !important;
    border-radius: 12px !important;
    text-align: center;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }

  /* ─────────────────────────────────────────────
     E-4) sellers/index .sellercard — 가로 리스트 컴팩트
     ───────────────────────────────────────────── */
  .sellercard {
    padding: 12px !important;
    gap: 11px !important;
    border-radius: 10px !important;
    flex-wrap: wrap !important;
  }
  .sellercard:hover {
    transform: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  }
  .sellercard:active { transform: scale(.985) !important; }
  .seller-rank {
    font-size: 16px !important;
    min-width: 32px !important;
  }
  .seller-ava {
    font-size: 28px !important;
  }
  .seller-info {
    min-width: 0 !important;
    flex: 1 !important;
  }
  .seller-info > * {
    font-size: 12px !important;
  }
  .seller-info > *:first-child {
    font-size: 14px !important;
    font-weight: 800 !important;
  }
}

/* ============================================================
   📋 공급사/상품 상세 패널 — 모바일 풀스크린 (A 작업)
   ============================================================ */
@media (max-width: 768px) {

  /* 패널 — 바텀시트 디자인이 이미 width:100% + transform 슬라이드 처리. 모바일에서 box-shadow만 정리 */
  .detail-panel {
    box-shadow: none !important;
  }

  /* 헤더 — 컴팩트 패딩 + 안전한 안쪽 여백 */
  .dp-header {
    padding: 11px 14px !important;
    gap: 8px;
  }
  .dp-header > div:first-child > div > div:first-child {
    font-size: 15px !important; /* 제목 살짝 키움 (모바일 가독성) */
  }
  .dp-close {
    font-size: 26px !important;
    padding: 4px 6px !important;
  }
  .dp-close {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    font-size: 22px !important;
  }

  /* ── 본문 — 가로 스크롤 차단 + 패딩 ── */
  #hf-panel-body {
    overflow-x: hidden !important;
    padding: 0 !important;
  }
  #hf-panel-body > * {
    max-width: 100% !important;
  }

  /* ── 통계 4개 카드 — 강제 2×2 (기존 1열 규칙 오버라이드) ── */
  #hf-panel-body div[style*="grid-template-columns:repeat(2,1fr)"][style*="min-width:240px"],
  #hf-panel-body div[style*="grid-template-columns:repeat(2,1fr)"][style*="min-width: 240px"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    min-width: 0 !important;
    width: 100% !important;
    gap: 7px !important;
  }
  #hf-panel-body div[style*="grid-template-columns:repeat(2,1fr)"][style*="min-width:240px"] > div,
  #hf-panel-body div[style*="grid-template-columns:repeat(2,1fr)"][style*="min-width: 240px"] > div {
    padding: 11px 8px !important;
  }
  #hf-panel-body .hstat-n {
    font-size: 16px !important;
  }
  #hf-panel-body .hstat-l {
    font-size: 10.5px !important;
  }

  /* ── 상세정보 뷰의 좌우 2열 그리드 (1fr 250px / 1fr 280px) → 1열 ── */
  #hf-panel-body div[style*="grid-template-columns:1fr 250px"],
  #hf-panel-body div[style*="grid-template-columns:1fr 280px"],
  #hf-panel-body div[style*="grid-template-columns: 1fr 250px"],
  #hf-panel-body div[style*="grid-template-columns: 1fr 280px"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── 강점 3카드 (repeat(3,1fr)) → 2열 ── */
  #hf-panel-body div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* ── 패널 내 hero 영역 (그린 그라디언트) — 패딩 줄임 ── */
  #hf-panel-body .hero {
    padding: 16px !important;
    margin-bottom: 12px !important;
  }
  #hf-panel-body .hero h1.hero-title {
    font-size: 18px !important;
  }
  /* 히어로 안의 좌측(이름·설명) + 우측(통계) 가로 정렬 → 세로 column */
  #hf-panel-body .hero > div[style*="display:flex"][style*="gap:18px"] {
    flex-direction: column !important;
    gap: 14px !important;
  }
  #hf-panel-body .hero > div > div[style*="min-width:280px"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ── 탭 nav — 모바일에서 풀너비 균등 ── */
  #hf-panel-body div[style*="border-bottom:2px solid"] > button {
    flex: 1 !important;
    padding: 10px 8px !important;
    font-size: 12px !important;
  }

  /* ── 채팅 FAB — 패널 열려있을 때 숨김 (가입 버튼 가림 방지) ── */
  body:has(.detail-panel.open) #hf-chat-fab,
  body:has(.detail-panel.open) #hf-chat-dock {
    display: none !important;
  }

  /* ── 패널 본문 내 sdp 카드 폰트 ── */
  #hf-panel-body .sdp-card,
  #hf-panel-body .sdp-block {
    padding: 12px !important;
  }
  #hf-panel-body .sdp-ii {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
  #hf-panel-body .sdp-il { font-size: 11px !important; }
  #hf-panel-body .sdp-iv { font-size: 12px !important; }

  /* ─────────────────────────────────────────────
     강점 3카드 → 가로 스크롤 칩 리스트 (B 작업)
     ───────────────────────────────────────────── */
  #hf-panel-body div[style*="grid-template-columns:repeat(3,1fr)"][style*="margin-bottom:14px"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
  }
  #hf-panel-body div[style*="grid-template-columns:repeat(3,1fr)"][style*="margin-bottom:14px"]::-webkit-scrollbar { display: none; }
  #hf-panel-body div[style*="grid-template-columns:repeat(3,1fr)"][style*="margin-bottom:14px"] > .card {
    flex: 0 0 auto !important;
    width: 130px !important;
    padding: 12px 10px !important;
    text-align: center !important;
  }

  /* ─────────────────────────────────────────────
     위탁 가능 상품 — 2열 강제 + 정사각 이미지 (홈 카드 통일성)
     ───────────────────────────────────────────── */
  #hf-panel-body div[style*="grid-template-columns:repeat(auto-fill,minmax(180px,1fr))"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  #hf-panel-body .pcard-img {
    aspect-ratio: 1 !important;
  }
  #hf-panel-body .pcard .ptitle {
    height: auto !important;
    font-size: 12.5px !important;
  }

  /* ─────────────────────────────────────────────
     우측 사이드바 첫 sdp-cta(찜·문의 액션 카드) → 모바일 숨김 (sticky CTA로 대체)
     ───────────────────────────────────────────── */
  #hf-panel-body aside .sdp-cta:first-child {
    display: none !important;
  }

  /* ─────────────────────────────────────────────
     📱 Sticky CTA 바 — 패널 하단 고정
     ───────────────────────────────────────────── */
  .hf-panel-sticky-cta {
    position: sticky;
    bottom: 0;
    left: 0; right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid #E5E7EB;
    box-shadow: 0 -4px 16px rgba(0,0,0,.06);
    margin: 14px -14px 0;  /* dp-body padding 14px 만큼 음수 마진으로 풀너비 */
  }
  .hf-sticky-icon {
    flex: 0 0 48px;
    height: 46px;
    background: #fff;
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .18s;
    -webkit-tap-highlight-color: transparent;
  }
  .hf-sticky-icon:active { transform: scale(.92); }
  .hf-sticky-icon.on {
    background: #FEE2E2;
    border-color: #FECACA;
  }
  .hf-sticky-main {
    flex: 1;
    height: 46px;
    background: linear-gradient(135deg, #15803D 0%, #166534 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(22,163,74,.25);
    font-family: inherit;
    letter-spacing: -.2px;
    -webkit-tap-highlight-color: transparent;
  }
  .hf-sticky-main:active { transform: scale(.98); }
  .hf-sticky-main.full { flex: 1 1 100%; }
  a.hf-sticky-main {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hf-sticky-info {
    flex: 1;
    text-align: center;
    font-size: 11px;
    color: #6B7280;
    padding: 12px;
  }
}

/* PC/태블릿에서는 sticky CTA 바 숨김 (우측 액션 카드 사용) */
@media (min-width: 769px) {
  .hf-panel-sticky-cta { display: none !important; }
}

/* ============================================================
   🏠 홈 — 상품 발견 최우선 재배치 (쿠팡식 패턴)
   ============================================================ */
@media (max-width: 768px) {

  /* ─────────────────────────────────────────────
     ① 빵부스러기 "🏠 홈" — 모바일에서 숨김 (의미 없음)
     ───────────────────────────────────────────── */
  .hf-bc-home {
    display: none !important;
  }

  /* ─────────────────────────────────────────────
     ② NEW 흐르는 티커 — 모바일에서 숨김 (산만함, 정보 가치 약함)
     ───────────────────────────────────────────── */
  .ticker {
    display: none !important;
  }

  /* ─────────────────────────────────────────────
     ③ 6개 qi-menu 카드 → 가로 스크롤 칩 (2x3 → 1행 가로)
     ───────────────────────────────────────────── */
  .qi-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    grid-template-columns: none !important;
    gap: 6px !important;
    padding: 4px 4px 6px !important;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
  }
  .qi-menu::-webkit-scrollbar { display: none; }
  .qi-menu .qi {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 8px 12px !important;
    min-height: 0 !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: 1px solid var(--g2, #E5E7EB) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }
  .qi-menu .qi.hot {
    background: linear-gradient(135deg, #FFF7ED, #FFEDD5) !important;
    border-color: #FED7AA !important;
    color: #9A3412 !important;
  }
  .qi-menu .qi-ic {
    font-size: 14px !important;
    margin: 0 !important;
  }

  /* qi-menu가 들어있는 sbcard 패딩 줄임 */
  .sb .sbcard:first-child {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 8px !important;
  }

  /* ─────────────────────────────────────────────
     ④ .ct (메인 콘텐츠) — 자식 순서 재정렬 (상품 위로)
     ───────────────────────────────────────────── */
  .ct {
    display: flex !important;
    flex-direction: column !important;
  }
  .ct .sortbar    { order: 1 !important; }
  .ct .pgrid,
  .ct > div:has(.pcard),
  .ct .empty      { order: 2 !important; }
  .ct .qtags      { order: 50 !important; margin-top: 16px !important; }
  .ct .hero       { order: 99 !important; margin-top: 16px !important; opacity: .92; }

  /* ⑤ Hero — 모바일에서 슬림화 (재방문자에게 노이즈 줄이기) */
  .ct .hero {
    padding: 14px !important;
  }
  .ct .hero .hero-title {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
  .ct .hero .hero-sub {
    font-size: 11px !important;
  }
  .ct .hero .hero-stats {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 12px !important;
    scrollbar-width: none;
  }
  .ct .hero .hero-stats > div {
    flex: 0 0 auto !important;
  }
  .ct .hero .hstat-n {
    font-size: 16px !important;
  }
  .ct .hero .hstat-l {
    font-size: 10px !important;
  }
  .ct .hero .hero-btns {
    display: flex !important;
    gap: 6px !important;
  }
  .ct .hero .hero-btns .hcta {
    flex: 1 !important;
    text-align: center;
    padding: 9px 6px !important;
    font-size: 12px !important;
  }

  /* ⑥ 정렬바 — 결과 개수와 정렬 한 줄 + sticky 고려 (선택) */
  .ct .sortbar {
    margin-bottom: 8px !important;
    padding: 7px 4px !important;
    background: rgba(255,255,255,.95) !important;
    backdrop-filter: blur(6px);
    border-radius: 8px !important;
  }

  /* ⑦ 빠른 검색 태그 — 작은 칩 + 위 마진 */
  .ct .qtags {
    padding: 8px 0 !important;
  }
  .ct .qtags .qtag {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }
}

/* ============================================================
   480px 미만 — 통계는 여전히 2×2 유지 (1열 무너짐 방지)
   ============================================================ */
@media (max-width: 480px) {
  #hf-panel-body div[style*="grid-template-columns:repeat(2,1fr)"][style*="min-width:240px"],
  #hf-panel-body div[style*="grid-template-columns:repeat(2,1fr)"][style*="min-width: 240px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    min-width: 0 !important;
  }
  #hf-panel-body div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   가로 모드 + 폰트 가독성
   ============================================================ */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    padding: 14px 18px !important;
  }
  .hero-title {
    font-size: 18px !important;
  }
}

/* ============================================================
   Fold/tablet desktop-site mode: keep the PC layout, but make it dense.
   Samsung Internet "desktop site" on Fold lands around 980px wide; without
   this block the product cards become oversized 2-column cards.
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .hd-inner {
    gap: 16px !important;
    padding: 0 18px !important;
  }
  .hd .nav .ni {
    padding: 0 11px !important;
    font-size: 14px !important;
  }
  .hd .hbtn {
    height: 38px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }
  .subnav {
    height: 48px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .stab {
    padding: 0 13px !important;
    font-size: 13.5px !important;
  }
  .wrap {
    gap: 14px !important;
    padding: 16px 18px 38px !important;
  }
  .sb {
    width: 180px !important;
  }
  .qi {
    gap: 8px !important;
    padding: 11px 13px !important;
    font-size: 13.5px !important;
  }
  .sbhead {
    padding: 11px 13px !important;
    font-size: 14px !important;
  }
  .sbsec {
    padding: 11px 13px !important;
  }
  .sblabel {
    font-size: 12px !important;
  }
  .chip {
    padding: 4px 9px !important;
    font-size: 12px !important;
  }
  .ct .hf-section-head {
    margin: 24px 3px 14px !important;
  }
  .ct .hf-section-title {
    font-size: 22px !important;
  }
  .hero {
    padding: 26px 28px !important;
  }
  .hero-title {
    font-size: 23px !important;
  }
  .hero-stats {
    gap: 24px !important;
  }
  .hcta {
    padding: 10px 18px !important;
  }
  .sortbar {
    padding: 10px 13px !important;
  }
  .pgrid:not(.list-mode) {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 12px !important;
  }
  .pgrid:not(.list-mode) .pbody {
    padding: 11px 12px 12px !important;
  }
  .pgrid:not(.list-mode) .ptitle {
    font-size: 13.5px !important;
  }
  .pgrid:not(.list-mode) .pp-val {
    font-size: 15px !important;
  }
  .pgrid:not(.list-mode) .pp-sell {
    font-size: 14px !important;
  }
}

/* Supplier index mobile readability pass */
@media (max-width: 768px) {
  .subnav .stab {
    min-height: 48px !important;
    padding: 0 17px !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
  }

  .subnav .stab.on {
    font-weight: 900 !important;
  }

  .sb .sbhead {
    padding: 17px 18px !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .sb .sbreset {
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  .sb .sbsec {
    padding: 15px 18px !important;
  }

  .sb .sblabel {
    margin-bottom: 10px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .sb .sbinput {
    min-height: 49px !important;
    padding: 0 14px !important;
    font-size: 16px !important;
    border-radius: 9px !important;
  }

  .sb .chips {
    gap: 8px !important;
  }

  .sb .chip {
    min-height: 34px !important;
    padding: 7px 13px !important;
    border-radius: 17px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }

  .sb > .sbcard:not(:first-child) {
    border-radius: 13px !important;
  }

  .sb > .sbcard:not(:first-child) div[style*="font-weight:800"] {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  .sb > .sbcard:not(:first-child) div[style*="font-size:11px"] {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }

  .sb > .sbcard:not(:first-child) a {
    min-height: 44px !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
  }

  .pvcard {
    padding: 16px !important;
    gap: 13px !important;
  }

  .pv-ava {
    width: 56px !important;
    height: 56px !important;
    font-size: 24px !important;
  }

  .pv-name {
    font-size: 17px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
  }

  .pv-type,
  .pv-loc,
  .pv-access {
    font-size: 13.5px !important;
    line-height: 1.35 !important;
  }

  .pv-mgr {
    font-size: 12.5px !important;
    padding: 3px 8px !important;
  }

  .pv-desc {
    font-size: 14px !important;
    line-height: 1.58 !important;
    padding: 12px 13px !important;
  }

  .pvs-l {
    font-size: 11.5px !important;
  }

  .pvs-v,
  .pvs-col:nth-child(4) .pvs-v {
    font-size: 14px !important;
  }

  .pvp-item {
    font-size: 12.5px !important;
    padding: 4px 8px !important;
  }

  .pvbtn {
    min-height: 45px !important;
    font-size: 14.5px !important;
  }
}

/* Site-wide mobile readability pass */
@media (max-width: 768px) {
  .qi-menu .qi {
    min-height: 36px !important;
    padding: 9px 13px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
  }

  .qi-menu .qi-ic {
    font-size: 15px !important;
  }

  .ct .sortbar {
    gap: 8px !important;
    padding: 10px 9px !important;
  }

  .ct .sortbar .lbl {
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  .ct .sortbar .sbtn2,
  .sbtn2 {
    min-height: 35px !important;
    padding: 7px 14px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  .ct .sortbar > span[style*="font-size:12px"] {
    font-size: 13.5px !important;
  }

  .ct .qtags .qtag,
  .qtag {
    min-height: 34px !important;
    padding: 7px 13px !important;
    font-size: 13.5px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
  }

  .ct .hf-section-title {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }

  .ct .hf-section-sub {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .pgrid:not(.list-mode) .pbody {
    padding: 12px 12px 13px !important;
  }

  .pmeta {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }

  .pmeta .al,
  .pmeta .al.soft,
  .pmeta .al.neutral,
  .pmeta .ptag-method {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .ptitle,
  .pgrid:not(.list-mode) .ptitle {
    font-size: 15px !important;
    line-height: 1.42 !important;
    font-weight: 800 !important;
  }

  .ptag2 {
    font-size: 11.5px !important;
    padding: 3px 7px !important;
  }

  .pp-supply {
    font-size: 12.5px !important;
    line-height: 1.25 !important;
  }

  .pp-val,
  .pgrid:not(.list-mode) .pp-val {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  .pp-sell,
  .pgrid:not(.list-mode) .pp-sell {
    font-size: 15.5px !important;
    line-height: 1.2 !important;
  }

  .pseller {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }

  .pseller-name {
    font-size: 12.5px !important;
  }

  .pfbtn {
    min-height: 36px !important;
    padding: 9px 6px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .rank-card {
    padding: 14px !important;
    gap: 12px !important;
  }

  .rank-name {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  .rank-meta {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  .rank-sales {
    font-size: 18px !important;
  }

  .rank-sub {
    font-size: 13px !important;
  }

  .seller-info > *,
  .seller-meta {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }

  .seller-info > *:first-child,
  .seller-name {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  .seller-sales {
    font-size: 18px !important;
  }

  .seller-sub,
  .seller-badge {
    font-size: 13px !important;
  }

  .plan-badge2 {
    font-size: 12.5px !important;
  }

  .plan-desc {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .plan-feats li {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .plan-btn2 {
    min-height: 46px !important;
    font-size: 14.5px !important;
  }

  .mb-point-option {
    min-height: 118px !important;
  }

  .mb-point-option div[style*="font-size:11px"] {
    font-size: 13px !important;
  }

  .mb-biz-title {
    font-size: 16px !important;
  }

  .mb-biz-desc {
    font-size: 14px !important;
  }

  .mb-biz-btn {
    min-height: 46px !important;
    font-size: 14.5px !important;
  }

  .card-head,
  .form-sec-title {
    font-size: 16px !important;
  }

  .form-label {
    font-size: 14px !important;
  }

  .form-input,
  .form-select,
  .form-textarea {
    min-height: 45px !important;
    font-size: 16px !important;
  }

  .form-btn {
    min-height: 46px !important;
    font-size: 14.5px !important;
  }

  .hf-footer-legal {
    font-size: 12px !important;
    line-height: 1.7 !important;
  }

  .hf-footer-legal a {
    font-size: 12px !important;
  }
}

@media (max-width: 380px) {
  .ptitle {
    font-size: 14.5px !important;
  }

  .pp-val,
  .pgrid:not(.list-mode) .pp-val {
    font-size: 15.5px !important;
  }

  .pp-sell,
  .pgrid:not(.list-mode) .pp-sell {
    font-size: 15px !important;
  }

  .pfbtn {
    font-size: 12.5px !important;
  }
}

/* Sellers index mobile card restructure */
@media (max-width: 768px) {
  .sellerlist {
    gap: 10px !important;
  }

  .seller-profile-card {
    display: grid !important;
    grid-template-columns: 32px 56px minmax(0, 1fr) !important;
    grid-template-areas:
      "rank avatar info"
      "stats stats stats" !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 15px !important;
    border-radius: 15px !important;
    border-color: var(--g2) !important;
    box-shadow: 0 3px 14px rgba(15, 23, 42, .035) !important;
    background: #fff !important;
  }

  .seller-profile-card .seller-rank {
    grid-area: rank !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    color: var(--g5) !important;
  }

  .seller-profile-card .seller-rank.t1,
  .seller-profile-card .seller-rank.t2,
  .seller-profile-card .seller-rank.t3 {
    color: #D97706 !important;
  }

  .seller-profile-card .seller-ava {
    grid-area: avatar !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(26,122,74,.12) !important;
    background: linear-gradient(145deg, #F0FAF4, #FFFFFF) !important;
    box-shadow: inset 0 0 0 5px rgba(26,122,74,.035) !important;
    font-size: 28px !important;
  }

  .seller-profile-card .seller-info {
    grid-area: info !important;
    min-width: 0 !important;
  }

  .seller-profile-card .seller-headline {
    gap: 5px !important;
    margin-bottom: 5px !important;
  }

  .seller-profile-card .seller-name {
    flex: 1 1 100% !important;
    font-size: 16px !important;
    line-height: 1.22 !important;
    color: var(--g8) !important;
  }

  .seller-profile-card .seller-plan-chip,
  .seller-profile-card .seller-verify-chip,
  .seller-profile-card .seller-tag-chip {
    min-height: 24px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
  }

  .seller-profile-card .seller-meta {
    display: grid !important;
    gap: 3px !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
    color: var(--g6) !important;
  }

  .seller-profile-card .seller-meta span[style*="color:var(--g3)"] {
    display: none !important;
  }

  .seller-profile-card .seller-tagline {
    margin-top: 7px !important;
    gap: 5px !important;
  }

  .seller-profile-card .seller-right {
    grid-area: stats !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--g2) !important;
    text-align: left !important;
  }

  .seller-profile-card .seller-rating,
  .seller-profile-card .seller-sub,
  .seller-profile-card .seller-sales {
    margin: 0 !important;
  }

  .seller-profile-card .seller-rating {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .seller-profile-card .seller-rating span {
    display: inline !important;
    margin-top: 0 !important;
    font-size: 12px !important;
  }

  .seller-profile-card .seller-sub {
    flex: 0 0 auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--g5) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  .seller-profile-card .seller-sales {
    flex: 0 0 auto !important;
    margin-left: -6px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--p) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
  }

  .ct > div[style*="var(--yl)"] {
    padding: 12px 14px !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    border-radius: 12px !important;
  }
}