@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════════
   producer_band.css — 메인 '생산자 모아보기' 띠배너 · v2.0.0

   대상 = include/comm/producerBandComm.jsp (PC main_home.jsp · 모바일 main_home_rd.jsp 공용)
   스코프 = .pzband 전용. 메인 CSS(style_v2 / main_rd.css)를 일절 건드리지 않는다.

   ── 연혁 ──────────────────────────────────────────────────────────────────
   v1.0.0 (08-07) 2단 분할 카드(사진 44% | 크림패널 56%)
   v1.1.0 (08-09) 메인 띠배너 공통 문법으로 재정합(풀블리드 사진 + 스크림)
   v1.2.0 (08-09) 인물 사진 후보 교체(?pzimg 비교 게이트)
   v2.0.0 (08-09) ★ **타이포 색면 정식 전환** — 사용자 확정 "타이포 색면으로 운영 반영"
     ─ 배경: 인물 사진안은 두 차례(석양 역광 → 밝은 인물컷) 모두 반려됐다.
       "사람 이미지 말고 다른 방식으로. 둘 다 별로야."
     ─ 확정안: **사진을 아예 쓰지 않는다.** 크림 색면 + 세리프 카피 + 라인 모티프.
       · 모티프(벼 이삭) = CSS 데이터URI 인라인 SVG. **이미지 파일 의존 0** —
         업로드 경로·용량·계절 노후화 문제가 원천적으로 생기지 않는 상시 배너가 된다.
       · 모티프는 콘텐츠 열 오른쪽 끝에 절제해 놓고 위로 흘려보낸다. **카피가 주인공.**
         (강도는 사용자 지시로 현행 절제 유지 — opacity PC .30 / MO .26)
     ─ 함께 제거: `?bandv` 시안 게이트 · `?pzimg` 사진 후보 게이트 · 정물 시안(.pzb--v2)
       · `.pzb__scrim`(사진이 없으니 스크림도 없다). 죽은 규칙을 남기지 않는다.
     ─ 초대 배너(invite_page.css 의 .ivband)와 **같은 구조 한 벌**이다.
       구조는 공유하고 색·모티프만 다르다 — 생산자=크림/웜브라운, 초대=딥그린/골드.
       한쪽을 고치면 다른 쪽도 같이 볼 것.

   ★ 상시 배너다 — 기간·시즌·주차 문구를 넣지 않는다.
   ★ .mrdz 버튼 리셋 함정 회피 — 이 배너에는 <button> 을 쓰지 않고 <a>/<span> 만 쓴다.
   ★ 인라인 스타일 금지.
   ═══════════════════════════════════════════════════════════════════════════ */

.pzband{
	--pzb-serif:"Noto Serif KR","Maru Buri","Nanum Myeongjo",serif;
	--pzb-paper:#f7f2e7;		/* 크림 지면 */
	--pzb-ink:#241a10;			/* 헤드라인 먹색 (크림 위 대비 13:1) */
	--pzb-gold:#8c6a29;			/* 아이브로우·강조·CTA 라인 (크림 위 대비 4.8:1) */
	--pzb-cta:#7a5b22;			/* CTA 글자 (크림 위 대비 5.6:1) */
	--pzb-sub:#5a5147;			/* 서브카피 (크림 위 대비 7.4:1) */
	display:block; margin:0 0 60px;		/* .ivband 와 같은 하단 여백 */
}

/* ★ 스코프 내 박스모델 고정 — 컴포넌트 자립.
   호출 화면(main_home / main_home_rd)이 전역 box-sizing 을 주지 않아,
   이게 없으면 모바일에서 .pzb__cta(width:100% + 좌우 padding)가 화면 밖으로 밀려난다. */
.pzband, .pzband *{ box-sizing:border-box; }

/* 밴드 본체 = 배너 전체가 한 덩어리 클릭 영역. 풀블리드, 상하 헤어라인으로만 구획. */
.pzband .pzb__link{
	position:relative; display:block; overflow:hidden; min-height:275px;
	text-decoration:none; background:var(--pzb-paper);
	border-top:1px solid rgba(140,106,41,.22);
	border-bottom:1px solid rgba(140,106,41,.22);
}

/* 색면 = 좌상단이 밝고 우하단으로 가라앉는 종이 결. 사진 없음. */
.pzband .pzb__bg{
	position:absolute; inset:0;
	background:radial-gradient(135% 165% at 6% -10%,#fffdf7 0,#f8f3e8 42%,#f0e7d5 78%,#e8dcc4 100%);
	background-color:var(--pzb-paper);
}

/* 모티프(벼 이삭) = 콘텐츠 열(1180px)의 오른쪽 끝에 맞춰 위로 흘려보낸다.
   inset:0 + max-width:1180 + margin:auto 로 본문과 같은 세로 기준선을 공유한다.
   SVG 를 데이터URI 로 직접 박아 이미지 파일 요청이 0건이다. */
.pzband .pzb__motif{
	position:absolute; inset:0; left:0; right:0;
	max-width:1180px; margin:0 auto; pointer-events:none;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 280' fill='none' stroke='%238c6a29' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M150,268 C146,210 132,150 112,92'/%3E%3Cpath d='M150,268 C120,214 92,168 58,128'/%3E%3Cpath d='M150,268 C176,206 182,142 176,66'/%3E%3Cpath d='M150,268 C126,246 104,236 78,232 C104,224 132,238 150,258'/%3E%3Cpath d='M150,268 C176,250 200,244 224,244 C202,232 172,240 150,258'/%3E%3Cpath d='M148.5,250.5 Q161.4,241.4 166.2,226.3 Q153.3,235.5 148.5,250.5 Z' stroke-width='1.6'/%3E%3Cpath d='M147.3,239.5 Q139.6,226.4 125.5,220.6 Q133.2,233.7 147.3,239.5 Z' stroke-width='1.6'/%3E%3Cpath d='M145.8,228.5 Q157.3,219.6 161.2,205.5 Q149.7,214.4 145.8,228.5 Z' stroke-width='1.6'/%3E%3Cpath d='M144.1,217.4 Q136.6,205.6 123.5,200.8 Q131.1,212.5 144.1,217.4 Z' stroke-width='1.6'/%3E%3Cpath d='M142.3,206.3 Q152.5,197.8 155.6,184.8 Q145.3,193.3 142.3,206.3 Z' stroke-width='1.6'/%3E%3Cpath d='M140.2,195.2 Q132.9,184.7 120.9,180.7 Q128.1,191.2 140.2,195.2 Z' stroke-width='1.6'/%3E%3Cpath d='M137.9,184 Q146.9,176 149.3,164.2 Q140.3,172.2 137.9,184 Z' stroke-width='1.6'/%3E%3Cpath d='M135.4,172.9 Q128.6,163.7 117.6,160.4 Q124.4,169.7 135.4,172.9 Z' stroke-width='1.6'/%3E%3Cpath d='M132.7,161.8 Q140.6,154.3 142.4,143.7 Q134.6,151.1 132.7,161.8 Z' stroke-width='1.6'/%3E%3Cpath d='M129.9,150.7 Q123.6,142.7 113.7,140.1 Q120,148.1 129.9,150.7 Z' stroke-width='1.6'/%3E%3Cpath d='M126.9,139.6 Q133.6,132.8 135,123.3 Q128.2,130.1 126.9,139.6 Z' stroke-width='1.6'/%3E%3Cpath d='M123.7,128.5 Q117.9,121.6 109.2,119.6 Q115,126.5 123.7,128.5 Z' stroke-width='1.6'/%3E%3Cpath d='M120.3,117.5 Q126.1,111.4 127,103.1 Q121.3,109.2 120.3,117.5 Z' stroke-width='1.6'/%3E%3Cpath d='M116.8,106.5 Q111.7,100.7 104.1,99.1 Q109.3,104.9 116.8,106.5 Z' stroke-width='1.6'/%3E%3Cpath d='M113.2,95.5 Q117.9,90.2 118.5,83.1 Q113.8,88.4 113.2,95.5 Z' stroke-width='1.6'/%3E%3Cpath d='M135.7,242.7 Q143.6,231.4 142.9,217.7 Q135.1,229 135.7,242.7 Z' stroke-width='1.6'/%3E%3Cpath d='M129.1,231.3 Q118.1,224.3 105.1,225.5 Q116.1,232.4 129.1,231.3 Z' stroke-width='1.6'/%3E%3Cpath d='M122.5,220.2 Q129.4,209.9 128.6,197.6 Q121.7,207.8 122.5,220.2 Z' stroke-width='1.6'/%3E%3Cpath d='M115.9,209.3 Q105.9,203.2 94.3,204.5 Q104.3,210.6 115.9,209.3 Z' stroke-width='1.6'/%3E%3Cpath d='M109.3,198.6 Q115.1,189.3 114.2,178.4 Q108.3,187.7 109.3,198.6 Z' stroke-width='1.6'/%3E%3Cpath d='M102.5,188.2 Q93.6,183.1 83.4,184.6 Q92.4,189.6 102.5,188.2 Z' stroke-width='1.6'/%3E%3Cpath d='M95.8,178 Q100.7,169.8 99.5,160.2 Q94.6,168.5 95.8,178 Z' stroke-width='1.6'/%3E%3Cpath d='M88.9,168.1 Q81,163.9 72.2,165.5 Q80.1,169.6 88.9,168.1 Z' stroke-width='1.6'/%3E%3Cpath d='M81.9,158.3 Q85.8,151.1 84.5,143 Q80.6,150.2 81.9,158.3 Z' stroke-width='1.6'/%3E%3Cpath d='M74.8,148.8 Q67.9,145.6 60.6,147.2 Q67.4,150.4 74.8,148.8 Z' stroke-width='1.6'/%3E%3Cpath d='M67.5,139.5 Q70.5,133.3 69.1,126.6 Q66.1,132.8 67.5,139.5 Z' stroke-width='1.6'/%3E%3Cpath d='M60,130.4 Q54.3,128 48.4,129.6 Q54.1,132 60,130.4 Z' stroke-width='1.6'/%3E%3Cpath d='M158.5,245.6 Q172.4,242.5 181.6,231.6 Q167.7,234.6 158.5,245.6 Z' stroke-width='1.6'/%3E%3Cpath d='M162.5,233.1 Q161.4,219.5 152.2,209.4 Q153.3,223 162.5,233.1 Z' stroke-width='1.6'/%3E%3Cpath d='M166,220.5 Q178.5,216.8 186.1,206.2 Q173.6,209.9 166,220.5 Z' stroke-width='1.6'/%3E%3Cpath d='M169,207.8 Q167.1,195.5 158.1,187 Q160,199.3 169,207.8 Z' stroke-width='1.6'/%3E%3Cpath d='M171.6,195 Q182.6,190.8 188.8,180.7 Q177.8,184.9 171.6,195 Z' stroke-width='1.6'/%3E%3Cpath d='M173.7,182 Q171.2,171.1 162.5,163.9 Q165,174.9 173.7,182 Z' stroke-width='1.6'/%3E%3Cpath d='M175.4,168.9 Q185.1,164.4 190,155 Q180.3,159.4 175.4,168.9 Z' stroke-width='1.6'/%3E%3Cpath d='M176.7,155.5 Q173.8,145.9 165.6,140 Q168.5,149.7 176.7,155.5 Z' stroke-width='1.6'/%3E%3Cpath d='M177.5,142 Q185.8,137.5 189.7,128.9 Q181.4,133.4 177.5,142 Z' stroke-width='1.6'/%3E%3Cpath d='M178,128.2 Q175,119.9 167.5,115.2 Q170.6,123.5 178,128.2 Z' stroke-width='1.6'/%3E%3Cpath d='M178.1,114.2 Q185.1,109.9 188.1,102.2 Q181.1,106.5 178.1,114.2 Z' stroke-width='1.6'/%3E%3Cpath d='M177.9,99.9 Q174.9,92.9 168.3,89.1 Q171.2,96.2 177.9,99.9 Z' stroke-width='1.6'/%3E%3Cpath d='M177.3,85.4 Q183.1,81.4 185.3,74.8 Q179.5,78.7 177.3,85.4 Z' stroke-width='1.6'/%3E%3Cpath d='M176.3,70.5 Q173.6,64.7 167.9,61.8 Q170.6,67.6 176.3,70.5 Z' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat;
	background-position:right 18px top -34px;
	background-size:auto 330px;
	opacity:.30;
}

/* 텍스트 블록 — 다른 배너와 같은 가운데 정렬 거터 */
.pzband .pzb__inner{
	position:relative; z-index:1; display:block;
	max-width:1180px; margin:0 auto; padding:48px 24px 46px;
}
/* 아이브로우 앞 짧은 룰 — 에디토리얼 신호 */
.pzband .pzb__eyebrow{
	display:flex; align-items:center; gap:12px; margin:0 0 16px;
	font-size:11.5px; font-weight:700; letter-spacing:.2em; color:var(--pzb-gold);
}
.pzband .pzb__eyebrow::before{
	content:""; display:block; width:26px; height:1px; background:var(--pzb-gold); flex:none;
}
.pzband .pzb__head{
	display:block; max-width:620px; font-family:var(--pzb-serif);
	font-size:32px; font-weight:600; line-height:1.36; letter-spacing:-.032em; color:var(--pzb-ink);
	word-break:keep-all;
}
.pzband .pzb__em{ color:var(--pzb-gold); }

/* 서브 + CTA = 가로 한 줄 (.ivband 와 동일) */
.pzband .pzb__row{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin:22px 0 0; }
.pzband .pzb__sub{
	font-size:15.5px; line-height:1.75; color:var(--pzb-sub);
	letter-spacing:-.01em; word-break:keep-all;
}
.pzband .pzb__cta{
	display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:0 22px;
	border:1px solid var(--pzb-gold); border-radius:3px;
	font-size:15px; font-weight:700; color:var(--pzb-cta); letter-spacing:-.01em;
	white-space:nowrap; transition:background .2s, color .2s;
}
.pzband .pzb__link:hover .pzb__cta,
.pzband .pzb__link:focus .pzb__cta{ background:var(--pzb-gold); color:#fdf9f0; }
.pzband .pzb__arw{ font-size:17px; line-height:1; }

/* 키보드 포커스 접근성 */
.pzband .pzb__link:focus-visible{ outline:none; }
.pzband .pzb__link:focus-visible .pzb__cta{ outline:3px solid var(--pzb-gold); outline-offset:3px; }

/* ── 모바일 (.ivband 와 같은 브레이크포인트·형태) ── */
@media screen and (max-width:768px){
	.pzband{ margin:0 0 34px; }
	.pzband .pzb__link{ min-height:0; }
	.pzband .pzb__inner{ padding:36px 18px 34px; }
	/* 글자가 폭을 다 쓰므로 모티프는 더 작게·오른쪽 위로 물린다 */
	.pzband .pzb__motif{
		background-position:right -34px top -26px; background-size:auto 210px; opacity:.26;
	}
	.pzband .pzb__head{ font-size:24px; line-height:1.42; max-width:none; }
	.pzband .pzb__row{ flex-direction:column; align-items:flex-start; gap:16px; margin-top:16px; }
	.pzband .pzb__sub{ font-size:15px; }
	.pzband .pzb__cta{ min-height:48px; width:100%; justify-content:center; }
}

/* 모션 최소화 선호 존중 */
@media (prefers-reduced-motion:reduce){
	.pzband .pzb__cta{ transition:none; }
}
