@charset "UTF-8";
/* ============================================================================
   gnbp_flat4.css v1.0.4 (2026-09-03) — GNB 3개 페이지(두레추천/더큰혜택/신규생활재) PC 4단 오아시스 조판
   ----------------------------------------------------------------------------
   팀장 지시 3건:
     ① "개발기 두레추천 메인의 베스트 생활재처럼 4단 상품노출, 상단에 인기생활재 4단노출"
     ② "개발기 더큰혜택 - 메인 오아시스 스타일로 4단 상품노출"
     ③ "신규생활재 4단 노출 오아시스 스타일"
   ----------------------------------------------------------------------------
   문법의 원본 = 메인 "카테고리별 베스트 생활재"(.cb-sec) + main_card_flat.css v1.0.0(09-03 메인 5섹션 플랫화).
     · 카드 아웃박스 없음(테두리·흰바탕·라운드·그림자 0), hover 들림 없음
     · 사진만 8px 라운드 정사각(1:1)
     · 담기 = 사진 우하단 44px 흰 원형 카트 아이콘(마크업·onclick 무접촉, CSS 위치만)
     · 글은 사진 좌측선에 맞춰 맨바닥(좌우 패딩 2px 시각보정)
     · 섹션 제목 = 왼쪽 정렬 26px/700 Pretendard #1f241e + 제목 아래 전폭 1px #1d271e 선 + 24px 여백
       (아이브로우는 제목 옆 캡션으로 흡수, 짧은 초록 밑줄 .cb-rule 은 숨김)
     · 4열 그리드 = 1160 콘텐츠 열 / 카드폭 275 / gap 20 / 행간 36
   ----------------------------------------------------------------------------
   ⚠ 스코프 = .gnbp_recom / .gnbp_benefit / .gnbp_new 3개 페이지 전용.
     같은 .gnbp .pgrid 문법을 쓰는 카테고리 목록(.product_list_wrap .gnbp.gcardz)에는 이 파일이 로드되지 않는다.
   ⚠ 장단콩 두유 히어로(.bnc_sec / .pgrid.bnc_grid, 09-03 운영 반영분) = 전 규칙에서 :not() 으로 제외(무접촉).
   ⚠ PC 전용 — 전 규칙을 @media (min-width:1024px) 안에 둔다. 모바일 JSP/CSS 무접촉.
   ⚠ 기존 시트(gnb_page.css · cat_best.css · dure_card.css) 무수정. 이 파일이 뒤에 로드돼 덮는다.
   롤백 = 각 페이지 JSP 의 이 파일 link 1줄 제거.
   ============================================================================ */

@media (min-width:1024px){

/* ===== 0) 바탕 = 순백 ===== */
.gnbp_recom, .gnbp_benefit, .gnbp_new{ background:#fff; }

/* ===== 1) 섹션 제목 — 오아시스 규칙(좌측정렬 26/700 + 전폭 1px 선) ===== */
.gnbp .gnbp_sec:not(.bnc_sec) .stitle{
	display:flex; flex-wrap:wrap; align-items:baseline; gap:0 12px;
	margin:0 0 24px; padding:0 0 12px; border-bottom:1px solid #1d271e;
}
.gnbp .gnbp_sec:not(.bnc_sec) .stitle h3{
	font-family:'Pretendard','Noto Sans KR',sans-serif;
	font-size:26px; font-weight:700; color:#1f241e; letter-spacing:-.01em; line-height:1.3; padding-left:0;
}
/* 제목 왼쪽 4px 초록 막대 장식 제거 */
.gnbp .gnbp_sec:not(.bnc_sec) .stitle h3::before{ display:none; }
.gnbp .gnbp_sec:not(.bnc_sec) .stitle .scap{ font-size:14px; font-weight:500; color:#6c7268; }
/* 우측 부착물(반짝혜택 남은시간 등)은 같은 줄 오른쪽 끝 */
.gnbp .gnbp_sec:not(.bnc_sec) .stitle .bf_timer{ margin-left:auto; }

/* ===== 2) 4열 그리드 (1160 = 275×4 + 20×3) ===== */
.gnbp .pgrid:not(.bnc_grid){ gap:36px 20px; }
.gnbp_recom.rc2 .rc_grid{ gap:36px 20px; }

/* ===== 3) 플랫 카드 — 아웃박스 제거, 사진만 8px 라운드 ===== */
.gnbp .pgrid:not(.bnc_grid) > li{
	position:relative; background:transparent; border:0; border-radius:0; box-shadow:none; overflow:visible;
}
.gnbp .pgrid:not(.bnc_grid) > li:hover{ box-shadow:none; transform:none; }
.gnbp .pgrid:not(.bnc_grid) > li .pcimg{ border-radius:8px; overflow:hidden; background:#f5f3ec; }
/* 글은 사진 좌측선 기준 맨바닥(2px 시각보정) */
.gnbp .pgrid:not(.bnc_grid) > li .pcbody{ padding:10px 2px 6px; }
.gnbp_recom.rc2 .rc_card .pcbody{ padding:10px 2px 6px; }

/* ===== 4) 담기 = 사진 우하단 44px 흰 원형 아이콘 =====
   위치 = top:0 + margin-top:calc(100% - 52px).
   퍼센트 마진은 "컨테이닝 블록 폭" 기준이라, 사진이 1:1 정사각이면 사진 높이 = li 폭 = 100%.
   → 열 수가 바뀌어도 늘 사진 하단 8px 안쪽에 붙는다(vw 하드코딩 불필요).
   예약(.res)·택배예약(.gift)·품절(.soldout) 은 문구형 유지(사유·행동을 읽어야 하는 버튼). */
.gnbp .pgrid:not(.bnc_grid) > li > .pc_cart:not(.res):not(.gift):not(.soldout){
	position:absolute; top:0; right:8px; margin:calc(100% - 52px) 0 0; z-index:6;
	width:44px; min-width:44px; height:44px; min-height:44px; padding:0; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	font-size:0; line-height:0; color:transparent; overflow:hidden;
	border:1px solid rgba(47,75,51,.10); box-shadow:0 2px 8px rgba(31,40,30,.18);
	background-color:#fff;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d6041' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.1 11.2a1.6 1.6 0 0 0 1.6 1.3h8.5a1.6 1.6 0 0 0 1.6-1.3L21 8H6'/%3E%3Ccircle cx='9.6' cy='20' r='1.4'/%3E%3Ccircle cx='17.6' cy='20' r='1.4'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:center; background-size:21px 21px;
	transition:background-color .15s;
}
.gnbp .pgrid:not(.bnc_grid) > li > .pc_cart:not(.res):not(.gift):not(.soldout):hover,
.gnbp .pgrid:not(.bnc_grid) > li > .pc_cart:not(.res):not(.gift):not(.soldout):active{
	background-color:#eaf1e8; border-color:rgba(47,75,51,.10); color:transparent;
}
/* 문구형(예약·택배예약·품절)은 카드 맨바닥 정렬로만 보정 */
.gnbp .pgrid:not(.bnc_grid) > li > .pc_cart.res,
.gnbp .pgrid:not(.bnc_grid) > li > .pc_cart.gift,
.gnbp .pgrid:not(.bnc_grid) > li > .pc_cart.soldout{ margin:8px 2px 0; border-radius:8px; }

/* 담기가 흐름에서 빠졌으므로 본문 아래 여백만 남긴다 */
.gnbp .pgrid:not(.bnc_grid) > li .pcbody{ padding-bottom:2px; }

/* 한정수량 배지 = 우상단(담기 아이콘이 우하단을 쓰므로). ⚠ left/right 를 둘 다 주면 배지가 전폭으로 늘어난다 → left:auto 필수 */
.gnbp .pgrid:not(.bnc_grid) > li .badge_limit{ left:auto; right:8px; top:8px; bottom:auto; }
/* 반짝혜택 타이머 배지(더큰혜택) = 사진 좌하단 유지, 라운드 안쪽 8px */
.gnbp .pgrid:not(.bnc_grid) > li .pc_timer{ left:8px; bottom:8px; right:auto; top:auto; }

/* ===== 5) 두레추천 — 3열 → 4열, 추천문구 상자 평문화 ===== */
.gnbp_recom.rc2 .rc_card .pc_nm{ font-size:16.5px; margin-bottom:6px; }
/* 초록 인용상자(크림/연초록 배경 박스) → 배경·테두리 제거, 인용부호만 남긴 평문 */
.gnbp_recom.rc2 .rc_say{ background:none; border:0; border-radius:0; padding:2px 0 0 15px; margin:0 0 8px; }
.gnbp_recom.rc2 .rc_say::before{ left:0; top:-2px; font-size:22px; color:#b9ccba; }
.gnbp_recom.rc2 .rc_d1{ font-size:14px; font-weight:500; color:#4f554b; line-height:1.55; }
/* "이번 주 N개 담았어요" 리본 = 사진 좌하단 유지(라운드 안쪽 8px) */
.gnbp_recom.rc2 .rc_pick{ left:8px; bottom:8px; border-radius:8px; }

/* ===== 6) 두레추천 상단 "인기 생활재" — 6열 1줄 → 4열 2줄(8개) =====
   데이터 = /prod/ajaxCatBest.do (mainCatBestComm 과 동일 API·20분 서버캐시, 신규 서버코드 0).
   렌더는 include/comm/recomBestOneComm.jsp 가 이미 8개를 내려주고 있었고(rb1ListHtml slice(0,8)),
   CSS 가 6번째부터 잘라 1줄만 보여주던 것 → 컷을 8개(4열 2줄)로 옮긴다. JSP 무수정. */
.gnbp_recom .rcb1.on{ margin:30px auto 6px; }
.gnbp_recom .rcb1_head{
	display:flex; flex-wrap:wrap; align-items:baseline; gap:0 12px;
	margin:0 0 24px; padding:0 0 12px; border-bottom:1px solid #1d271e;
}
.gnbp_recom .rcb1_htx{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 12px; }
/* 아이브로우(위쪽 작은 글씨) → 제목 옆 캡션으로 흡수 */
.gnbp_recom .rcb1_eb{ order:2; display:inline; margin:0; font-size:14px; font-weight:500; color:#6c7268; letter-spacing:0; }
.gnbp_recom .rcb1_tt{ order:1; font-family:'Pretendard','Noto Sans KR',sans-serif; font-size:26px; font-weight:700; color:#1f241e; line-height:1.3; }
.gnbp_recom .rcb1_tt em{ color:#1f241e; }
.gnbp_recom .rcb1_chips{ padding:0 0 20px; }
.gnbp_recom .rcb1_rail{ grid-template-columns:repeat(4,1fr); gap:36px 20px; overflow:visible; }
.gnbp_recom .rcb1_card:nth-child(n+7){ display:block; }   /* 6개 컷 해제 */
.gnbp_recom .rcb1_card:nth-child(n+9){ display:none; }    /* 4열 × 2줄 = 8개 */
.gnbp_recom .rcb1_card{ background:transparent; border:0; border-radius:0; overflow:visible; }
.gnbp_recom .rcb1_imw{ border-radius:8px; overflow:hidden; background:#f5f3ec; }
.gnbp_recom .rcb1_ilink{ border-radius:8px; }
.gnbp_recom .rcb1_bd{ padding:10px 2px 6px; }
.gnbp_recom .rcb1_name{ font-size:15.5px; font-weight:700; color:#1f241e; line-height:1.34; height:auto; min-height:42px; }
.gnbp_recom .rcb1_now{ font-size:20px; }
.gnbp_recom .rcb1_won{ font-size:13.5px; }
.gnbp_recom .rcb1_add{ right:8px; }

/* ===== 7) 두레추천 하단 "카테고리별 베스트" — 가운데정렬 헤더 → 오아시스 헤더 ===== */
.gnbp_recom .rcbest_sec{ border-top:0; padding-top:34px; }
.gnbp_recom .rcbest_head{
	display:flex; flex-wrap:wrap; align-items:baseline; gap:0 12px; text-align:left;
	margin:0 0 24px; padding:0 0 12px; border-bottom:1px solid #1d271e;
}
.gnbp_recom .rcbest_head h2{ font-family:'Pretendard','Noto Sans KR',sans-serif; font-size:26px; font-weight:700; color:#1f241e; line-height:1.3; }
.gnbp_recom .rcbest_sub{ margin:0; font-size:14px; font-weight:500; color:#6c7268; }
.gnbp_recom .rcbest_tabs{ justify-content:flex-start; padding:0 0 20px; }
.gnbp_recom .rcbest_rank{ top:8px; right:8px; }

/* ===== 8) 더큰혜택 — 메인 "카테고리별 베스트"(mainCatBestComm/.cb-sec) 플랫화 =====
   cat_best.css 원본 무수정(메인·다른 화면 무영향). 이 페이지 스코프에서만 main_card_flat.css 와 같은 값으로 덮는다. */
.gnbp_benefit .cb-sec{ margin:40px 0 0; }
.gnbp_benefit .cb-shead{ margin:0 0 24px; padding:0 0 12px; border-bottom:1px solid #1d271e; }
.gnbp_benefit .cb-shl{ flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:0 12px; }
.gnbp_benefit .cb-eb{ order:2; font-size:14px; font-weight:500; color:#6c7268; letter-spacing:0; }
.gnbp_benefit .cb-stt{ order:1; font-family:'Pretendard','Noto Sans KR',sans-serif; font-size:26px; font-weight:700; color:#1f241e; line-height:1.3; }
.gnbp_benefit .cb-stt em{ color:#1f241e; }
/* 짧은 초록 밑줄 장식 → 제목 아래 전폭 1px 선으로 대체 */
.gnbp_benefit .cb-rule{ display:none; }
.gnbp_benefit .cb-tabs{ padding:0 0 20px; }
.gnbp_benefit .cb-list{ grid-template-columns:repeat(4,1fr); gap:36px 20px; }
.gnbp_benefit .cb-card{ border:0; background:transparent; border-radius:0; box-shadow:none; }
.gnbp_benefit .cb-imw{ border-radius:8px; overflow:hidden; background:#f5f3ec; }
.gnbp_benefit .cb-bd{ padding:10px 2px 6px; }
.gnbp_benefit .cb-badge{ top:8px; left:8px; }
/* 담기 원형 = 흰 바탕(오아시스). 08-05 페이지 테마 오버라이드(.gnbp.gnbp_benefit .cb-card .cb-addbtn = 0,4,0)를
   0,4,1 로 되돌린다 — 사진 위에 얹히는 아이콘이라 연초록 필이면 사진과 섞여 안 보인다. */
body .gnbp_benefit .cb-card .cb-bd > .cb-addbtn{
	right:8px; background:#fff; color:#3d6041; border:1px solid rgba(47,75,51,.10);
	box-shadow:0 2px 8px rgba(31,40,30,.18);
}
body .gnbp_benefit .cb-card .cb-bd > .cb-addbtn:hover,
body .gnbp_benefit .cb-card .cb-bd > .cb-addbtn:active{
	background:#eaf1e8; color:#3d6041; border-color:rgba(47,75,51,.10);
}

/* ===== 9) 더큰혜택 — 할인율 구간 소제목(.dcgrp)도 같은 언어로 ===== */
.gnbp_benefit .pgrid:not(.bnc_grid) > li.dcgrp{ padding:14px 0 0; }
.gnbp_benefit .pgrid:not(.bnc_grid) > li.dcgrp:first-child{ padding-top:0; }
.gnbp_benefit .pgrid:not(.bnc_grid) > li.dcgrp h4{ font-size:17px; font-weight:700; color:#1f241e; }
.gnbp_benefit .pgrid:not(.bnc_grid) > li.dcgrp h4::before{ display:none; }
/* "조합원 N원 절약" 보조줄 */
.gnbp_benefit .pgrid:not(.bnc_grid) .pc_save{ font-size:13.5px; color:#6c7268; }

/* ===== 10) 신규생활재 — NEW/입점주차 배지 유지(위치만 라운드 안쪽 8px) ===== */
.gnbp_new .pgrid:not(.bnc_grid) .badge_new{ top:8px; right:8px; }
.gnbp_new .pgrid:not(.bnc_grid) .pctag{ top:8px; left:8px; }
.gnbp_new .pgrid:not(.bnc_grid) .nn_buy{ font-size:13.5px; color:#6c7268; margin:4px 0 0; }
/* 공통 태그(할인율·증정·쿠폰·예약) 위치도 8px 통일 */
.gnbp .pgrid:not(.bnc_grid) .pctag{ top:8px; left:8px; }

}
/* ===== 4열은 1101px 이상에서만(1024~1100 은 기존 3열 유지 — 카드폭 하한 보호) ===== */
@media (min-width:1101px){
	.gnbp .pgrid:not(.bnc_grid){ grid-template-columns:repeat(4,1fr); }
	.gnbp_recom.rc2 .rc_grid{ grid-template-columns:repeat(4,1fr); }
}
@media (min-width:1024px) and (max-width:1100px){
	.gnbp_recom.rc2 .rc_grid{ grid-template-columns:repeat(3,1fr); }
	.gnbp_recom .rcb1_rail{ grid-template-columns:repeat(3,1fr); }
	.gnbp_recom .rcb1_card:nth-child(n+7){ display:none; }
	.gnbp_benefit .cb-list{ grid-template-columns:repeat(3,1fr); }
}

/* ============================================================================
   v1.0.2 (2026-09-03) — 두레추천 본문(.rc_sec) 섹션 제목 신설(팀장 확정)
   마크업 = main_home1.jsp 의 .stitle 1블록. 제목 규칙은 위 §1 공통(.stitle)이 그대로 적용되므로
   여기서는 캡션(배송 주차)만 숫자 서체로 맞추고, 제목선과 정렬 툴바 선이 50px 간격으로 두 줄
   겹쳐 보이는 것을 막기 위해 두레추천 툴바의 자체 밑줄만 뺀다(정렬탭 위치·동작 무변경).
   ============================================================================ */
@media (min-width:1024px){
	.gnbp_recom.rc2 .rc_sec .stitle .scap{ font-family:"Roboto","Pretendard",sans-serif; }
	.gnbp_recom.rc2 .rc_sec .gnbp_toolbar{ border-bottom:0; padding-bottom:0; margin-bottom:20px; }
}

/* ============================================================================
   v1.0.3 (2026-09-03) — 인기 생활재 카드 위계를 메인 .cb-card 와 동일하게(팀장 지적)
   마크업 = recomBestOneComm.jsp 가 PC 에서만 metatop/specrow 를 추가로 낸다(모바일 출력 무변경).
   칩·별점 자체 스타일은 dure_card.css 의 .dcz 공용 문법이 담당하고, 여기서는 줄 간격만 잡는다.
   순서 = 생산자·별점(metatop) → 상품명 → 인증·규격/단위·온도 칩(specrow) → 가격.
   ⚠ 담기 아이콘이 .rcb1_bd 안 absolute(bottom:calc(100%+8px)) 라 본문 높이가 늘어도 위치는 불변.
   ============================================================================ */
@media (min-width:1024px){
	.gnbp_recom .rcb1_card .metatop{ min-height:0; margin:0 0 3px; }
	.gnbp_recom .rcb1_card .metatop .farmer{ font-size:13px; color:#6c7268; font-weight:500; line-height:1.25; }
	.gnbp_recom .rcb1_card .metatop .rvstat{ font-size:13.5px; line-height:1; cursor:pointer; }
	/* 상품명 = 칩이 아래에 붙으므로 2줄 고정높이 유지(카드 바닥선 정렬) */
	.gnbp_recom .rcb1_name{ margin:0 0 4px; }
	.gnbp_recom .rcb1_card .specrow{ margin:0 0 6px; }
	.gnbp_recom .rcb1_price{ margin-top:0; }
}

/* ============================================================================
   v1.0.4 (2026-09-03) — 인기 생활재 = 가로 1줄 레일(팀장 "가로 1줄 넘겨 볼 수 있도록")
   ----------------------------------------------------------------------------
   4단 2줄(8개) → 한 줄에 4장(275px 규격 그대로) + 오른쪽으로 이어짐(최대 12장).
   275×4 + 20×3 = 1160 = .rcb1 콘텐츠 열 폭 → 한 화면에 정확히 4장이 떨어진다.
   넘김 = 좌우 화살표(1회 = clientWidth = 4장) · 마우스 휠 · 드래그. 스크롤바 숨김, 스냅은 카드 단위.
   화살표 문법 = 메인 카테고리별 베스트(.cb-tabnav)와 동일 — 흰 원형 44px · 딥그린 · 연보더,
   위치는 사진 세로 중앙(137px = 275/2). 넘칠 때만 노출하고 끝에 닿은 쪽은 비활성(흐림+클릭차단).
   ⚠ 본문 두레추천(.rc_grid) 4단 그리드는 무변경. 모바일은 card_flat_m.css §9(2열)가 잡으므로 무접촉.
   ============================================================================ */
@media (min-width:1024px){
	.gnbp_recom .rcb1_railwrap{ position:relative; }
	.gnbp_recom .rcb1_rail{
		display:flex; flex-wrap:nowrap; gap:0 20px;
		overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth;
		scroll-snap-type:x proximity; overscroll-behavior-x:contain;
		scrollbar-width:none; -webkit-overflow-scrolling:touch;
		padding:0 0 4px; cursor:grab;
	}
	.gnbp_recom .rcb1_rail::-webkit-scrollbar{ display:none; }
	/* 드래그 중 = 잡은 커서 + 스냅·스무스 해제(드래그가 튕기지 않게) */
	.gnbp_recom .rcb1_rail.is-drag{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
	/* 카드 = 4단 그리드와 같은 275px 고정폭. 08-06 의 6개/8개 컷은 레일에서 무의미하므로 해제 */
	.gnbp_recom .rcb1_rail > .rcb1_card{ flex:0 0 275px; width:275px; scroll-snap-align:start; }
	.gnbp_recom .rcb1_card:nth-child(n+7),
	.gnbp_recom .rcb1_card:nth-child(n+9){ display:block; }
	/* 좌우 화살표 — 사진 세로 중앙(275/2=137.5). 기본 숨김, 넘칠 때(is-over)만 노출 */
	.gnbp_recom .rcb1_nav{
		display:none; position:absolute; top:137px; transform:translateY(-50%);
		width:44px; height:44px; z-index:5; align-items:center; justify-content:center; padding:0;
		border:1px solid #EDE8DA; border-radius:999px; background:#fff; color:#3D6041;
		font-family:inherit; font-size:22px; font-weight:700; line-height:1; cursor:pointer;
		box-shadow:0 2px 10px rgba(31,36,30,.16); transition:background .15s, border-color .15s, opacity .15s;
	}
	.gnbp_recom .rcb1_nav-l{ left:-16px; }
	.gnbp_recom .rcb1_nav-r{ right:-16px; }
	.gnbp_recom .rcb1_nav:hover{ background:#F4F7F2; border-color:#C9DCCB; }
	.gnbp_recom .rcb1_railwrap.is-over .rcb1_nav{ display:flex; }
	/* 끝에 닿은 쪽 = 비활성(자리는 지켜 위치가 튀지 않게) */
	.gnbp_recom .rcb1_railwrap.is-over:not(.can-l) .rcb1_nav-l,
	.gnbp_recom .rcb1_railwrap.is-over:not(.can-r) .rcb1_nav-r{ opacity:.3; pointer-events:none; box-shadow:none; }
}