@charset "UTF-8";
/* ============================================================
   쇼핑몰 메인 "카테고리별 베스트 생활재" 섹션 (2026-08-05 신설 v1.0 / v1.1 탭 전체노출: 상위 6탭 컷 제거에 따라
   탭 줄 가로 스크롤 강화 — PC 포함 overflow-x 스크롤(스크롤바 숨김) + overscroll 체인 차단 + 스냅. 휠→가로 변환은 JSP JS.
   / v1.2 탭 끝 접근성 보정: 활성탭 자동노출 + PC 좌우 화살표(44px) + 좌우 페이드 힌트 + PC 드래그 스크롤 —
     "맨끝 카테고리를 볼 수 없다" 라이브 결함 대응.
   / v1.3 모바일 = 칩 줄바꿈 래핑(가로 스와이프 폐지, 15탭 전체 노출). PC(>=1025)는 v1.2 스크롤+화살표 유지.)
   cat_rise.css(급상승) 자매 시트 — 같은 스케일(eb 13/800, stt 24/700, 카드폭 216, radius 14,
   상품명 15.5/700 min-h40, 판매가 19/800, 할인 15/800, 원가 12.5, 담기 36min/14·800).
   급상승(확 뜨는) 바로 아래. 상단 카테고리 탭 + 선택 카테고리의 베스트 상품(초기 전량 렌더 + JS 탭전환).
   PC(>=1025) = 4열 1행 그리드(5번째+ 숨김) · 모바일 = 가로 스크롤 레일. 세로 한 섹션 고정.
   카드 규격/인증/온도 칩·metatop은 dure_card.css(.dcz 공용)에 위임 — 이 파일은 섹션 골격 + BEST 순위배지/판매줄만.
   딥그린 #3D6041 · 골드(BEST 1~3·할인) #F8A31E. 자립형(.cb-*, PC shop·모바일 rd 공용).
   ============================================================ */
.cb-sec { margin: 40px 0; }
.cb-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* 섹션 헤더(cat_rise .cr-shead 문법 통일): 아이브로 + 세리프 제목 + rule */
.cb-shead { position: relative; margin: 0 0 16px; }
.cb-shl { display: flex; flex-direction: column; gap: 4px; }
.cb-eb { font-size: 13px; font-weight: 800; letter-spacing: .04em; color: #3D6041; }
.cb-stt { font-size: 24px; font-weight: 700; color: #1F241E; letter-spacing: -.01em; line-height: 1.32; word-break: keep-all; }
.cb-stt em { font-style: normal; color: #3D6041; }
.cb-rule { height: 3px; margin-top: 12px; background: linear-gradient(90deg, #3D6041 0 50px, #EAEAEA 50px); }

/* 카테고리 탭(가로 스크롤 pill) — PC·모바일 공통 한 줄 스크롤(넘치면 스와이프/휠, 스크롤바 숨김) */
.cb-tabs {
  display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 2px 0 12px; margin: 0; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
}
.cb-tabs::-webkit-scrollbar { display: none; }
.cb-tabs .cb-tab { scroll-snap-align: start; }

/* ===== v1.2 (2026-08-05) 탭 끝 접근성 보정 =====
   결함: 탭 15개 가로 오버플로인데 끝쪽 탭에 닿을 수단이 사실상 없었다(PC 휠 변환은 발견성 0, 스크롤바 숨김).
   해결 = ① 활성 탭 자동 노출(JSP JS) ② PC 좌우 화살표 ③ 좌우 페이드 힌트 ④ PC 드래그 스크롤.
   상태 클래스는 JSP JS(cbSyncNav)가 .cb-tabwrap 에 부여: is-over(넘침) / can-l(왼쪽 여지) / can-r(오른쪽 여지). */
.cb-tabwrap { position: relative; }

/* 끝 잘림 힌트 — 스크롤 가능한 방향에만 페이드 노출(더 있다는 시각 신호) */
.cb-tabwrap::before, .cb-tabwrap::after {
  content: ""; position: absolute; top: 0; bottom: 12px; width: 40px; z-index: 1;
  pointer-events: none; opacity: 0; transition: opacity .18s;
}
.cb-tabwrap::before { left: 0; background: linear-gradient(90deg, #fff 15%, rgba(255,255,255,0)); }
.cb-tabwrap::after { right: 0; background: linear-gradient(270deg, #fff 15%, rgba(255,255,255,0)); }
.cb-tabwrap.can-l::before { opacity: 1; }
.cb-tabwrap.can-r::after { opacity: 1; }

/* 좌우 화살표 — PC 전용(모바일은 네이티브 스와이프). 44x44 터치규격, 넘칠 때만·이동 여지 있는 쪽만 노출 */
.cb-tabnav {
  display: none; position: absolute; top: 50%; transform: translateY(-50%); margin-top: -6px;
  width: 44px; height: 44px; z-index: 2; align-items: center; justify-content: center; padding: 0;
  border: 1px solid #E3E0D4; border-radius: 999px; background: #fff; color: #3D6041;
  font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px rgba(31,36,30,.14); transition: background .15s, border-color .15s;
}
.cb-tabnav-l { left: -6px; }
.cb-tabnav-r { right: -6px; }
.cb-tabnav:hover { background: #F4F7F2; border-color: #C9DCCB; }
/* 드래그 중 = 잡은 커서 + 스냅 해제(드래그가 스냅에 튕기지 않게) */
.cb-tabs.is-drag { cursor: grabbing; scroll-snap-type: none; }

/* ===== v1.3 (2026-08-05) 모바일(<=1024) = 칩 줄바꿈 래핑 =====
   사용자 확정: 모바일은 가로 스와이프 대신 15탭 전체를 줄바꿈으로 한눈에 노출.
   가로 스크롤·페이드·화살표는 모바일에서 불필요 → 전부 해제(넘침이 없어져 JS cbSyncNav 도 is-over 를 안 붙인다).
   ★ 실측(헤드리스 375px, 15탭): 칩 총폭 1543px / 한 줄 가용 335px → 자연 래핑은 6줄·탭줄 308px.
     좌우 패딩 16→10, 줄간 8→6 까지 줄인 값이며(글자 14px·터치 44px 하한은 유지) 이보다 더 줄여도 줄 수는 그대로다
     (좌우 8px·줄간 5px 에서만 5줄/254px 로 떨어지는데, 카테고리명이 주간 단위로 바뀌어 다시 6줄이 되는 경계값이라 채택하지 않음).
     360px=7줄 / 375~412px=6줄 / 430px=5줄 / 768px=3줄. "2~3줄"은 폰 폭에서 성립하지 않음 — 보고에 명시. */
@media (max-width: 1024px) {
  .cb-tabs {
    flex-wrap: wrap; row-gap: 6px; column-gap: 6px;
    overflow-x: visible; scroll-snap-type: none; overscroll-behavior-x: auto;
  }
  .cb-tabs .cb-tab { scroll-snap-align: none; }
  /* 터치 44px 규격 유지(줄바꿈이라 세로 여유 확보 가능) · 좌우 패딩만 축소해 줄 수 억제 */
  .cb-tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }
  /* 스와이프 전제 장치 해제 */
  .cb-tabwrap::before, .cb-tabwrap::after { content: none; }
  .cb-tabnav { display: none; }

  /* ===== v1.4 (2026-08-05) 모바일 = 기본 2줄 클램프 + "전체 카테고리 보기" 토글 =====
     v1.3 전체 래핑은 15탭에서 6줄(308px)까지 늘어나 상품이 첫 화면 밖으로 밀렸다.
     기본 = 2줄(44+6+44 + 위패딩2 = 96px, 3번째 줄은 패딩박스 밖으로 완전 클립) · 토글 시 전체 노출.
     상태 클래스는 JSP JS: .cb-tabwrap.has-more(넘쳐서 버튼 필요) / .is-exp(펼침). */
  /* v1.5 (2026-08-05 운영 결함 수정): 탭 선택 시 자동 접힘 제거(펼침 유지, 접기는 버튼으로만) +
     접을 때 선택된 탭 줄이 클립 안에 오도록 JS가 scrollTop 조정 → overflow-y:hidden 유지(프로그램 스크롤은 동작). */
  .cb-tabs {
    box-sizing: border-box; padding: 2px 0 0; margin: 0 0 10px;
    max-height: 96px; overflow-y: hidden; transition: max-height .22s ease;
  }
  .cb-tabwrap.is-exp .cb-tabs { max-height: 1200px; }

  /* 토글 버튼 — 넘칠 때만 노출. 44px 터치규격. 특정도(0,3,0)로 .mrdz button{background:none} 리셋 트랩 회피 */
  .cb-tabwrap.has-more .cb-tabmore {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; min-height: 44px; margin: 0 0 12px; padding: 0;
    background: #fff; border: 1px solid #E3E0D4; border-radius: 10px; color: #3D6041;
    font-size: 13.5px; font-weight: 800; line-height: 1; cursor: pointer;
  }
  .cb-tabwrap.has-more .cb-tabmore:active { background: #F4F7F2; border-color: #C9DCCB; }
  .cb-tabmore .cb-arw { font-size: 10px; transition: transform .2s; }
  .cb-tabwrap.is-exp .cb-tabmore .cb-arw { transform: rotate(180deg); }
}

/* 토글 버튼은 모바일 전용 — PC 및 미넘침 시 비노출(기본값) */
.cb-tabmore { display: none; }
.cb-tab {
  flex: 0 0 auto; border: 1px solid #E3E0D4; background: #fff; color: #5F6B56;
  font-size: 14px; font-weight: 700; padding: 8px 16px; border-radius: 999px; white-space: nowrap; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.cb-tab:hover { border-color: #C9DCCB; color: #3D6041; }
.cb-tab.on { background: #3D6041; color: #fff; border-color: #3D6041; box-shadow: 0 2px 7px rgba(47,82,51,.24); }

/* 상품 목록 : 기본(모바일/태블릿) = 가로 스크롤 레일 */
.cb-list {
  display: flex; flex-wrap: nowrap; gap: 14px; margin: 0; padding: 2px 0 6px;
  align-items: stretch; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.cb-list::-webkit-scrollbar { display: none; }
.cb-list .cb-card { flex: 0 0 216px; scroll-snap-align: start; }

/* 카드 */
.cb-card { display: flex; flex-direction: column; border: 1px solid #E4DFD2; border-radius: 14px; overflow: hidden; background: #fff; }
.cb-imw { position: relative; aspect-ratio: 1 / 1; background: linear-gradient(135deg, #eef0e7, #e0e7d5); }
.cb-ilink { display: block; width: 100%; height: 100%; }
.cb-imw img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* BEST 순위 배지(좌상) : 기본 딥그린 · 1~3위 = 골드 강조 */
.cb-badge {
  position: absolute; top: 7px; left: 7px; display: inline-flex; align-items: center; gap: 3px;
  background: linear-gradient(135deg, #3D6041, #2C4A30); color: #fff; font-size: 12px; font-weight: 800;
  padding: 3px 9px; border-radius: 8px; box-shadow: 0 2px 7px rgba(47,82,51,.35);
  font-family: "Roboto", sans-serif; letter-spacing: .02em;
}
.cb-badge.top { background: linear-gradient(135deg, #F8A31E, #E08A0A); color: #3A2408; box-shadow: 0 2px 7px rgba(220,150,30,.4); }
/* 할인율(우상, 골드) */
.cb-dc { position: absolute; top: 7px; right: 7px; background: #F8A31E; color: #3A2408; font-size: 11.5px; font-weight: 800; padding: 2px 7px; border-radius: 5px; }

.cb-bd { padding: 9px 11px 11px; display: flex; flex-direction: column; flex: 1; }
.cb-tlink { text-decoration: none; color: inherit; }
.cb-name {
  font-size: 15.5px; font-weight: 700; color: #1F241E; line-height: 1.35; margin: 3px 0 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 40px; word-break: keep-all;
}

/* 판매줄(최근 4주 N개 구매) — 급상승 상승줄 자리·스케일, 색만 딥그린 */
.cb-trend { font-size: 11.5px; color: #3D6041; font-weight: 700; margin: 3px 0 5px; }
.cb-trend b { font-weight: 800; }

/* 가격 */
.cb-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.cb-price .cb-p { color: #C9463A; font-weight: 800; font-size: 15px; }
.cb-price .cb-now { font-size: 19px; font-weight: 800; color: #1F241E; font-family: "Roboto", sans-serif; }
.cb-price .cb-won { font-size: 12.5px; font-weight: 700; color: #1F241E; margin-left: -2px; }
.cb-price .cb-old { font-size: 12.5px; color: #aab4aa; text-decoration: line-through; }

/* 담기 버튼(공통 아웃라인 딥그린) — .cb-card 스코프로 특정도(0,2,0) 확보: 모바일 메인 .mrdz button{background:none}(0,1,1) 리셋 트랩 방지 */
.cb-card .cb-addbtn {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 9px;
  background: #fff; color: #3D6041; border: 1.5px solid #3D6041; border-radius: 8px; padding: 7px 0; cursor: pointer;
  min-height: 36px; font-size: 14px; font-weight: 800; line-height: 1;
}
.cb-card .cb-addbtn:hover, .cb-card .cb-addbtn:active { background: #eaf1e8; color: #3D6041; border-color: #3D6041; }
.cb-card .cb-addbtn svg { flex: 0 0 auto; }

/* metatop(dure_card .dcz) 여백 보정 */
.cb-card .metatop { margin-bottom: 3px; min-height: 20px; }
.cb-card .specrow { margin: 2px 0 0; }

/* ===== PC(>=1025px) : 4열 1행 그리드(5번째+ 숨김) ===== */
@media (min-width: 1025px) {
  /* 탭 화살표·드래그 = PC 전용. 넘칠 때(is-over)만 노출하고, 시작점이면 왼쪽·끝이면 오른쪽을 숨긴다. */
  .cb-tabs { cursor: grab; }
  .cb-tabwrap.is-over .cb-tabnav { display: flex; }
  .cb-tabwrap.is-over:not(.can-l) .cb-tabnav-l { display: none; }
  .cb-tabwrap.is-over:not(.can-r) .cb-tabnav-r { display: none; }
  .cb-list {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; overflow: visible;
  }
  .cb-list .cb-card { flex: none; }
  .cb-list .cb-card:nth-child(n+5) { display: none; }
  .cb-stt { font-size: 26px; }
  .cb-name { font-size: 15px; }
  .cb-price .cb-now { font-size: 20px; }
}