@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════════
   join_flow.css — 조합원 가입 퍼널 보조 스킨 · v1.3.0 (2026-08-09)
   v1.3.0 : 가입완료 석 달 선물 안내(.jf_gnext) — 초대 페이지와 같은 화법
   v1.0.0 (2026-08-09 신설)

   쓰는 곳 = 가입 정보입력(join_step3) · 출자금 결제(member/payment) · 가입 완료(join_end)
             · 조합원 전환(user_type_change_draft).
   각 화면 JSP 가 <link> 로 직접 불러온다(commScripts.jsp = 운영 분기파일이라 무접촉).

   ★ 스코프 = .jfz 한 겹. 기존 style_v2 / fineStyle 규칙을 건드리지 않는다.
   ★ 대상 조합원 다수가 50~60대다 → 본문 16px 하한, 터치 대상 44px 하한.
   ★ 인라인 스타일 금지 원칙에 따라 모든 표현은 여기에 둔다.
   ═══════════════════════════════════════════════════════════════════════════ */

.jfz{
	--jf-green:#3D6041;
	--jf-green-d:#2b4630;
	--jf-gold:#a8823c;
	--jf-ink:#22271f;
	--jf-ink-soft:#4c5449;
	--jf-muted:#7c8479;
	--jf-surface:#f5f3ea;
	--jf-line:#e2ded0;
	box-sizing:border-box;
}
.jfz *{ box-sizing:border-box; }

/* ── 초대 배지 (가입 정보입력 상단) ─────────────────────────────────────
   초대 링크로 들어온 분에게만 보인다. 추천인 이름은 마스킹된 값만 쓴다. */
.jfz.jf_invite{
	margin:0 0 22px;
	padding:20px 22px;
	background:var(--jf-surface);
	border:1px solid var(--jf-line);
	border-left:4px solid var(--jf-green);
	border-radius:6px;
}
.jfz.jf_invite .jf_iv_eyebrow{
	display:block; margin:0 0 8px;
	font-size:12.5px; font-weight:700; letter-spacing:.14em; color:var(--jf-gold);
}
.jfz.jf_invite .jf_iv_t{
	margin:0; font-size:19px; font-weight:700; line-height:1.5;
	letter-spacing:-.02em; color:var(--jf-ink); word-break:keep-all;
}
.jfz.jf_invite .jf_iv_t b{ color:var(--jf-green); }
.jfz.jf_invite .jf_iv_d{
	margin:10px 0 0; font-size:16px; line-height:1.75; color:var(--jf-ink-soft);
	word-break:keep-all; overflow-wrap:normal;
}
.jfz.jf_invite .jf_iv_note{
	margin:12px 0 0; padding:10px 12px;
	font-size:14.5px; line-height:1.7; color:var(--jf-ink-soft);
	background:#fff; border:1px dashed var(--jf-line); border-radius:4px;
	word-break:keep-all;
}
.jfz.jf_invite .jf_iv_note b{ color:var(--jf-green); font-weight:700; }

/* ── 쿠폰 지급 시점 안내 줄 (결제/전환 화면 공용) ───────────────────── */
.jfz.jf_cpnnote{
	margin:16px 0;
	padding:16px 18px;
	background:#fff;
	border:1px solid var(--jf-green);
	border-radius:6px;
}
.jfz.jf_cpnnote .jf_cn_t{
	margin:0; font-size:17px; font-weight:700; line-height:1.55;
	color:var(--jf-green); word-break:keep-all;
}
.jfz.jf_cpnnote .jf_cn_d{
	margin:8px 0 0; font-size:15.5px; line-height:1.75; color:var(--jf-ink-soft);
	word-break:keep-all;
}

/* ── 가입 완료 화면 : 받으신 쿠폰 + 첫 장보기 ─────────────────────── */
.jfz.jf_end{ margin:26px auto 0; max-width:720px; text-align:left; }
.jfz.jf_end .jf_end_head{
	margin:0 0 14px; padding:0 2px;
}
.jfz.jf_end .jf_end_eyebrow{
	display:block; margin:0 0 6px;
	font-size:12.5px; font-weight:700; letter-spacing:.14em; color:var(--jf-gold);
}
.jfz.jf_end .jf_end_t{
	margin:0; font-size:22px; font-weight:700; line-height:1.5;
	letter-spacing:-.02em; color:var(--jf-ink); word-break:keep-all;
}
.jfz.jf_end .jf_end_d{
	margin:8px 0 0; font-size:16px; line-height:1.75; color:var(--jf-ink-soft);
	word-break:keep-all;
}

.jfz .jf_gifts{ margin:0; padding:0; list-style:none;
	background:var(--jf-surface); border:1px solid var(--jf-line); border-radius:6px; }
.jfz .jf_gifts li{
	display:flex; align-items:center; gap:14px;
	padding:16px 18px; border-bottom:1px solid var(--jf-line);
}
.jfz .jf_gifts li:last-child{ border-bottom:0; }
.jfz .jf_gift_amt{
	flex:0 0 auto; min-width:92px;
	font-size:22px; font-weight:800; line-height:1.2; color:var(--jf-green);
	letter-spacing:-.02em;
}
.jfz .jf_gift_amt .jf_unit{ font-size:14px; font-weight:700; margin-left:2px; }
.jfz .jf_gift_txt{ font-size:15.5px; line-height:1.7; color:var(--jf-ink-soft); word-break:keep-all; }
.jfz .jf_gift_txt b{ display:block; font-size:16.5px; color:var(--jf-ink); font-weight:700; }

/* ── 석 달 선물 안내 (가입 완료) ─────────────────────────────────────────
   쿠폰 목록과 **자리를 나눈다** — 쿠폰은 "지금 쿠폰함에 있다", 선물은 "다음 달부터
   주문에 딸려 온다". 한 목록에 섞으면 "선물은 왜 쿠폰함에 없냐"는 문의가 생긴다.
   초대 페이지(.ivz .iv_gift_ex/.iv_grules)와 같은 화법·같은 리듬을 쓴다. */
.jfz .jf_gnext{ margin:16px 0 0; padding:18px 20px 16px;
	background:#fff; border:1px solid var(--jf-line); border-left:3px solid var(--jf-gold);
	border-radius:6px; }
.jfz .jf_gn_t{ margin:0; font-size:16.5px; font-weight:700; line-height:1.6;
	letter-spacing:-.01em; color:var(--jf-ink); word-break:keep-all; }
.jfz .jf_gn_t b{ color:var(--jf-green); font-weight:800; }
.jfz .jf_gn_ex{ margin:10px 0 0; padding:11px 14px;
	background:var(--jf-surface); font-size:15px; line-height:1.6;
	color:var(--jf-ink-soft); word-break:keep-all; }
.jfz .jf_gn_ex b{ color:var(--jf-green); font-weight:800; }
.jfz .jf_gn_rules{ margin:12px 0 0; padding:0; list-style:none;
	display:grid; grid-template-columns:1fr; gap:7px; }
.jfz .jf_gn_rules li{ position:relative; padding:0 0 0 18px;
	font-size:14.5px; line-height:1.75; color:var(--jf-ink-soft); word-break:keep-all; }
.jfz .jf_gn_rules li::before{ content:""; position:absolute; left:2px; top:.7em;
	width:5px; height:5px; background:var(--jf-green); }
.jfz .jf_gn_rules b{ color:var(--jf-ink); font-weight:700; }

.jfz .jf_end_actions{ display:flex; gap:10px; margin:20px 0 0; flex-wrap:wrap; }
.jfz .jf_btn{
	display:inline-flex; align-items:center; justify-content:center;
	min-height:52px; padding:0 26px; border-radius:6px;
	font-size:17px; font-weight:700; text-decoration:none; letter-spacing:-.01em;
	border:1px solid var(--jf-green); cursor:pointer;
}
.jfz .jf_btn_primary{ background:var(--jf-green); color:#fff; flex:1 1 240px; }
.jfz .jf_btn_primary:hover{ background:var(--jf-green-d); color:#fff; }
.jfz .jf_btn_ghost{ background:#fff; color:var(--jf-green); flex:0 1 200px; }
.jfz .jf_btn_ghost:hover{ background:var(--jf-surface); color:var(--jf-green); }

.jfz .jf_end_note{
	margin:14px 0 0; font-size:14.5px; line-height:1.8; color:var(--jf-muted);
	word-break:keep-all;
}
.jfz .jf_end_note b{ color:var(--jf-green); font-weight:700; }

/* ── 초대해 주신 분에게도 갔다는 알림 (ref 로 오신 분만) ──────────────
   "나만 받은 게 아니다"를 알리는 줄. 초대가 다음 초대로 이어지는 지점이라
   본문보다 살짝 도드라지게 두되, CTA 보다는 조용하게 둔다. */
.jfz.jf_end .jf_end_ref{
	margin:16px 0 0; padding:14px 16px;
	font-size:15.5px; line-height:1.75; color:var(--jf-ink-soft);
	background:var(--jf-surface); border-left:3px solid var(--jf-gold);
	word-break:keep-all;
}
.jfz.jf_end .jf_end_ref b{ color:var(--jf-green); font-weight:700; }
.jfz.jf_end .jf_end_ref[hidden]{ display:none; }

/* ── 비조합원(출자금 미납) 안내 카드 ──────────────────────────────── */
.jfz.jf_end .jf_pending{
	margin:0 0 18px; padding:18px 20px;
	background:#fff; border:1px solid var(--jf-gold); border-radius:6px;
}
.jfz.jf_end .jf_pending .jf_pd_t{
	margin:0; font-size:18px; font-weight:700; line-height:1.55; color:var(--jf-ink);
	word-break:keep-all;
}
.jfz.jf_end .jf_pending .jf_pd_d{
	margin:8px 0 0; font-size:15.5px; line-height:1.75; color:var(--jf-ink-soft);
	word-break:keep-all;
}

/* ── 가입 3단계 "생협 소개" 1화면 (join_step2) ──────────────────────
   종전 23장 강제 열람 게이트를 대체한다. 읽는 부담을 줄이고 [다음]을 처음부터 연다.
   대상 다수가 50~60대라 본문 17px, 줄간 1.8, 터치 52px 로 잡는다. */
.jfz.jf_intro{ max-width:760px; margin:0 auto; padding:8px 0 40px; }

.jfz.jf_intro .jf_in_head{ padding:26px 2px 4px; }
.jfz.jf_intro .jf_in_eyebrow{
	display:block; margin:0 0 10px;
	font-size:12.5px; font-weight:700; letter-spacing:.16em; color:var(--jf-gold);
}
.jfz.jf_intro .jf_in_title{
	margin:0; font-size:34px; font-weight:700; line-height:1.42;
	letter-spacing:-.035em; color:var(--jf-ink); word-break:keep-all;
}
.jfz.jf_intro .jf_in_lead{
	margin:16px 0 0; font-size:17px; line-height:1.8; color:var(--jf-ink-soft);
	word-break:keep-all; overflow-wrap:normal;
}

.jfz.jf_intro .jf_in_list{ margin:30px 0 0; padding:0; list-style:none; }
.jfz.jf_intro .jf_in_item{
	display:flex; gap:18px; align-items:flex-start;
	padding:24px 24px; margin:0 0 12px;
	background:var(--jf-surface); border:1px solid var(--jf-line);
	border-left:4px solid var(--jf-green); border-radius:6px;
}
.jfz.jf_intro .jf_in_n{
	flex:0 0 auto; font-size:15px; font-weight:800; line-height:1.5;
	color:var(--jf-gold); letter-spacing:.04em; padding-top:3px;
}
.jfz.jf_intro .jf_in_t{
	margin:0; font-size:20px; font-weight:700; line-height:1.5;
	letter-spacing:-.025em; color:var(--jf-ink); word-break:keep-all;
}
.jfz.jf_intro .jf_in_d{
	margin:9px 0 0; font-size:16.5px; line-height:1.82; color:var(--jf-ink-soft);
	word-break:keep-all; overflow-wrap:normal;
}
.jfz.jf_intro .jf_in_d strong{ color:var(--jf-green); font-weight:700; }

.jfz.jf_intro .jf_in_actions{ margin:28px 0 0; }
.jfz.jf_intro .jf_in_actions .jf_btn{ width:100%; min-height:58px; font-size:18px; }
.jfz.jf_intro .jf_in_note{
	margin:12px 0 0; text-align:center;
	font-size:14.5px; line-height:1.75; color:var(--jf-muted); word-break:keep-all;
}

/* 소개 자료 23장 — 접어 두고, 원하는 분만 펼친다(강제 없음) */
.jfz.jf_intro .jf_in_more{ margin:34px 0 0; border-top:1px solid var(--jf-line); padding-top:20px; }
.jfz.jf_intro .jf_in_toggle{
	display:block; width:100%; min-height:60px; padding:12px 44px 12px 18px;
	position:relative; text-align:left; cursor:pointer;
	background:#fff; border:1px solid var(--jf-line); border-radius:6px;
}
.jfz.jf_intro .jf_in_toggle_t{
	display:block; font-size:16.5px; font-weight:700; color:var(--jf-ink); letter-spacing:-.02em;
}
.jfz.jf_intro .jf_in_toggle_s{
	display:block; margin-top:4px; font-size:14px; line-height:1.6; color:var(--jf-muted);
}
.jfz.jf_intro .jf_in_arw{
	position:absolute; right:18px; top:50%; transform:translateY(-50%);
	font-size:15px; color:var(--jf-green);
}
.jfz.jf_intro .jf_in_toggle.is-open .jf_in_arw{ transform:translateY(-50%) rotate(180deg); }
.jfz.jf_intro .jf_in_deck{ margin:14px 0 0; }
.jfz.jf_intro .jf_in_deck img{ display:block; width:100%; max-width:100%; height:auto; margin:0 0 10px; }
.jfz.jf_intro .jf_in_deck[hidden]{ display:none; }

/* ── 모바일 ───────────────────────────────────────────────────────── */
@media screen and (max-width:768px){
	.jfz.jf_intro{ padding:4px 16px 32px; }
	.jfz.jf_intro .jf_in_head{ padding:20px 0 4px; }
	.jfz.jf_intro .jf_in_title{ font-size:26px; }
	.jfz.jf_intro .jf_in_lead{ font-size:16px; }
	.jfz.jf_intro .jf_in_list{ margin:24px 0 0; }
	.jfz.jf_intro .jf_in_item{ gap:12px; padding:18px 16px; }
	.jfz.jf_intro .jf_in_t{ font-size:18px; }
	.jfz.jf_intro .jf_in_d{ font-size:15.5px; }
	.jfz.jf_intro .jf_in_actions .jf_btn{ min-height:56px; font-size:17px; }
	.jfz.jf_invite{ margin:0 0 18px; padding:16px 16px; border-radius:5px; }
	.jfz.jf_invite .jf_iv_t{ font-size:17.5px; }
	.jfz.jf_invite .jf_iv_d{ font-size:15.5px; }
	.jfz.jf_end{ margin:20px 0 0; }
	.jfz.jf_end .jf_end_t{ font-size:19.5px; }
	.jfz .jf_gifts li{ gap:10px; padding:14px 14px; }
	.jfz .jf_gift_amt{ min-width:78px; font-size:19px; }
	.jfz .jf_gift_txt{ font-size:14.5px; }
	.jfz .jf_gift_txt b{ font-size:15.5px; }
	/* 석 달 선물 안내 — 문장이 짧아 줄바꿈만 편해지면 된다(글자는 더 줄이지 않는다). */
	.jfz .jf_gnext{ padding:16px 15px 14px; }
	.jfz .jf_gn_t{ font-size:15.5px; }
	.jfz .jf_gn_ex{ padding:10px 12px; font-size:14.5px; }
	.jfz .jf_gn_rules li{ font-size:14px; line-height:1.7; }
	.jfz .jf_btn{ min-height:50px; font-size:16px; }
	.jfz .jf_btn_primary{ flex:1 1 100%; }
	.jfz .jf_btn_ghost{ flex:1 1 100%; }
}

/* ══ 2026-08-11 조합원 전환 — 신규 조합원 감사선물 + 출자금 안내 (감사선물 이미지 대체 텍스트) ══ */
.jfz.jf_gift{ margin:0 0 16px; padding:18px 18px 16px; background:var(--jf-surface); border:1px solid var(--jf-line); border-left:4px solid var(--jf-green); border-radius:6px; }
.jfz.jf_gift .jf_g_t{ margin:0; font-size:18px; font-weight:800; color:var(--jf-green-d); letter-spacing:-.01em; }
.jfz.jf_gift .jf_g_sub{ margin:5px 0 14px; font-size:13.5px; color:var(--jf-muted); }
.jfz.jf_gift ul.jf_g_list{ list-style:none; margin:0; padding:0; }
.jfz.jf_gift ul.jf_g_list li{ display:flex; gap:12px; align-items:center; padding:12px 0; border-top:1px solid var(--jf-line); }
.jfz.jf_gift ul.jf_g_list li:first-child{ border-top:none; }
.jfz.jf_gift .g_when{ flex:0 0 auto; min-width:66px; text-align:center; font-size:12.5px; font-weight:800; color:#fff; background:var(--jf-green); border-radius:999px; padding:6px 10px; line-height:1.25; }
.jfz.jf_gift .g_what{ font-size:15px; line-height:1.5; color:var(--jf-ink); word-break:keep-all; }
.jfz.jf_gift .g_what b{ color:var(--jf-green-d); font-weight:800; }
.jfz.jf_gift .jf_g_cond{ margin:13px 0 0; font-size:12.5px; line-height:1.6; color:var(--jf-muted); word-break:keep-all; }

.jfz.jf_inv{ margin:0 0 16px; padding:18px; background:#fff; border:1px solid var(--jf-line); border-radius:6px; }
.jfz.jf_inv .jf_i_t{ margin:0 0 12px; font-size:16px; font-weight:800; color:var(--jf-green-d); }
.jfz.jf_inv .jf_i_row{ margin:0 0 11px; font-size:14.5px; line-height:1.7; color:var(--jf-ink-soft); word-break:keep-all; }
.jfz.jf_inv .jf_i_row:last-of-type{ margin-bottom:0; }
.jfz.jf_inv .jf_i_row b{ color:var(--jf-green); font-weight:800; }
.jfz.jf_inv .jf_i_note{ margin:13px 0 0; padding:10px 12px; font-size:13px; line-height:1.65; color:var(--jf-ink-soft); background:var(--jf-surface); border:1px dashed var(--jf-line); border-radius:4px; word-break:keep-all; }

/* ══ 2026-08-11 조합원 전환 버튼 하단 스티키 — 글씨 확대(시니어)에도 항상 보이게 ══
   2026-09-06 QC(MM02) : bottom:0 이라 하단 고정 내비(.bottom_menu_wrap, z-index:12 · 54px)가
   버튼 위에 겹쳐 그려져 "조합원 전환하기"가 거의 안 보였다(스티키를 넣은 목적 자체가 무효).
   내비 높이(--btmnav-h, bottom_nav_m.css :root)+iOS 안전영역만큼 띄우고 z-index 는 내비 아래(11)로 둔다.
   이 클래스는 mobile/my/invest/user_type_change_draft.jsp 한 곳에서만 쓴다(PC 영향 없음). */
.jf_cta_sticky{
	position:sticky;
	bottom:calc(var(--btmnav-h, 54px) + env(safe-area-inset-bottom, 0px) + 12px);
	z-index:11;
	margin-top:12px; padding-top:12px;
	padding-bottom:12px;
	background:#fff; border-top:1px solid var(--jf-line);
}