@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════
producer_page.css — 생산자 모아보기 전용 (2026-08-07 신설) · v1.5.3
대상 = /prod/producerList.do(목록) · /prod/producerView.do(상세). PC/모바일 공용 1파일.
★ v1.2.0 스토리 풀 매거진(2026-08-07) — 창A '생산자 스토리 입력 표준 + 렌더 설계' 핸드오프 §3-1 반영.
서버측 SUBSTR 캡 제거(매퍼)로 전문이 내려오므로, 이 파일이 '길이·구조·리듬'을 전담한다.
· 팩트박스 → 칩 그리드(.pzs_facts) · h4 → 번호 눈썹(CSS counter) 챕터 헤더
· 인용 → 카드(.pzs_quote, 발화자 우측) · 갤러리 → 챕터 사이 인터리브(.pzs_shot)
· 본문 PC 680px / 사진 760px, 모바일 17px·행간 1.9 · 사진 풀블리드
마크업 변환은 producerViewComm.jsp 의 구조화 스크립트가 하며, 실패 시 원문 그대로 남는다(무손상).
★ v1.1.0 재스킨(2026-08-07) — 두레 컨셉 시안(따뜻한 크림 에디토리얼) 반영.
· 배경 = 크림/오프화이트, 포인트 = 갈색(골드)·먹색 절제
· 헤드라인 = 큼직한 세리프(Noto Serif KR / Maru Buri 관례)
· 카드 = 테두리 없는 미니멀 + 넉넉한 화이트스페이스 + 가는 화살표(↗)
· 섹션 번호(01/02) 라벨
★ 구매 존(.dcz 카드·담기 버튼·가격)은 손대지 않는다 = 전 사이트 커머스 문법 유지(가독·44px).
감성 존만 크림으로 전환하고, 구매 존은 흰 카드 그대로 두어 톤이 자연스럽게 이어지게 한다.
★ 이 파일에는 '없는 것만' 담는다.
상세의 히어로·스토리·인용구·갤러리·팩트박스·상품카드(.dcz)는 goods_view_rd.css(.gvdt 스코프,
commScripts 에서 전 페이지 로드) 위에 이 파일이 나중에 로드되어 톤만 덮어쓴다(마크업 계약 유지).
★ 스코프 = .prdcpz(페이지 루트). 다른 화면은 이 파일을 로드하지도 않고, 로드돼도 무영향.
★ 인라인 스타일 금지 — 시각 변경은 이 파일 버전업으로만(페이지 JSP 의 ?v= 갱신).
═══════════════════════════════════════════════════════════════════════ */
.prdcpz{
--pz-paper:#f7f2e7; /* 따뜻한 크림 — 페이지 바탕 */
--pz-surface:#fffdf7; /* 오프화이트 — 카드/블록 바탕 */
--pz-ink:#1f2923; /* 먹색 — 본문 */
--pz-ink-soft:#4a544b;
--pz-muted:#7f887b;
--pz-gold:#9a7530; /* 갈색 포인트(크림 위 대비 확보) */
--pz-gold-l:#c6a35b; /* 딥그린/사진 위 골드 */
--pz-line:#ddd4c1;
--pz-line-soft:#e9e1d0;
--pz-forest:#17231d;
--pz-serif:"Noto Serif KR","Maru Buri","Nanum Myeongjo",serif;
}
/* ── 페이지 베이스 ─────────────────────────────────────────────── */
/* ★ .gvdt.product_detail_wrap{background:#fff}(goods_view_rd, 0-2-0)를 이기려면 같은 2클래스 선택자 필요.
.prdcpz 단독(0-1-0)이면 흰 배경이 그대로 남는다(재스킨 1차에서 실제로 발생). */
.prdcpz.product_detail_wrap{ background:var(--pz-paper); overflow-x:hidden; }
.prdcpz{ overflow-x:hidden; }
.prdcpz .gvdt_wrap{ padding-bottom:90px; color:var(--pz-ink); }
.prdcpz .gvm_wrap{ padding-bottom:60px; color:var(--pz-ink); }
.prdcpz .bc{ color:var(--pz-muted); }
.prdcpz .bc a{ color:var(--pz-muted); }
.prdcpz .bc a:hover{ color:var(--pz-gold); }
.prdcpz .bc .sep{ color:#cfc6b2; }
/* ── 섹션 라벨 (01 / 02 + 가는 선) ─────────────────────────────── */
.prdcpz .pz_label{ display:flex; align-items:center; gap:16px;
margin:0 0 30px; font-size:12px; font-weight:700; letter-spacing:.16em; color:var(--pz-muted); }
.prdcpz .pz_label .pz_num{ color:var(--pz-gold); font-weight:800; }
.prdcpz .pz_label:after{ content:''; flex:0 0 auto; width:64px; height:1px; background:var(--pz-line); }
/* ── 풀블리드 유틸 ─────────────────────────────────────────────
.gvdt_wrap 은 max-width:1180px 컨테이너라 사진 밴드가 가운데 박스로 갇힌다.
50%-50vw 음수 마진으로 화면 끝까지 늘린다(가로 스크롤은 .prdcpz overflow-x:hidden 이 흡수). */
.prdcpz .pz_hero,
.prdcpz .pz_close,
.prdcpz .prdcz_shop,
.prdcpz .gvdt_farm .gf_hero,
.prdcpz .gvdt_farm .gf_head_plain{ margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
/* ── ① 목록: 히어로(풀블리드 사진 밴드) ────────────────────────── */
.prdcpz .pz_hero{ position:relative; margin-top:6px; padding:0; overflow:hidden;
background:#26372d url(../../images/comm/producer/hero_farm.jpg) 62% 52%/cover no-repeat; }
.prdcpz .pz_hero:before{ content:''; position:absolute; inset:0;
background:linear-gradient(90deg,rgba(11,26,19,.94) 0,rgba(20,37,28,.80) 38%,rgba(20,34,28,.30) 74%,rgba(17,28,23,.10) 100%); }
/* 풀블리드 밴드 안쪽 정렬 = 본문 컨테이너(1180) 기준으로 되돌린다.
max()로 좁은 화면에선 18px 최소 여백 유지(1180/2 - 18 = 572). */
.prdcpz .pz_hero_in,
.prdcpz .pz_close,
.prdcpz .prdcz_shop,
.prdcpz .gvdt_farm .gf_hero_cap,
.prdcpz .gvdt_farm .gf_head_plain{ padding-left:max(18px, calc(50vw - 572px)); padding-right:max(18px, calc(50vw - 572px)); }
.prdcpz .pz_hero_in{ position:relative; z-index:1; padding-top:96px; padding-bottom:92px; }
.prdcpz .pz_hero_in .pz_title,
.prdcpz .pz_hero_in .pz_lead{ max-width:700px; }
.prdcpz .pz_eyebrow{ margin:0 0 20px; font-size:11.5px; font-weight:700; letter-spacing:.2em; color:var(--pz-gold-l); }
.prdcpz .pz_title{ margin:0; font-family:var(--pz-serif); font-size:52px; font-weight:600; line-height:1.24;
letter-spacing:-.035em; color:#f6f0e4; text-shadow:0 2px 20px rgba(0,0,0,.28); word-break:keep-all; }
.prdcpz .pz_lead{ margin:26px 0 0; font-size:17px; line-height:1.85; color:rgba(246,240,228,.90);
letter-spacing:-.01em; word-break:keep-all; }
/* ── ① 목록: 01 우리가 만나는 방식 (에디토리얼 2단 + 인용) ─────── */
.prdcpz .pz_intro{ padding:78px 0 0; }
.prdcpz .pz_intro_grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:start; }
.prdcpz .pz_h2{ margin:0; font-family:var(--pz-serif); font-size:38px; font-weight:600; line-height:1.36;
letter-spacing:-.03em; color:var(--pz-ink); word-break:keep-all; }
.prdcpz .pz_intro_txt p{ margin:0 0 20px; font-size:16px; line-height:2; color:var(--pz-ink-soft);
letter-spacing:-.01em; word-break:keep-all; }
.prdcpz .pz_intro_txt p:last-child{ margin-bottom:0; }
.prdcpz .pz_quote{ position:relative; margin:70px 0 0; padding:58px 30px 46px; text-align:center;
border-top:1px solid var(--pz-line); border-bottom:1px solid var(--pz-line); }
.prdcpz .pz_quote:before{ content:'\201C'; position:absolute; top:8px; left:50%; transform:translateX(-50%);
font-family:Georgia,serif; font-size:58px; line-height:1; color:var(--pz-gold-l); }
.prdcpz .pz_quote blockquote{ margin:0; font-family:var(--pz-serif); font-size:27px; font-weight:500;
line-height:1.62; letter-spacing:-.02em; color:var(--pz-ink); word-break:keep-all; }
.prdcpz .pz_quote .pz_qby{ margin:22px 0 0; font-size:13px; color:var(--pz-muted); letter-spacing:-.01em; }
/* ── ① 목록: 02 생산자의 오늘 (헤딩 + 카드 그리드) ─────────────── */
.prdcpz .pz_stories{ padding:80px 0 0; }
.prdcpz .pz_shead{ display:flex; align-items:flex-end; justify-content:space-between; gap:44px; margin-bottom:46px; }
.prdcpz .pz_shead .pz_label{ margin-bottom:22px; }
.prdcpz .pz_shead_r{ max-width:400px; margin-bottom:6px; text-align:right; }
.prdcpz .pz_shead_r p{ margin:0; font-size:15px; line-height:1.9; color:var(--pz-ink-soft); word-break:keep-all; }
.prdcpz .pz_shead_r .pz_cntline{ margin-top:10px; font-size:13px; color:var(--pz-muted); }
.prdcpz .pz_shead_r .pz_cntline b{ color:var(--pz-gold); font-weight:800; }
/* ── 생산자 찾기 (2026-08-09 신설) ─────────────────────────────────
48곳을 페이징 없이 전량 렌더하므로 필터는 클라이언트에서 즉시 건다(서버 왕복 0).
톤 = 페이지의 크림 에디토리얼. 커머스 입력창(각진 회색)이 아니라 종이 위 밑줄에 가깝게.
시니어 기준: 입력 17px, 높이 56px(터치 타깃 여유), 대비 WCAG AA. */
.prdcpz .pz_find{ margin:0 0 38px; }
.prdcpz .pz_find_lb{
display:block; margin:0 0 10px;
font-size:12px; font-weight:700; letter-spacing:.16em; color:var(--pz-muted);
}
.prdcpz .pz_find_box{
position:relative; display:flex; align-items:center; max-width:520px;
background:var(--pz-surface); border:1px solid var(--pz-line);
border-radius:3px; transition:border-color .18s ease, box-shadow .18s ease;
}
.prdcpz .pz_find_box:focus-within{ border-color:var(--pz-gold); box-shadow:0 0 0 3px rgba(154,117,48,.12); }
.prdcpz .pz_find_ic{ flex:none; margin:0 0 0 16px; color:var(--pz-muted); }
.prdcpz .pz_find_in{
flex:1 1 auto; min-width:0; height:56px; padding:0 12px;
background:none; border:0; outline:none; box-shadow:none;
font-family:inherit; font-size:17px; color:var(--pz-ink); letter-spacing:-.01em;
-webkit-appearance:none; appearance:none;
}
.prdcpz .pz_find_in::placeholder{ color:#a8afa4; }
/* 웹킷 기본 X 는 숨기고 우리 버튼만 쓴다(두 개 보이는 것 방지) */
.prdcpz .pz_find_in::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
/* 전역 button 리셋에 기대지 않도록 전 속성을 직접 못 박는다 */
.prdcpz .pz_find_x{
flex:none; width:44px; height:44px; margin-right:6px; padding:0;
background:none; border:0; border-radius:50%; cursor:pointer;
font-size:24px; line-height:1; color:var(--pz-muted);
display:flex; align-items:center; justify-content:center;
}
.prdcpz .pz_find_x:hover{ background:rgba(154,117,48,.10); color:var(--pz-gold); }
.prdcpz .pz_find_x[hidden]{ display:none; }
.prdcpz .pz_find_stat{ margin:10px 0 0; min-height:20px; font-size:14px; color:var(--pz-gold); letter-spacing:-.01em; }
/* 필터로 숨겨진 카드 — grid 항목이라 display:none 이어야 자리도 사라진다 */
.prdcpz .prdcz_card.pz_hide{ display:none; }
/* 0건 안내 */
.prdcpz .pz_find_empty{ display:none; padding:52px 20px; text-align:center;
background:var(--pz-surface); border:1px solid var(--pz-line-soft); border-radius:3px; }
.prdcpz .pz_find_empty.on{ display:block; }
.prdcpz .pz_find_empty .pfe_t{ margin:0; font-family:var(--pz-serif); font-size:20px; font-weight:700; color:var(--pz-ink); word-break:keep-all; }
.prdcpz .pz_find_empty .pfe_d{ margin:12px 0 0; font-size:15px; line-height:1.8; color:var(--pz-ink-soft); word-break:keep-all; }
.prdcpz .pz_find_empty .pfe_btn{
margin:22px 0 0; padding:0 24px; min-height:48px;
background:none; border:1px solid var(--pz-gold); border-radius:999px; cursor:pointer;
font-family:inherit; font-size:15px; font-weight:700; color:var(--pz-gold);
transition:background .18s ease, color .18s ease;
}
.prdcpz .pz_find_empty .pfe_btn:hover{ background:var(--pz-gold); color:#fffdf7; }
.prdcpz .prdcz_grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px 28px; }
/* 카드 = 테두리 없음. 사진 + 여백 + 얇은 밑줄만. */
.prdcpz .prdcz_card{ display:flex; flex-direction:column; background:none; border:0; border-radius:0;
text-decoration:none; color:inherit; }
.prdcpz .prdcz_card:focus-visible{ outline:2px solid var(--pz-gold); outline-offset:6px; }
.prdcpz .pc_thumb{ margin:0; overflow:hidden; background:#e7e0d0; }
.prdcpz .pc_thumb img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
transition:transform .45s cubic-bezier(.2,.7,.3,1); }
.prdcpz .prdcz_card:hover .pc_thumb img{ transform:scale(1.045); }
/* 사진 없는 생산자 = 딥그린 팔레트(기존 관례 유지, 톤만 정돈) */
.prdcpz .pc_palette{ position:relative; overflow:hidden; aspect-ratio:4/3;
display:flex; align-items:center; justify-content:center;
background:linear-gradient(145deg,#1d2f24 0,#2f4b33 62%,#3d6041 100%); }
.prdcpz .pc_palette:after{ content:''; position:absolute; right:-34px; top:-50px; width:180px; height:180px;
border-radius:50%; background:rgba(198,163,91,.13); }
.prdcpz .pc_initial{ position:relative; z-index:1; font-family:var(--pz-serif); font-size:42px; font-weight:600;
color:rgba(246,240,228,.94); letter-spacing:-.02em; }
.prdcpz .pc_body{ display:flex; flex-direction:column; flex:1; padding:20px 2px 0; }
.prdcpz .pc_eyebrow{ display:none; } /* '생산자' 반복 라벨 제거 — 지역 메타가 그 역할을 한다 */
.prdcpz .pc_region{ display:inline-flex; align-items:center; gap:5px; order:-1;
font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--pz-gold); }
.prdcpz .pc_region svg{ color:var(--pz-gold-l); flex:0 0 auto; }
.prdcpz .pc_region_none{ color:var(--pz-muted); } /* 지역 미등록 — 자리는 지키되 톤을 낮춘다 */
.prdcpz .pc_nm{ display:block; margin:12px 0 0; font-family:var(--pz-serif); font-size:23px; font-weight:600;
line-height:1.4; letter-spacing:-.025em; color:var(--pz-ink); word-break:keep-all; }
.prdcpz .pc_rel{ margin:13px 0 0; font-size:14.5px; line-height:1.85; color:var(--pz-ink-soft);
letter-spacing:-.01em; word-break:keep-all;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* ★ margin-top:auto = 설명문 줄수가 달라도 종수/화살표 줄을 카드 하단에 정렬(48개 카드라 어긋남이 확 보인다).
이 선언을 뒤에서 margin-top:고정값으로 덮으면 정렬이 깨진다(재스킨 1차 실수). */
.prdcpz .pc_foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
margin-top:auto; padding-top:16px; border-top:1px solid var(--pz-line-soft); }
.prdcpz .pc_cnt{ display:inline-block; padding:0; border:0; border-radius:0; background:none;
font-size:12.5px; font-weight:700; letter-spacing:.01em; color:var(--pz-ink-soft); }
.prdcpz .pc_cnt b{ color:var(--pz-gold); font-weight:800; }
.prdcpz .pc_cnt_off{ color:var(--pz-muted); font-weight:600; }
.prdcpz .pc_go{ font-size:12.5px; font-weight:700; color:var(--pz-ink); letter-spacing:-.01em;
transition:color .2s, transform .2s; }
.prdcpz .prdcz_card:hover .pc_go{ color:var(--pz-gold); transform:translate(3px,-3px); }
.prdcpz .prdcz_card:hover .pc_nm{ color:var(--pz-gold); }
/* ── ① 목록: 클로징 ───────────────────────────────────────────── */
.prdcpz .pz_close{ margin-top:96px; padding-top:72px; padding-bottom:72px; text-align:center;
background:var(--pz-forest); color:#f6f0e4; }
.prdcpz .pz_close .pz_eyebrow{ margin-bottom:18px; }
.prdcpz .pz_close h3{ margin:0; font-family:var(--pz-serif); font-size:34px; font-weight:600; line-height:1.45;
letter-spacing:-.03em; color:#f6f0e4; word-break:keep-all; }
.prdcpz .pz_close p{ margin:20px 0 0; font-size:15.5px; line-height:1.9; color:rgba(246,240,228,.78);
word-break:keep-all; }
/* ── ② 상세: 히어로/스토리 톤 전환(마크업 무변경, goods_view_rd 위에 덮어쓰기) ── */
.prdcpz .gvdt_farm{ border:0; border-radius:0; background:none; padding:0 0 10px; overflow:visible; }
.prdcpz .gvdt_farm .gf_hero{ margin-top:6px; background:#e7e0d0; }
.prdcpz .gvdt_farm .gf_hero img{ aspect-ratio:21/9; }
.prdcpz .gvdt_farm .gf_hero:after{ height:74%;
background:linear-gradient(0deg,rgba(11,26,19,.90) 0,rgba(14,25,19,.42) 52%,rgba(0,0,0,0) 100%); }
.prdcpz .gvdt_farm .gf_hero_cap{ padding-top:0; padding-bottom:34px; }
.prdcpz .gvdt_farm .gf_hero_cap .gf_eyebrow{ color:var(--pz-gold-l); }
.prdcpz .gvdt_farm .gf_head_plain{ margin-top:6px; padding-top:64px; padding-bottom:54px; border-radius:0;
background:linear-gradient(140deg,#1d2f24 0,#2f4b33 60%,#3d6041 100%); }
.prdcpz .gvdt_farm .gf_head_plain .gf_eyebrow{ color:var(--pz-gold-l); }
.prdcpz .gvdt_farm .gf_eyebrow{ font-size:11.5px; letter-spacing:.2em; font-weight:700; margin-bottom:10px; }
.prdcpz .gvdt_farm .gf_nm{ font-family:var(--pz-serif); font-size:44px; font-weight:600; letter-spacing:-.035em; line-height:1.24; }
.prdcpz .gvdt_farm .gf_region{ font-size:13px; font-weight:600; letter-spacing:.06em; margin-top:12px; }
/* 히어로 사진 바로 아래에 섹션 라벨이 붙어 답답해 보인다 → 본문 시작 여백 확보 */
.prdcpz .gvdt_farm .gf_body{ padding:56px 0 0; max-width:820px; }
.prdcpz .gvdt_farm .gf_lead{ margin:52px 0 0; font-family:var(--pz-serif); font-size:25px; font-weight:500;
line-height:1.66; letter-spacing:-.025em; color:var(--pz-ink); }
.prdcpz .gvdt_farm .gf_facts{ margin:38px 0 0; padding:26px 28px; border:0; border-radius:0;
background:var(--pz-surface); border-left:2px solid var(--pz-gold-l); }
.prdcpz .gvdt_farm .gf_facts_t{ padding:0; border:0; border-radius:0; background:none;
font-size:11.5px; font-weight:700; letter-spacing:.16em; color:var(--pz-gold); }
.prdcpz .gvdt_farm .gf_facts li{ font-size:15px; line-height:1.9; color:var(--pz-ink-soft); }
.prdcpz .gvdt_farm .gf_facts li:before{ background:var(--pz-gold-l); }
.prdcpz .gvdt_farm .gf_quote{ margin:44px 0 0; padding:36px 30px 32px 30px; text-align:center;
border:0; border-top:1px solid var(--pz-line); border-bottom:1px solid var(--pz-line);
border-radius:0; background:none;
font-family:var(--pz-serif); font-size:23px; font-weight:500; line-height:1.68;
letter-spacing:-.02em; color:var(--pz-ink); }
.prdcpz .gvdt_farm .gf_quote:before{ left:50%; top:2px; transform:translateX(-50%);
font-size:52px; color:var(--pz-gold-l); }
/* ── ② 상세: 스토리 = 풀 매거진 (v1.2.0 / 2026-08-07) ─────────────
창A '입력 표준 + 렌더 설계' 핸드오프 §3-1. 서버측 SUBSTR 캡을 없애 전문이 내려오므로
길이 제어는 여기(max-height 접기)에서만 한다. 본문 680px / 사진 760px = 사진이 글보다 넓다.
접힘 높이는 v1.1.0 의 210px 에서 크게 올린다 — 전용 페이지는 '읽으러 온 화면'이라
첫 장(章)이 통째로 보이고 나서 이어 읽기 버튼이 나와야 한다. */
.prdcpz .gvdt_farm .gf_story{ margin:44px 0 0; max-height:820px; }
.prdcpz .gvdt_farm .gf_story:after{ height:120px;
background:linear-gradient(180deg,rgba(247,242,231,0) 0,var(--pz-paper) 86%); }
/* 펼쳤을 때는 overflow 를 풀어 준다 — 모바일 풀블리드 사진(.pzs_shot)이 접힘 박스에 잘리지 않게. */
.prdcpz .gvdt_farm .gf_story.is-open{ overflow:visible; }
.prdcpz .gvdt_farm .gf_story_in{ max-width:680px; font-size:17px; line-height:1.98; color:var(--pz-ink-soft);
counter-reset:pzsCh; }
.prdcpz .gvdt_farm .gf_story_in p{ margin:0 0 20px; }
/* 장(챕터) 제목 — 번호 눈썹(01·02…)은 CSS counter 가 붙인다(마크업은 그대로). */
.prdcpz .gvdt_farm .gf_story_in h4{ position:relative; counter-increment:pzsCh;
margin:56px 0 18px; padding-top:22px; border-top:1px solid var(--pz-line-soft);
font-family:var(--pz-serif); font-size:27px; font-weight:600; line-height:1.4;
letter-spacing:-.03em; color:var(--pz-ink); word-break:keep-all; }
.prdcpz .gvdt_farm .gf_story_in h4:before{ content:counter(pzsCh,decimal-leading-zero);
display:block; margin-bottom:12px; font-family:inherit; font-size:12px; font-weight:800;
letter-spacing:.16em; color:var(--pz-gold); }
.prdcpz .gvdt_farm .gf_story_in h4:first-child{ margin-top:0; padding-top:0; border-top:0; }
/* 팩트박스 → 칩 그리드. 마크업은 JS 가
한눈에 보기… 에서 만들어 준다. */
.prdcpz .gvdt_farm .pzs_facts{ margin:0 0 44px; padding:26px 28px 22px;
background:var(--pz-surface); border-left:2px solid var(--pz-gold-l); }
.prdcpz .gvdt_farm .pzs_facts_t{ display:block; margin:0 0 14px;
font-size:11.5px; font-weight:700; letter-spacing:.16em; color:var(--pz-gold); }
.prdcpz .gvdt_farm .pzs_facts ul{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px 22px; margin:0; padding:0; list-style:none; }
.prdcpz .gvdt_farm .pzs_facts li{ position:relative; padding:0 0 0 16px;
font-size:14.5px; line-height:1.7; font-weight:600; color:var(--pz-ink); word-break:keep-all; }
.prdcpz .gvdt_farm .pzs_facts li:before{ content:''; position:absolute; left:0; top:11px;
width:5px; height:5px; border-radius:50%; background:var(--pz-gold-l); }
/* 인용 카드 — 왼쪽 큰 따옴표 + 옅은 바탕, 발화자는 우측 정렬. */
.prdcpz .gvdt_farm .pzs_quote{ position:relative; margin:34px 0; padding:26px 26px 22px 58px;
background:var(--pz-surface); border-left:2px solid var(--pz-line);
font-family:var(--pz-serif); font-size:19px; font-weight:500; line-height:1.72;
letter-spacing:-.02em; color:var(--pz-ink); word-break:keep-all; }
.prdcpz .gvdt_farm .pzs_quote:before{ content:'\201C'; position:absolute; left:20px; top:14px;
font-family:Georgia,serif; font-size:46px; line-height:1; color:var(--pz-gold-l); }
.prdcpz .gvdt_farm .pzs_quote .pzs_by{ display:block; margin-top:14px; text-align:right;
font-family:inherit; font-size:13px; font-weight:700; letter-spacing:-.01em; color:var(--pz-muted); }
/* 챕터 사이에 끼워 넣은 사진 — 본문(680)보다 넓게(760). 오른쪽으로만 넓혀 왼쪽 기준선은 유지. */
.prdcpz .gvdt_farm .gf_story_in .pzs_shot{ margin:38px 0 42px; width:760px; max-width:100%;
overflow:hidden; background:#e7e0d0; }
.prdcpz .gvdt_farm .gf_story_in .pzs_shot img{ display:block; width:100%; margin:0;
aspect-ratio:16/9; object-fit:cover; border-radius:0; }
.prdcpz .gvdt_farm .gf_more{ margin-top:22px; border:1px solid var(--pz-line); border-radius:0;
background:none; color:var(--pz-ink); font-weight:700; letter-spacing:-.01em; }
.prdcpz .gvdt_farm .gf_more:hover{ border-color:var(--pz-gold); color:var(--pz-gold); background:var(--pz-surface); }
.prdcpz .gvdt_farm .gf_gallery{ margin-top:44px; }
.prdcpz .gvdt_farm .gf_gitem img{ border-radius:0; }
/* ── ② 상세: 구매 모듈 머리줄 (감성 존 → 구매 존 이음) ─────────── */
.prdcpz .prdcz_shop{ margin-top:82px; padding-top:56px; padding-bottom:60px; background:var(--pz-surface);
border-top:1px solid var(--pz-line); }
.prdcpz .prdcz_shop_in{ max-width:1144px; margin:0 auto; }
.prdcpz .prdcz_shop_head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 26px; }
.prdcpz .prdcz_shop_head h3{ margin:0; font-family:var(--pz-serif); font-size:30px; font-weight:600;
line-height:1.4; letter-spacing:-.03em; color:var(--pz-ink); word-break:keep-all; }
.prdcpz .prdcz_cnt{ display:inline-block; padding:0; border:0; border-radius:0; background:none;
font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--pz-gold); }
/* 구매 카드(.dcz)는 커머스 문법 그대로. 링크 영역만 늘려 담기 버튼 라인을 맞춘다(카드 수십 개라 어긋남이 보임). */
.prdcpz .dcz .dcz-link{ display:flex; flex-direction:column; flex:1 1 auto; }
.prdcpz .dcz .dcz-link .body{ flex:1 1 auto; }
/* ── 빈 상태 / 미등록 안내 ────────────────────────────────────── */
.prdcpz .prdcz_empty,
.prdcpz .prdcz_notfound{ margin:8px 0 0; padding:52px 24px 48px; text-align:center;
background:var(--pz-surface); border:0; border-top:1px solid var(--pz-line); border-radius:0; }
.prdcpz .pe_t,
.prdcpz .pnf_t{ margin:0; font-family:var(--pz-serif); font-size:23px; font-weight:600;
letter-spacing:-.025em; color:var(--pz-ink); }
.prdcpz .pe_d,
.prdcpz .pnf_d{ margin:12px 0 0; font-size:15px; line-height:1.85; color:var(--pz-ink-soft); word-break:keep-all; }
.prdcpz .pe_btn,
.prdcpz .pnf_btn{ display:inline-flex; align-items:center; justify-content:center;
margin-top:24px; min-height:48px; padding:12px 26px; box-sizing:border-box;
border:1px solid var(--pz-gold); border-radius:0; background:none; color:var(--pz-gold);
font-size:14.5px; font-weight:700; letter-spacing:-.01em; text-decoration:none; transition:all .2s; }
.prdcpz .pe_btn:hover,
.prdcpz .pnf_btn:hover{ background:var(--pz-gold); color:#fffdf7; }
/* ── 되돌아가기 ───────────────────────────────────────────────── */
.prdcpz .prdcz_back{ margin:40px 0 0; }
.prdcpz .prdcz_back a{ display:inline-flex; align-items:center; min-height:48px; padding:12px 20px;
box-sizing:border-box; border:0; border-bottom:1px solid var(--pz-line); border-radius:0; background:none;
color:var(--pz-ink-soft); font-size:14px; font-weight:700; letter-spacing:-.01em; text-decoration:none; }
.prdcpz .prdcz_back a:hover{ color:var(--pz-gold); border-bottom-color:var(--pz-gold); background:none; }
/* ── 반응형 ───────────────────────────────────────────────────── */
@media (max-width:1100px){
.prdcpz .prdcz_grid{ grid-template-columns:repeat(2,1fr); gap:38px 24px; }
.prdcpz .pz_title{ font-size:44px; }
.prdcpz .pz_intro_grid{ gap:44px; }
.prdcpz .pz_h2{ font-size:33px; }
}
@media (max-width:860px){
.prdcpz .gvdt_wrap{ padding-bottom:60px; }
.prdcpz .pz_hero{ margin-top:4px; }
.prdcpz .pz_hero:before{ background:linear-gradient(0deg,rgba(11,26,19,.94) 0,rgba(18,33,25,.68) 58%,rgba(17,28,23,.42) 100%); }
.prdcpz .pz_hero_in{ padding-top:58px; padding-bottom:44px; }
.prdcpz .pz_eyebrow{ margin-bottom:14px; font-size:10.5px; letter-spacing:.18em; }
.prdcpz .pz_title{ font-size:31px; line-height:1.3; }
.prdcpz .pz_lead{ margin-top:18px; font-size:15px; line-height:1.8; }
.prdcpz .pz_intro{ padding-top:48px; }
.prdcpz .pz_intro_grid{ grid-template-columns:1fr; gap:22px; }
.prdcpz .pz_h2{ font-size:26px; }
.prdcpz .pz_intro_txt p{ font-size:15px; line-height:1.92; margin-bottom:16px; }
.prdcpz .pz_quote{ margin-top:44px; padding:48px 6px 34px; }
.prdcpz .pz_quote blockquote{ font-size:20px; line-height:1.6; }
.prdcpz .pz_quote:before{ font-size:46px; }
.prdcpz .pz_stories{ padding-top:52px; }
.prdcpz .pz_shead{ display:block; margin-bottom:30px; }
.prdcpz .pz_shead_r{ max-width:none; margin:14px 0 0; text-align:left; }
.prdcpz .pz_shead_r p{ font-size:14px; line-height:1.8; }
.prdcpz .pz_label{ margin-bottom:18px; }
/* 생산자 찾기 — 모바일은 폭 전체, 라벨은 숨기고 placeholder 가 역할을 대신한다 */
.prdcpz .pz_find{ margin:0 0 26px; }
.prdcpz .pz_find_box{ max-width:none; }
.prdcpz .pz_find_in{ height:52px; font-size:16px; }
.prdcpz .pz_find_stat{ font-size:13.5px; }
.prdcpz .pz_find_empty{ padding:40px 16px; }
.prdcpz .pz_find_empty .pfe_t{ font-size:18px; }
.prdcpz .pz_find_empty .pfe_d{ font-size:14px; }
.prdcpz .prdcz_grid{ grid-template-columns:repeat(2,1fr); gap:30px 16px; }
.prdcpz .pc_body{ padding:14px 0 0; }
.prdcpz .pc_nm{ font-size:18px; margin-top:9px; }
.prdcpz .pc_region{ font-size:10.5px; letter-spacing:.1em; }
.prdcpz .pc_rel{ font-size:13.5px; line-height:1.75; margin-top:10px; }
.prdcpz .pc_foot{ margin-top:14px; padding-top:12px; }
.prdcpz .pc_go{ display:none; } /* 좁은 폭에선 종수만 — 카드 전체가 링크라 동작 동일 */
.prdcpz .pz_close{ margin-top:58px; padding-top:52px; padding-bottom:52px; }
.prdcpz .pz_close h3{ font-size:25px; }
.prdcpz .pz_close p{ font-size:14.5px; }
/* 상세 */
.prdcpz .gvdt_farm .gf_hero{ margin-top:4px; }
.prdcpz .gvdt_farm .gf_hero img{ aspect-ratio:16/10; }
.prdcpz .gvdt_farm .gf_hero_cap{ padding-bottom:22px; }
.prdcpz .gvdt_farm .gf_head_plain{ margin-top:4px; padding-top:44px; padding-bottom:38px; }
.prdcpz .gvdt_farm .gf_nm{ font-size:29px; }
.prdcpz .gvdt_farm .gf_body{ padding-top:34px; }
.prdcpz .gvdt_farm .gf_lead{ margin-top:26px; font-size:19px; line-height:1.7; }
.prdcpz .gvdt_farm .gf_facts{ margin-top:28px; padding:20px 18px; }
.prdcpz .gvdt_farm .gf_quote{ margin-top:32px; padding:30px 6px 26px; font-size:18px; }
.prdcpz .gvdt_farm .gf_quote:before{ font-size:44px; }
/* 스토리(모바일) — 창A 핸드오프 §3-1-6: 본문 17px/행간 1.9, 챕터 사이 40px+, 사진 풀블리드 */
.prdcpz .gvdt_farm .gf_story{ margin-top:32px; max-height:640px; }
.prdcpz .gvdt_farm .gf_story_in{ max-width:none; font-size:17px; line-height:1.9; }
.prdcpz .gvdt_farm .gf_story_in p{ margin-bottom:18px; }
.prdcpz .gvdt_farm .gf_story_in h4{ margin:44px 0 16px; padding-top:20px; font-size:22px; }
.prdcpz .gvdt_farm .gf_story_in h4:before{ margin-bottom:9px; font-size:11px; }
.prdcpz .gvdt_farm .pzs_facts{ margin-bottom:34px; padding:20px 18px 17px; }
.prdcpz .gvdt_farm .pzs_facts ul{ grid-template-columns:1fr; gap:8px; }
.prdcpz .gvdt_farm .pzs_facts li{ font-size:14px; }
.prdcpz .gvdt_farm .pzs_quote{ margin:26px 0; padding:22px 18px 18px 44px; font-size:17px; }
.prdcpz .gvdt_farm .pzs_quote:before{ left:14px; top:12px; font-size:38px; }
/* 사진 풀블리드 — .gf_story 는 접힘 때 overflow:hidden 이라 잘리지만, 펼치면 is-open 이 visible 로 푼다. */
.prdcpz .gvdt_farm .gf_story_in .pzs_shot{ margin:30px 0 32px; width:100vw; max-width:100vw;
margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.prdcpz .gvdt_farm .gf_story_in .pzs_shot img{ aspect-ratio:4/3; }
.prdcpz .prdcz_shop{ margin-top:52px; padding-top:40px; padding-bottom:44px; }
.prdcpz .prdcz_shop_head h3{ font-size:22px; }
.prdcpz .prdcz_empty,
.prdcpz .prdcz_notfound{ padding:40px 16px 36px; }
.prdcpz .pe_t,
.prdcpz .pnf_t{ font-size:19px; }
}
/* ── 큰글씨(돋보기 html.font_big / OS 글자확대 body.dcbig) ────────
2열에서 생산자명·관계문이 잘리므로 1열 가로형으로 전환(dure_card.css v1.4 관례와 동일 취지). */
html.font_big .prdcpz .prdcz_grid,
body.dcbig .prdcpz .prdcz_grid{ grid-template-columns:1fr; gap:26px; }
html.font_big .prdcpz .prdcz_card,
body.dcbig .prdcpz .prdcz_card{ flex-direction:row; align-items:flex-start; gap:16px; }
html.font_big .prdcpz .pc_thumb,
html.font_big .prdcpz .pc_palette,
body.dcbig .prdcpz .pc_thumb,
body.dcbig .prdcpz .pc_palette{ flex:0 0 132px; width:132px; aspect-ratio:1/1; }
html.font_big .prdcpz .pc_thumb img,
body.dcbig .prdcpz .pc_thumb img{ height:100%; aspect-ratio:1/1; }
html.font_big .prdcpz .pc_body,
body.dcbig .prdcpz .pc_body{ padding:0; }
html.font_big .prdcpz .pc_rel,
body.dcbig .prdcpz .pc_rel{ -webkit-line-clamp:3; }
html.font_big .prdcpz .pc_go,
body.dcbig .prdcpz .pc_go{ display:none; }
html.font_big .prdcpz .pz_title,
body.dcbig .prdcpz .pz_title{ font-size:30px; }
html.font_big .prdcpz .pz_hero_in,
body.dcbig .prdcpz .pz_hero_in{ padding-top:48px; padding-bottom:40px; }
html.font_big .prdcpz .pz_quote blockquote,
body.dcbig .prdcpz .pz_quote blockquote{ font-size:20px; }
html.font_big .prdcpz .gvdt_farm .gf_nm,
body.dcbig .prdcpz .gvdt_farm .gf_nm{ font-size:28px; }
html.font_big .prdcpz .gvdt_farm .gf_lead,
body.dcbig .prdcpz .gvdt_farm .gf_lead{ font-size:19px; }
/* ═══════════════════════════════════════════════════════════════════════
v1.3.0 (2026-08-07) — **짧은 콘텐츠(1,200자급) 최적화**
-----------------------------------------------------------------------
배경 : 창A가 48명 전원을 1,000~1,400자 단일 챕터로 축약(08-07 18:22).
이 페이지는 4,600자 장문 전제로 짜여 있어, 짧은 글에서는
① 접힘·더보기가 무의미하게 붙고 ② 번호 눈썹 '01'이 딱 하나만 떠 어색하고
③ 갤러리 인터리브가 발동하지 않아 하단에 사진이 밋밋하게 나열된다.
원칙 : 콘텐츠는 주어진 것으로 받고 **표현으로 완성도를 올린다**.
크림·세리프 매거진 무드 유지 · 딥그린 절제 · 50~60대 모바일 가독성.
═════════════════════════════════════════════════════════════════════ */
/* ① 접힘 임계 상향 — 1,200자급은 '전문 노출'이 맞다.
실측 : 본문 실높이 PC 878~979px / MO 1308~1470px.
임계를 넘겨 두면 producer_intro.js 가 스스로 더보기를 감춘다
(scrollHeight <= clientHeight+4 → .gf_more_hide). 장문이 오면 다시 접힌다. */
.prdcpz .gvdt_farm .gf_story{ max-height:20000px; } /* v1.5.0 2026-08-09 창A surgical: 웹진 6챕터 전문 노출(매거진은 접지 않는다) */
/* ② 챕터가 하나뿐이면 번호 눈썹을 감춘다 — '01' 만 덩그러니 뜨는 어색함 제거.
두 개 이상이면 기존 번호 체계 그대로(:only-of-type 이 알아서 갈린다). */
.prdcpz .gvdt_farm .gf_story_in h4:only-of-type:before{ content:none; }
.prdcpz .gvdt_farm .gf_story_in h4:only-of-type{ padding-top:0; border-top:0; }
/* ③ 히어로 스크림 보강 — 비닐하우스처럼 밝은 사진 위에서 흰 텍스트가 묻혔다.
하단부 농도만 올리고 상단은 그대로 둬 사진을 가리지 않는다. */
.prdcpz .gvdt_farm .gf_hero:after{ height:82%;
background:linear-gradient(0deg,rgba(9,22,16,.94) 0,rgba(12,24,18,.62) 38%,rgba(12,24,18,.24) 68%,rgba(0,0,0,0) 100%); }
.prdcpz .gvdt_farm .gf_hero_cap .gf_eyebrow{ text-shadow:0 1px 3px rgba(0,0,0,.45); }
.prdcpz .gvdt_farm .gf_hero_cap h2,
.prdcpz .gvdt_farm .gf_hero_cap .gf_region{ text-shadow:0 2px 6px rgba(0,0,0,.5); }
/* ④ 갤러리 매거진풍(PC) — 첫 장을 2×2 로 키운 에디토리얼 그리드.
인터리브가 못 도는 짧은 글에서 사진이 '나열'이 아니라 '지면'이 되게. */
@media (min-width:1025px){
.prdcpz .gvdt_farm .gf_gallery{
display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:14px;
}
.prdcpz .gvdt_farm .gf_gitem{ margin:0; overflow:hidden; }
.prdcpz .gvdt_farm .gf_gitem:first-child{ grid-column:span 2; grid-row:span 2; }
.prdcpz .gvdt_farm .gf_gitem img{ width:100%; height:100%; object-fit:cover; display:block; }
}
/* ⑤ 인용 카드 — 짧은 글에서 존재감을 키운다(관계문 1줄이 페이지의 훅). */
.prdcpz .gvdt_farm .gf_quote{ font-family:var(--pz-serif); }
/* ⑥ 모바일 가독성(50~60대) — 본문 17→17.5px, 행간 1.9→2.0, 문단 간격 확대.
갤러리는 첫 장을 크게 해 스와이프 시작점을 분명히 한다. */
@media (max-width:1024px){
.prdcpz .gvdt_farm .gf_story{ max-height:24000px; } /* v1.5.0 창A surgical */
.prdcpz .gvdt_farm .gf_story_in{ font-size:17.5px; line-height:2.0; }
.prdcpz .gvdt_farm .gf_story_in p{ margin-bottom:22px; }
.prdcpz .gvdt_farm .gf_gitem:first-child{ flex-basis:82%; }
/* 터치 44px 하한 — 더보기·전체보기 버튼 */
.prdcpz .gvdt_farm .gf_more{ min-height:44px; }
}
/* ═══════════════════════════════════════════════════════════════════════
v1.4.0 (2026-08-07) — PC 본문 쏠림 교정 + 매거진 리듬 재설계
-----------------------------------------------------------------------
[진단] 조합원 지적 "본문이 한쪽으로 치우친다" — 실측으로 원인 확정.
`.gf_body`는 max-width:820px 인데 **auto 마진이 없어 좌측에 붙어 있었다**.
1440 : 좌여백 148 / 우여백 472 (324px 차이)
1280 : 좌여백 68 / 우여백 392 (324px 차이)
반면 갤러리(.gf_gallery 1084px)만 중앙이라 대비가 더 도드라졌다.
[처방] 모든 열을 중앙으로 모으고, **폭을 3단으로 벌려 리듬**을 만든다.
사진 1084 > 본문블록 820 > 읽는 줄 720
좁은 글줄 + 넓은 사진 = 잡지 지면의 기본 문법. 여백이 '빈 곳'이 아니라 '숨'이 된다.
═════════════════════════════════════════════════════════════════════ */
@media (min-width:1025px){
/* ① 쏠림 교정 — 본문 블록 중앙 정렬(직접 원인) */
.prdcpz .gvdt_farm .gf_body{ margin-left:auto; margin-right:auto; }
/* ② 읽는 줄 720px 중앙 — 680 은 820 안에서 또 좌측에 붙었다 */
.prdcpz .gvdt_farm .gf_story_in{ max-width:720px; margin-left:auto; margin-right:auto; }
/* ③ 팩트박스·인용도 같은 축으로 */
.prdcpz .gvdt_farm .gf_facts,
.prdcpz .gvdt_farm .gf_quote,
.prdcpz .gvdt_farm .gf_lead{ margin-left:auto; margin-right:auto; }
/* ④ 사진은 글보다 넓게 — 3단 리듬의 바깥층 */
.prdcpz .gvdt_farm .gf_gallery{ max-width:1084px; margin-left:auto; margin-right:auto; }
/* ⑤ 도입부 리드문 = 세리프로 키워 '기사 첫 문단'의 무게를 준다 */
.prdcpz .gvdt_farm .gf_lead{
max-width:820px; font-family:var(--pz-serif); font-size:23px; line-height:1.78;
color:var(--pz-ink); letter-spacing:-.015em;
}
/* ⑥ 섹션 리듬 — 블록 사이 숨통을 넓혀 '읽는 페이지'로 */
.prdcpz .gvdt_farm .gf_facts{ margin-top:40px; }
.prdcpz .gvdt_farm .gf_quote{ margin-top:48px; margin-bottom:48px; }
.prdcpz .gvdt_farm .gf_story{ margin-top:48px; }
.prdcpz .gvdt_farm .gf_gallery{ margin-top:60px; }
/* ⑦ 히어로를 더 시원하게(21:9 → 16:7) */
.prdcpz .gvdt_farm .gf_hero img{ aspect-ratio:16/7; }
}
/* 모바일 — 리드문만 같은 위계로(폭은 원래 풀블리드라 쏠림 없음) */
@media (max-width:1024px){
.prdcpz .gvdt_farm .gf_lead{ font-family:var(--pz-serif); font-size:19.5px; line-height:1.72; color:var(--pz-ink); }
.prdcpz .gvdt_farm .gf_quote{ margin-top:36px; margin-bottom:36px; }
}
/* ═══════════════════════════════════════════════════════════════════════
v1.5.3 (2026-08-20) — 상단 히어로 콤팩트 배너화 (조합원 '히어로가 너무 커서 부담')
-----------------------------------------------------------------------
[원인] 상세 히어로(.gvdt_farm .gf_hero)는 풀블리드(margin: calc(50%-50vw))라 폭 = 100vw.
이미지 높이를 aspect-ratio 로만 잡아(16/7·21/9·16/10) 넓은 화면일수록 높이가 폭 비례로 커진다.
1920 화면 : 100vw × 7/16 ≈ 840px ← '부담'의 실체
1440 화면 : ≈ 630px
[처방] aspect-ratio 대신 height 를 clamp 로 직접 눌러 콤팩트 배너로 만든다.
폭은 100vw 유지, 높이만 캡 → object-fit:cover(base goods_view_rd)가 알아서 크롭.
캡션(.gf_hero_cap)은 하단 절대배치라 높이와 무관하게 유지 = 생산자명·지역 가독 유지.
[범위] prdcNo 무관 = 모든 생산자 상세 히어로에 공용 적용(개별 처리 아님).
소스 순서상 이 규칙이 위 227/405/556 aspect-ratio 를 이긴다(동일 특정성, 뒤가 승).
스토리 본문·팩트박스·갤러리 등 다른 섹션은 무접촉.
═════════════════════════════════════════════════════════════════════ */
.prdcpz .gvdt_farm .gf_hero img{ aspect-ratio:auto; height:clamp(200px, 26vw, 340px); }
@media (max-width:860px){
.prdcpz .gvdt_farm .gf_hero img{ height:clamp(160px, 42vw, 210px); }
}