@charset "utf-8";
/* ============================================================================
   producer_strip.css — 상품상세 하단 "생산자 한마디" 스트립 + 상단 생산자 칩  v1.1.0 (2026-09-05 → 09-06)

   v1.1.0 추가 = 상단 칩(.gvpc) — 상품명 아래 한 줄(사진 24 + "홍성 임재덕 생산자" + ›), 누르면 하단 스트립으로 점프.
                 + 도착 강조(.gvp.is-hl). 하단 스트립(.gvp) 규칙은 v1.0.0 그대로 무수정.

   · 대상 = include/comm/goodsViewDtPc.jsp · goodsViewDtMo.jsp 콘텐츠 맨 아래(문의 뒤 · 연관생활재 앞)
   · 컨테이너 = <div id="gvProducer" class="gvp">(PC) / class="gvp gvp-m"(모바일). 마크업은 js/comm/producer_strip.js 가 채운다.
   · 데이터 = producer_person_api.jsp?goodsNo=N (SM_PRODUCER_PERSON · SM_GOODS_PRODUCER_MAP)
   · 규격(Layer 0) — 글자 12.5px 이상 · 회색은 #5F6B62 보다 흐리게 쓰지 않음 · 터치영역 44px
   · 인라인 스타일 0 · 애니메이션은 등장 opacity .2s 뿐(prefers-reduced-motion 존중)
   · 스코프 = .gvp 전용 신규 클래스(기존 .gvdt/.gvm 규칙과 충돌 없음).
     .gvdt img{max-width:100%} 같은 상위 규칙을 확실히 이기려고 선택자는 .gvp .gvp_xxx 2단으로 고정한다.
   ========================================================================== */

.gvp[hidden]{ display:none !important; }

/* 위 여백 28 중 18 은 padding 으로 둔다(= 카드의 border-box 안).
   상단 칩에서 점프해 오면 스티키 탭바 바로 아래가 이 요소의 border-box 상단이 된다 — 여백이 margin 이면
   화면 밖으로 밀려 카드가 탭바에 딱 붙는다. padding 이면 그 자리에 남아 도착 지점에 숨 쉴 틈이 생긴다. */
.gvp{
	display:block;
	margin:10px 0 4px;
	padding-top:18px;
	opacity:0;
	transition:opacity .2s ease;
	font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
.gvp.is-in{ opacity:1; }

/* ── 카드 ───────────────────────────────────────────────────────────────── */
.gvp .gvp_card{
	display:flex;
	align-items:flex-start;
	gap:18px;
	box-sizing:border-box;
	padding:20px 22px;
	background:#F7F7F4;
	border:1px solid #DFE5DC;
	border-radius:12px;
}

/* ── 사진(원형) ─────────────────────────────────────────────────────────── */
.gvp .gvp_ph{
	position:relative;
	flex:0 0 auto;
	width:72px; height:72px;
	border-radius:50%;
	overflow:hidden;
	background:#E7EDE6;
	border:1px solid #DFE5DC;
}
.gvp .gvp_img{
	display:block;
	width:100%; height:100%;
	max-width:100%;
	object-fit:cover;
	object-position:center top;
}
/* ERP 원본(<번호>C.jpg)은 하단 약 16%가 "○○ ○○○ 생산자" 캡션 띠다(실측 1321C·9046C 등 전부 정사각).
   원을 넘치게 키우고 위를 기준으로 잘라 띠를 원 밖으로 밀어낸다(= 아래 18% 제거, 얼굴은 상단 중앙이라 안전).
   관리자가 직접 올린 인물 사진(/DureMallAdmin/upload/…)은 이미 정돈된 컷이므로 이 규칙을 적용하지 않는다. */
.gvp .gvp_img.gvp_erp{ height:122%; }
/* 사진 없음·로드 실패 폴백 = 이름 첫 글자 */
.gvp .gvp_ini{
	display:flex;
	align-items:center; justify-content:center;
	width:100%; height:100%;
	background:#DDE6DB;
	color:#3D6041;
	font-size:26px; font-weight:700; line-height:1;
	letter-spacing:-.02em;
}

/* ── 본문 ───────────────────────────────────────────────────────────────── */
.gvp .gvp_bd{
	flex:1 1 auto;
	min-width:0;
	padding-top:2px;
}
.gvp .gvp_eb{
	margin:0 0 4px;
	font-size:13px; font-weight:700; line-height:1.3;
	color:#3D6041;
	letter-spacing:-.01em;
}
.gvp .gvp_nm{
	display:flex;
	align-items:baseline;
	flex-wrap:wrap;
	gap:8px;
	margin:0;
}
.gvp .gvp_name{
	font-size:18px; font-weight:700; line-height:1.4;
	color:#1D271E;
	letter-spacing:-.02em;
	word-break:keep-all;
}
.gvp .gvp_rg{
	font-size:14px; font-weight:400; line-height:1.4;
	color:#5F6B62;
	word-break:keep-all;
}
.gvp .gvp_gt{
	margin:8px 0 0;
	font-size:15px; font-weight:400; line-height:1.6;
	color:#2F3A31;
	word-break:keep-all;
}

/* ── 거래처 소개 링크 ───────────────────────────────────────────────────── */
.gvp .gvp_lk{
	display:inline-flex;
	align-items:center;
	min-height:44px;          /* 터치 44 */
	margin-top:2px;
	padding:0;
	font-size:14px; font-weight:600; line-height:1.4;
	color:#3D6041;
	text-decoration:none;
	background:none; border:0;
}
.gvp .gvp_lk:hover,
.gvp .gvp_lk:focus{ text-decoration:underline; }
.gvp .gvp_ar{ margin-left:4px; font-weight:400; }
.gvp .gvp_lk_tx{ display:inline; }

/* ══════════════════════════════════════════════════════════════════════════
   모바일 (.gvp-m = goodsViewDtMo.jsp 렌더) — 56px 사진 · 이름 16 · 인사 14.5 2줄 클램프
   ── 링크는 카드 우측 화살표(글자는 스크린리더용으로 남긴다)
   ══════════════════════════════════════════════════════════════════════════ */
.gvp.gvp-m{ margin:8px 0 4px; padding-top:14px; }
.gvp.gvp-m .gvp_card{
	position:relative;
	gap:14px;
	padding:16px 18px;
}
.gvp.gvp-m .gvp_ph{ width:56px; height:56px; }
.gvp.gvp-m .gvp_ini{ font-size:21px; }
.gvp.gvp-m .gvp_eb{ font-size:12.5px; margin-bottom:3px; }
.gvp.gvp-m .gvp_name{ font-size:16px; }
.gvp.gvp-m .gvp_rg{ font-size:13px; }
.gvp.gvp-m .gvp_gt{
	margin-top:6px;
	font-size:14.5px; line-height:1.55;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
/* 우측 화살표 링크 — 카드 오른쪽 끝, 세로 중앙, 터치 44 */
.gvp.gvp-m .gvp_card.has_lk{ padding-right:44px; }
.gvp.gvp-m .gvp_lk{
	position:absolute;
	top:50%; right:4px;
	transform:translateY(-50%);
	justify-content:center;
	width:40px; min-height:44px;
	margin-top:0;
	color:#5F6B62;
}
.gvp.gvp-m .gvp_lk:hover,
.gvp.gvp-m .gvp_lk:focus{ text-decoration:none; }
.gvp.gvp-m .gvp_lk_tx{
	position:absolute;
	width:1px; height:1px;
	margin:-1px; padding:0;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}
.gvp.gvp-m .gvp_ar{ margin-left:0; font-size:20px; line-height:1; }

/* PC 렌더를 좁은 창에서 볼 때도 넘치지 않게(같은 압축 규칙) */
@media (max-width:640px){
	.gvp .gvp_card{ gap:14px; padding:16px 18px; }
	.gvp .gvp_ph{ width:56px; height:56px; }
	.gvp .gvp_ini{ font-size:21px; }
	.gvp .gvp_name{ font-size:16px; }
	.gvp .gvp_gt{ font-size:14.5px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   상단 생산자 칩 (.gvpc — v1.1.0 신설)
   ── 위치 = 상품명 바로 아래(생활재번호 위). 여기는 "사람이 있다"는 단서 한 줄만 놓는다.
      이름 외의 정보(인사말 전문·지역 설명·소개 링크)는 하단 스트립의 몫 — 같은 말을 두 번 하지 않는다.
   ── 터치 44px 는 버튼 min-height 로 보증한다(칩의 시각 높이는 26 남짓이라 위아래 패딩이 그 몫).
   ══════════════════════════════════════════════════════════════════════════ */
.gvpc[hidden]{ display:none !important; }

.gvpc{
	display:block;
	margin:2px 0 0;
	opacity:0;
	transition:opacity .2s ease;
	font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
.gvpc.is-in{ opacity:1; }

.gvpc .gvpc_btn{
	display:inline-flex;
	align-items:center;
	gap:7px;
	max-width:100%;
	min-height:44px;          /* 터치 44 */
	margin:0;
	padding:0;
	background:none;
	border:0;
	border-radius:8px;
	color:#3D6041;
	font-family:inherit;
	text-align:left;
	cursor:pointer;
	-webkit-appearance:none;
	appearance:none;
}
.gvpc .gvpc_btn:hover .gvpc_nm,
.gvpc .gvpc_btn:focus .gvpc_nm{ text-decoration:underline; }

/* 원형 사진 24 — 규칙은 하단 스트립과 동일(ERP 원본은 캡션 띠를 원 밖으로 밀어낸다) */
.gvpc .gvpc_ph{
	position:relative;
	display:block;
	flex:0 0 auto;
	width:24px; height:24px;
	border-radius:50%;
	overflow:hidden;
	background:#E7EDE6;
	border:1px solid #DFE5DC;
}
.gvpc .gvpc_img{
	display:block;
	width:100%; height:100%;
	max-width:100%;
	object-fit:cover;
	object-position:center top;
}
.gvpc .gvpc_img.gvpc_erp{ height:122%; }
.gvpc .gvpc_ini{
	display:flex;
	align-items:center; justify-content:center;
	width:100%; height:100%;
	background:#DDE6DB;
	color:#3D6041;
	font-size:11.5px; font-weight:700; line-height:1;
	letter-spacing:-.02em;
}

.gvpc .gvpc_nm{
	flex:0 1 auto;
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-size:14px; font-weight:600; line-height:1.4;
	color:#3D6041;
	letter-spacing:-.01em;
}
/* 인사말이 있을 때만 붙는 예고 라벨 */
.gvpc .gvpc_say{
	flex:0 0 auto;
	padding:1px 7px;
	border-radius:999px;
	background:#EAF1E7;
	color:#3D6041;
	font-size:12.5px; font-weight:700; line-height:1.5;
	letter-spacing:-.01em;
}
.gvpc .gvpc_ar{
	flex:0 0 auto;
	color:#7A857C;
	font-size:17px; font-weight:400; line-height:1;
}

/* 모바일(.gvpc-m) — 사진 22 · 이름 13.5(하한 12.5 준수) */
.gvpc.gvpc-m .gvpc_ph{ width:22px; height:22px; }
.gvpc.gvpc-m .gvpc_ini{ font-size:11px; }
.gvpc.gvpc-m .gvpc_nm{ font-size:13.5px; }
.gvpc.gvpc-m .gvpc_ar{ font-size:16px; }

@media (max-width:640px){
	.gvpc .gvpc_ph{ width:22px; height:22px; }
	.gvpc .gvpc_nm{ font-size:13.5px; }
}

/* 도착 강조 — 칩을 눌러 내려왔을 때 "여기다" 를 1.6초만 알린다(색만 바뀐다, 움직임 없음) */
.gvp .gvp_card{ transition:border-color .25s ease, box-shadow .25s ease; }
.gvp.is-hl .gvp_card{
	border-color:#3D6041;
	box-shadow:0 0 0 3px rgba(61,96,65,.14);
}

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce){
	.gvp{ transition:none; }
	.gvpc{ transition:none; }
	.gvp .gvp_card{ transition:none; }
}