@charset "UTF-8";
/* ============================================================
   쇼핑몰 메인 "카테고리별 이번 주 급상승 생활재" 섹션 (2026-07-25 신설 v1.0 / v1.1 통일스케일: eb 13/800 .1em, stt 24/700, 카드폭 216, radius 14, 상품명 15.5/700 min-h40, 판매가 19/800, 할인 15/800, 원가 12.5, 담기 44min/14·800)
   후기 다음 · 기획전 앞. 상단 카테고리 탭 + 선택 카테고리의 급상승 상품(초기 전량 렌더 + JS 탭전환).
   PC(>=1025) = 4열 1행 그리드(5번째+ 숨김) · 모바일 = 가로 스크롤 레일. 세로 한 섹션 고정.
   카드 규격/인증/온도 칩·metatop은 dure_card.css(.dcz 공용)에 위임 — 이 파일은 섹션 골격 + 급상승 배지/상승줄만.
   딥그린 #3D6041 · 주황(급상승) #E0562F~#C33D1E · 골드(할인) #F8A31E. 자립형(.cr-*, PC shop·모바일 rd 공용).
   ============================================================ */
.cr-sec { margin: 40px 0; }
.cr-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

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

/* 카테고리 탭(가로 스크롤 pill) */
.cr-tabs { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 0 12px; margin: 0; }
.cr-tabs::-webkit-scrollbar { display: none; }
.cr-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;
}
.cr-tab:hover { border-color: #C9DCCB; color: #3D6041; }
.cr-tab.on { background: #3D6041; color: #fff; border-color: #3D6041; box-shadow: 0 2px 7px rgba(47,82,51,.24); }

/* 상품 목록 : 기본(모바일/태블릿) = 가로 스크롤 레일 */
.cr-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;
}
.cr-list::-webkit-scrollbar { display: none; }
.cr-list .cr-card { flex: 0 0 216px; scroll-snap-align: start; }

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

/* 급상승 배지(좌상) : 주황 ▲N% / newRise = 딥그린 "NEW 급등" */
.cr-badge {
  position: absolute; top: 7px; left: 7px; display: inline-flex; align-items: center; gap: 3px;
  background: linear-gradient(135deg, #E0562F, #C33D1E); color: #fff; font-size: 12px; font-weight: 800;
  padding: 3px 9px 3px 7px; border-radius: 8px; box-shadow: 0 2px 7px rgba(210,60,30,.35);
}
.cr-badge.new { background: linear-gradient(135deg, #3D6041, #2C4A30); box-shadow: 0 2px 7px rgba(47,82,51,.35); }
/* 할인율(우상, 골드) */
.cr-dc { position: absolute; top: 7px; right: 7px; background: #F8A31E; color: #3A2408; font-size: 11.5px; font-weight: 800; padding: 2px 7px; border-radius: 5px; }

.cr-bd { padding: 9px 11px 11px; display: flex; flex-direction: column; flex: 1; }
.cr-tlink { text-decoration: none; color: inherit; }
.cr-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;
}

/* 상승줄(지난주 N개 → 이번주 M개) */
.cr-trend { font-size: 11.5px; color: #C33D1E; font-weight: 700; margin: 3px 0 5px; }
.cr-trend b { font-weight: 800; }

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

/* 담기 버튼(딥그린 풀폭) — .cr-card 스코프로 특정도(0,2,0) 확보: 모바일 메인 .mrdz button{background:none}(0,1,1) 리셋 트랩 방지 */
.cr-card .cr-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;
}
.cr-card .cr-addbtn:hover, .cr-card .cr-addbtn:active { background: #eaf1e8; color: #3D6041; border-color: #3D6041; }
.cr-card .cr-addbtn svg { flex: 0 0 auto; }

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

/* ===== PC(>=1025px) : 4열 1행 그리드(5번째+ 숨김) ===== */
@media (min-width: 1025px) {
  .cr-list {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; overflow: visible;
  }
  .cr-list .cr-card { flex: none; }
  .cr-list .cr-card:nth-child(n+5) { display: none; }
  .cr-stt { font-size: 26px; }
  .cr-name { font-size: 15px; }
  .cr-price .cr-now { font-size: 20px; }
}