@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════
   생산자 소개 레이어팝업 (2026-08-05 신설) — v1.0.0
   리스트/카드의 거래처명(.farmer / .pc_farmer / .rc_farmer / .gcard-farmer / .pb-farmer)을 클릭하면
   생산자 소개를 레이어로 띄운다. 마크업은 producer_intro.js 가 body 끝에 1회 주입(JSP 무수정).
   · 스코프 = .prdcz(팝업 루트) + .prdc-link(클릭가능 표시가 붙은 거래처명). 그 밖의 셀렉터를 쓰지 않으므로
     소개 미등록 생산자·미적용 화면은 CSS 로도 전혀 영향받지 않는다.
   · PC(.prdcz_pc) = 센터 모달 / 모바일(.prdcz_mo) = 바텀시트. 터치 타깃 44px 하한.
   · 인라인 스타일 금지 원칙 준수 — 모든 시각 요소는 이 파일에만.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ① 카드의 거래처명: 소개가 등록된 생산자만 '클릭가능' 표시 ────────────────
   기존 색/크기/줄임(ellipsis)은 각 화면 CSS 그대로 두고, 밑줄·커서·물음표 아이콘만 덧입힌다.
   (폰트크기·색을 건드리면 화면마다 다른 카드 스케일이 깨지므로 의도적으로 미지정) */
.prdc-link{ cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px; text-decoration-thickness:1px; -webkit-text-decoration-color:rgba(61,96,65,.55); text-decoration-color:rgba(61,96,65,.55); }
.prdc-link:hover{ -webkit-text-decoration-color:#3D6041; text-decoration-color:#3D6041; }
.prdc-link::after{ content:""; display:inline-block; width:12px; height:12px; margin-left:3px; vertical-align:-1px; flex:none;
	background:no-repeat center/12px 12px 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='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8.4h.01'/%3E%3C/svg%3E"); }

/* 산지 뱃지(2026-08-07, `?sanji=1` 게이트 — 기본 OFF) — 저강조 칩.
   ★ .prdc-link::after(물음표 아이콘) '뒤'에 와야 한다 — 같은 특정도(0,1,1)라 뒤에 온 쪽이 이긴다.
     앞에 두면 아이콘이 안 꺼져 칩 안에 물음표가 같이 찍힌다(2026-08-07 실측).
   ★ 칩은 거래처명의 형제로 삽입된다(JS). 카드 이름줄이 max-width+ellipsis 한 줄이라
     안에 넣으면 잘려 보이지 않기 때문. 대신 이름이 그만큼 더 줄어드는 트레이드오프가 있다. */
.prdc-badged{ text-decoration:none; }
.prdc-badged::after{ display:none; }
.prdc-badge{ display:inline-block; flex:0 0 auto; align-self:center; margin-left:5px; padding:1px 6px; vertical-align:1px;
	border:1px solid rgba(61,96,65,.35); border-radius:999px; background:transparent;
	font-size:10.5px; font-weight:700; line-height:1.5; color:#3D6041; letter-spacing:-.02em; white-space:nowrap;
	text-decoration:none; cursor:pointer; }
.prdc-badge::after{ display:none; }
.prdc-badge:hover{ border-color:#3D6041; background:rgba(61,96,65,.06); }

/* ── ② 오버레이 ───────────────────────────────────────────────────────── */
.prdcz{ position:fixed; left:0; top:0; right:0; bottom:0; z-index:10050; display:none; }
.prdcz.is-open{ display:block; }
.prdcz_dim{ position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(20,26,20,.52); }
body.prdc-lock{ overflow:hidden; }

/* ── ③ 패널 공통 ──────────────────────────────────────────────────────── */
.prdcz_panel{ position:absolute; background:#fff; overflow:hidden; display:flex; flex-direction:column;
	box-shadow:0 18px 48px rgba(0,0,0,.28); }
.prdcz_scroll{ overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1 1 auto; }

/* PC = 센터 모달 */
.prdcz_pc .prdcz_panel{ left:50%; top:50%; transform:translate(-50%,-50%); width:520px; max-width:calc(100% - 40px); max-height:86vh; border-radius:18px; }
/* 모바일 = 바텀시트 */
.prdcz_mo .prdcz_panel{ left:0; right:0; bottom:0; width:100%; max-height:88vh; border-radius:18px 18px 0 0; }
.prdcz_mo .prdcz_panel::before{ content:""; position:absolute; left:50%; top:8px; width:40px; height:4px; margin-left:-20px; border-radius:2px; background:rgba(255,255,255,.75); z-index:3; }
.prdcz_mo.prdcz_noimg .prdcz_panel::before{ background:#d8ded6; }

/* 닫기 버튼 — 터치 44px */
.prdcz_x{ position:absolute; right:8px; top:8px; z-index:4; width:44px; height:44px; padding:0; border:0; border-radius:50%;
	background:rgba(0,0,0,.42); color:#fff; font-size:22px; line-height:44px; cursor:pointer; }
.prdcz_x:hover{ background:rgba(0,0,0,.6); }
.prdcz_noimg .prdcz_x{ background:rgba(0,0,0,.3); }

/* ── ④ 히어로(대표사진 + 이름·지역) ───────────────────────────────────── */
.prdcz_hero{ position:relative; margin:0; }
.prdcz_hero img{ display:block; width:100%; height:200px; object-fit:cover; }
.prdcz_mo .prdcz_hero img{ height:172px; }
.prdcz_cap{ position:absolute; left:0; right:0; bottom:0; padding:36px 18px 14px; color:#fff;
	background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.62) 62%, rgba(0,0,0,.76) 100%); }
/* 사진 없는 생산자 = 딥그린 헤더로 대체(상세 sec-farm gf_head_plain 과 동일 톤) */
.prdcz_head_plain{ padding:24px 18px 18px; background:linear-gradient(135deg,#3D6041 0%,#2b4a30 100%); color:#fff; }
.prdcz_eyebrow{ display:block; font-size:12px; font-weight:800; letter-spacing:.08em; opacity:.85; margin-bottom:4px; }
.prdcz_nm{ margin:0; font-size:21px; font-weight:800; line-height:1.3; word-break:keep-all; }
.prdcz_region{ display:inline-flex; align-items:center; gap:4px; margin-top:6px; font-size:13px; font-weight:600; opacity:.92; }

/* ── ⑤ 본문 ───────────────────────────────────────────────────────────── */
.prdcz_body{ padding:16px 18px 4px; }
.prdcz_quote{ margin:0 0 12px; padding:11px 13px; border-left:3px solid #3D6041; border-radius:0 8px 8px 0; background:#f2f6f0;
	font-size:14px; font-weight:700; line-height:1.55; color:#33452f; word-break:keep-all; }
.prdcz_lead{ margin:0 0 10px; font-size:14.5px; line-height:1.62; color:#3a403a; word-break:keep-all; }
.prdcz_story{ margin:0 0 4px; font-size:13.5px; line-height:1.65; color:#6b716a; word-break:keep-all; }

/* ── ⑥ 액션 ───────────────────────────────────────────────────────────── */
.prdcz_act{ flex:none; display:flex; gap:8px; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid #ecefe9; background:#fff; }
/* 2026-08-09 v1.2.0 — .prdcz_more 가 <button> 에서 <a href> 로 바뀌었다(생산자 전용 상세 실주소).
   앵커는 인라인이라 min-height 만으로는 글자가 위로 붙는다 → inline-flex 로 수직 중앙 + 밑줄 제거.
   색·크기·터치영역(44px)은 종전 그대로라 시각 변화는 없다. */
.prdcz_more{ flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center;
	min-height:44px; padding:0 14px; border:0; border-radius:10px; background:#3D6041; color:#fff;
	font-size:15px; font-weight:800; line-height:1.2; text-align:center; text-decoration:none; cursor:pointer; }
.prdcz_more:hover,
.prdcz_more:focus{ background:#33522f; color:#fff; text-decoration:none; }
.prdcz_close2{ flex:0 0 auto; min-width:88px; min-height:44px; padding:0 14px; border:1px solid #d5dbd2; border-radius:10px; background:#fff;
	color:#4f554b; font-size:15px; font-weight:700; cursor:pointer; }

/* ── ⑦ [자리 예약] 응원하기 — 마크업만 존재, 기능은 차기 단위 ─────────────
   차기 개발 시 아래 display:none 한 줄만 제거하고 버튼의 disabled 를 풀면 노출된다. */
.prdcz_cheer{ display:none; padding:0 18px 12px; }
.prdcz_cheer button{ width:100%; min-height:44px; border:1px dashed #c9d2c6; border-radius:10px; background:#fff; color:#8a908a;
	font-size:14px; font-weight:700; cursor:default; }

/* ── ⑧ 로딩/빈 상태 ───────────────────────────────────────────────────── */
.prdcz_loading{ padding:44px 18px; text-align:center; font-size:14px; color:#8a908a; }