@charset "UTF-8";
/* ============================================================
   메인 "신규생활재" 섹션 재디자인 (2026-07-12)
   요청: 제목·썸네일 노출·더보기 버튼 재디자인(다른 쇼핑몰 신상품 섹션 관례 반영).
   원칙: style_v2(분기파일)·product_type1 전역 무수정 → 이 섹션에만 스코프(.main_section5.ngv2).
   토큰: 딥그린 #3D6041 · 주황 #F8A31E(배지만·흰글자 금지). NEW 배지=딥그린. v1.0
   ============================================================ */

/* ── 제목: 중앙 큰제목 → 좌측정렬 + 딥그린 accent bar + NEW 이모 ── */
.main_section5.ngv2 .title_wrap {
  text-align: left; position: relative; margin-bottom: 24px; padding-left: 16px;
}
.main_section5.ngv2 .title_wrap::before {
  content: ''; position: absolute; left: 0; top: 3px; bottom: 8px; width: 5px;
  border-radius: 3px; background: #3D6041;
}
.main_section5.ngv2 .title_wrap .b_tt {
  font-size: 27px; font-weight: 800; color: #1F241E; letter-spacing: -.03em; line-height: 1.2;
}
.main_section5.ngv2 .title_wrap .b_tt::after {
  content: 'NEW'; display: inline-block; margin-left: 10px; vertical-align: 3px;
  font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .05em;
  color: #fff; background: #3D6041; padding: 3px 9px; border-radius: 6px;
}
.main_section5.ngv2 .title_wrap .txt {
  margin-top: 8px; font-size: 16px; color: #5F6B5A; font-weight: 500; letter-spacing: -.01em;
}

/* ── 썸네일: 사각 1px 테두리 → 라운드 카드 + 호버 줌 + NEW 배지 ── */
.main_section5.ngv2 .product_type1 .img_wrap {
  border: 1px solid #EAEAEA; border-radius: 14px; overflow: hidden; background: #f7f7f4;
}
.main_section5.ngv2 .product_type1 .img_wrap img {
  border: none; transition: transform .45s ease;
}
.main_section5.ngv2 .product_type1 li:hover .img_wrap img { transform: scale(1.05); }

/* NEW 배지(품절 제외) — 우상단 알약. 2026-07-20: 입점 경과주차 자동판정(A안)으로 동적 텍스트/색상 전환.
   1~4주=진한 빨강(#e03131), 5~8주=톤다운(회빨강 #b96a6a) — 신선도 신호. new_goods_v2.css v1.1 */
.main_section5.ngv2 .product_type1 li:not(.soldout) .img_wrap .new-badge {
  position: absolute; top: 0; right: 0; z-index: 2;
  font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: #e03131; padding: 5px 11px; border-radius: 0 14px 0 12px;
}
.main_section5.ngv2 .product_type1 li:not(.soldout) .img_wrap .new-badge.wk58 { background: #b96a6a; }
.main_section5.ngv2 .product_type1 li.soldout .img_wrap .new-badge { display: none; }

/* 할인% 배지: 큰 사각 → 작은 라운드(다른 몰 관례) */
.main_section5.ngv2 .product_type1 .img_wrap .tag .bg_y,
.main_section5.ngv2 .product_type1 .img_wrap .tag .bg_g,
.main_section5.ngv2 .product_type1 .img_wrap .tag .bg_c {
  width: auto; min-width: 0; height: 27px; line-height: 27px; padding: 0 11px;
  font-size: 15px; font-weight: 700; border-radius: 0 0 12px 0; font-family: 'Roboto', sans-serif;
}
.main_section5.ngv2 .product_type1 .img_wrap .tag .bg_g,
.main_section5.ngv2 .product_type1 .img_wrap .tag .bg_c { font-size: 14px; }

/* ── 카드 텍스트 미세 정리 ── */
.main_section5.ngv2 .product_type1 .txt_box { margin-top: 12px; }
.main_section5.ngv2 .product_type1 .gcard-farmer {
  display: block; font-size: 13px; color: #3D6041; font-weight: 600; margin-bottom: 3px; letter-spacing: -.01em;
}
.main_section5.ngv2 .product_type1 .txt_box .title {
  font-size: 17px; line-height: 1.4; font-weight: 500; letter-spacing: -.01em;
}

/* ── 더보기: 회색 버튼 → 딥그린 아웃라인 알약 + 화살표 ── */
.main_section5.ngv2 .btn_more {
  display: block; width: -webkit-fit-content; width: fit-content; margin: 28px auto 0;
  height: auto; line-height: 1.2; /* 2026-07-16 QA L: 구 style_v2 .main_section5 .btn_more{height:53px} 상속 차단 — 텍스트 위 몰림·빈 알약처럼 보이는 문제 */
  padding: 13px 32px; border: 1.5px solid #3D6041; border-radius: 999px;
  color: #3D6041; font-size: 16px; font-weight: 700; line-height: 1.2; background: #fff; text-align: center;
  transition: background .15s ease, color .15s ease;
}
.main_section5.ngv2 .btn_more::after {
  content: '\203A'; margin-left: 8px; font-size: 20px; font-weight: 400; vertical-align: -1px;
}
.main_section5.ngv2 .btn_more:hover { background: #3D6041; color: #fff; }

/* ── 반응형(태블릿/모바일에서도 제목·더보기 일관) ── */
@media (max-width: 720px) {
  .main_section5.ngv2 .title_wrap .b_tt { font-size: 22px; }
  .main_section5.ngv2 .title_wrap .txt { font-size: 14px; }
  .main_section5.ngv2 .product_type1 .img_wrap { border-radius: 12px; }
  .main_section5.ngv2 .product_type1 li:not(.soldout) .img_wrap::after { font-size: 11px; padding: 4px 9px; }
  .main_section5.ngv2 .btn_more { width: 100%; padding: 13px 0; }
}