/* ============================================================
   goods_view_rd.css  ·  v1.1 (2026-07-27)
   상품 상세페이지 디자인 리뉴얼 — 시각 전용(기능부 무접촉)
   v1.1: §2b 연관/추천 카드 조합원가만 노출(비조합원가 숨김)·조합원 라벨 정돈
   공유 include(goodsViewCommV2.jsp)에서 로드 → shop/mobile 상세 공통.
   style_v2.css 뒤에 로드되어 동일/상위 specificity로 오버라이드.
   스코프: 상세 하단 연관/스토리 섹션 · 요약칩 · PC 구매패널 · 모바일 탭.
   ------------------------------------------------------------
   §1 섹션 3단헤더(아이브로+세리프제목+룰바)  §2 연관/추천 두레카드 스킨
   §3 정보고시 요약칩                          §4 PC 우측 구매패널 스티키
   §5 모바일 상세탭 스티키 보강
   ============================================================ */

/* 팔레트(로컬 정의 — main_rd 변수 비의존) */
/* green #3D6041 · green-d #2F5233 · gold #F8A31E · ink #1D271E
   muted #9CA09F · line #ECEBE6 · chipbg #F5F3EC · chipln #E7E4D8 */

/* ===== §1 섹션 3단헤더 =========================================
   대상: 모바일 .many_prod_list/.category_prod_list h3.title,
         .goods_story h3.title(모바일)·h4.title(PC).
   마크업 무변경 — 아이브로/룰바는 pseudo-element로 생성. */
.many_prod_list > h3.title,
.category_prod_list > h3.title,
.goods_story > h3.title,
.goods_story > h4.title{
	position:relative;
	font-family:'Pretendard','Noto Sans KR',sans-serif;
	font-weight:700;
	color:#1D271E;
	font-size:1.35rem;
	line-height:1.3;
	letter-spacing:-0.01em;
	padding:0 0 13px 0;
	margin-bottom:16px;
}
/* 아이브로(작은 그린 라벨) */
.many_prod_list > h3.title::before,
.category_prod_list > h3.title::before,
.goods_story > h3.title::before,
.goods_story > h4.title::before{
	display:block;
	font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
	font-size:0.78rem;
	font-weight:800;
	letter-spacing:0.04em;
	color:#3D6041;
	margin-bottom:5px;
}
.many_prod_list > h3.title::before{content:"추천";}
.category_prod_list > h3.title::before{content:"인기";}
.goods_story > h3.title::before,
.goods_story > h4.title::before{content:"두레 이야기";}
/* 얇은 룰바(그린 세그먼트 + 연회색) */
.many_prod_list > h3.title::after,
.category_prod_list > h3.title::after,
.goods_story > h3.title::after,
.goods_story > h4.title::after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:3px;
	background:linear-gradient(90deg,#3D6041 0 46px,#EAEAEA 46px);
}

/* ===== §2 연관/추천 카드 두레카드 스킨 (모바일 전용) ============
   대상: .many_prod_list/.category_prod_list 내 .product_slider_type1 카드.
   기존 고정 높이(정렬)·마크업·JS 콜백 유지, 외형만 통일. */
.many_prod_list .product_slider_type1 .swiper-slide,
.category_prod_list .product_slider_type1 .swiper-slide{
	box-sizing:border-box;
	border:1px solid #ECEBE6;
	border-radius:14px;
	background:#fff;
	overflow:hidden;
	box-shadow:0 1px 5px rgba(29,39,30,.06);
}
.many_prod_list .product_slider_type1 .img_wrap,
.category_prod_list .product_slider_type1 .img_wrap{
	border:0;
	border-bottom:1px solid #F0EFEA;
	border-radius:0;
}
.many_prod_list .product_slider_type1 .txt_box,
.category_prod_list .product_slider_type1 .txt_box{
	padding:8px 10px 0;
}
.many_prod_list .product_slider_type1 .txt_box .title,
.category_prod_list .product_slider_type1 .txt_box .title{
	font-weight:600;
	color:#1D271E;
}
.many_prod_list .product_slider_type1 .txt_box .price .won,
.category_prod_list .product_slider_type1 .txt_box .price .won{
	color:#1D271E;
	font-weight:600;
}
.many_prod_list .product_slider_type1 .txt_box .price .won .roboto,
.category_prod_list .product_slider_type1 .txt_box .price .won .roboto{
	font-weight:800;
}
.many_prod_list .product_slider_type1 .txt_box .comf,
.category_prod_list .product_slider_type1 .txt_box .comf{
	border-color:#D8DBD4;
	border-radius:6px;
	color:#3D6041;
}
/* 담기 버튼 → 딥그린 알약 (아이콘→텍스트 노출) */
.many_prod_list .product_slider_type1 .cart,
.category_prod_list .product_slider_type1 .cart{
	background:#2F5233;
	background-image:none;
	color:#fff;
	width:auto;
	min-width:0;
	height:30px;
	line-height:30px;
	padding:0 14px;
	border-radius:15px;
	font-size:0.8rem;
	font-weight:800;
	letter-spacing:-0.01em;
	text-align:center;
	top:auto;
	bottom:10px;
	right:9px;
	box-shadow:0 2px 6px rgba(47,82,51,.25);
}

/* ===== §2b 연관/추천 카드 — 조합원가만 노출 (2026-07-27 로딩속도2차 동반) =====
   카드당 dl.price 2개(1=조합원, 2=비조합원). 인접형제 선택자로 두번째(비조합원)만 숨김.
   가격 1개면(비조합원 없음) 아무것도 숨기지 않음. 마크업·JS 콜백 무접촉(시각 전용). */
.many_prod_list .product_slider_type1 .txt_box dl.price + dl.price,
.category_prod_list .product_slider_type1 .txt_box dl.price + dl.price{
	display:none;
}
/* 단일 가격 라인 정돈 — '조합원' 라벨 그린 강조 */
.many_prod_list .product_slider_type1 .txt_box dl.price dt,
.category_prod_list .product_slider_type1 .txt_box dl.price dt{
	color:#3D6041;
	font-weight:700;
}
/* 정가(취소선) 절제된 회색 */
.many_prod_list .product_slider_type1 .txt_box .price .won .sale,
.category_prod_list .product_slider_type1 .txt_box .price .won .sale{
	color:#9CA09F;
	text-decoration:line-through;
	font-weight:500;
}

/* ===== §3 정보고시 요약칩 =====================================
   상품명/가격 하단. 존재하는 값만 렌더(JSP c:if). shop/mobile 공통. */
.gv_chips{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:14px 0 6px 0;
	padding:0;
	list-style:none;
}
.gv_chip{
	display:inline-flex;
	align-items:center;
	gap:5px;
	background:#F5F3EC;
	border:1px solid #E7E4D8;
	border-radius:999px;
	padding:6px 13px;
	font-size:0.85rem;
	font-weight:600;
	color:#3B4A3C;
	line-height:1.2;
	letter-spacing:-0.01em;
}
.gv_chip::before{
	font-size:0.92em;
	line-height:1;
}
.gv_chip_temp::before{content:"\2744";}   /* ❄ 보관법 */
.gv_chip_spec::before{content:"\1F4E6";}  /* 📦 규격 */
.gv_chip_exp::before{content:"\1F4C5";}   /* 📅 소비기한 */

/* ===== §5 모바일 상세탭 스티키 보강 ===========================
   기능: 기존 JS(.move → position:fixed;top:59px)가 스티키를 담당.
   여기선 시각 보강만(그림자·가독). position 로직 미변경. */
@media (max-width:1023px){
	.product_detail_tab.move ul{
		box-shadow:0 3px 9px rgba(0,0,0,.08);
	}
	.product_detail_tab li a{
		font-size:1.05rem;
	}
	.product_detail_tab li.on a{
		font-weight:600;
	}
	/* 모바일 요약칩: 상품명/가격 폭에 맞춰 살짝 촘촘 */
	.gv_chips{margin-top:12px;}
}

/* ===== §4 PC 우측 구매패널 스티키 ============================
   대상: shop .product_visual .right. 기존 display:table 2단을
   flex 2단으로 전환(시각 등가)해 sticky 성립. youtube 형제는 전폭.
   min-width 게이트 → 모바일 무영향. */
@media (min-width:1024px){
	.product_detail_wrap .product_visual{
		display:flex;
		flex-wrap:wrap;
		align-items:flex-start;
	}
	.product_detail_wrap .product_visual > .left{
		flex:0 0 524px;
		max-width:524px;
	}
	.product_detail_wrap .product_visual > .right{
		flex:1 1 0;
		min-width:0;
		position:sticky;
		top:88px;
	}
	/* 내부 youtube용 .product_visual(형제/자식 무관) 전폭 강제 */
	.product_detail_wrap .product_visual .product_visual{
		flex-basis:100%;
		width:100%;
	}
	/* PC 요약칩 약간 키움 */
	.gv_chip{
		font-size:0.95rem;
		padding:7px 15px;
	}
}