); } function VariantA({ data, innerRef }) { const t = STORY_TIER_THEME[data.tier] || STORY_TIER_THEME.white; return (

NO. {data.no || '042'}

이번에 만나볼
회원님은

{data.age}

{data.region} · {data.job}

IDEAL · 이상형

{data.ideal}

{data.adminMessage && (

NOTE · 운영자 한마디

{data.adminMessage}

)}

); } function InfoCard({ k, v, mono, light }) { return (

{k.toUpperCase()}

{v}

); } function VariantB({ data, innerRef }) { const t = STORY_TIER_THEME[data.tier] || STORY_TIER_THEME.white; return ( {data.photo && (

{(() => { const { fit, fx, fy, finalScale } = readPhotoView(data, 1.12); return (

); })()}

)}

MEMBER NO. {data.no || '042'}

이번 주의
회원 님

IDEAL · 이상형

“{data.ideal}”

{data.adminMessage && (

NOTE · 운영자 한마디

{data.adminMessage}

)}

); } function BField({ k, v, mono, span }) { return (

{k.toUpperCase()}

{v}

); } function VariantC({ data, innerRef }) { const t = STORY_TIER_THEME[data.tier] || STORY_TIER_THEME.white; return (

{data.age}

{data.job}

{data.region} · 닮은꼴 {data.lookalike}

IDEAL · 이상형

{data.ideal}

{data.adminMessage && (

NOTE · 운영자 한마디

{data.adminMessage}

)}

); } function VariantD({ data, innerRef }) { const t = STORY_TIER_THEME[data.tier] || STORY_TIER_THEME.white; return ( {data.photo && (() => { const { fit, fx, fy, finalScale } = readPhotoView(data, 1.16); return (

); })()}

VOL.{data.no || '042'}

TIER

{t.label}

{data.age} 세

{data.region} · {data.job}

닮은꼴 — {data.lookalike}

IDEAL TYPE

{data.ideal}

{data.adminMessage && (

NOTE · 운영자 한마디

{data.adminMessage}

)}

); } /** * 회원 검색 + 선택 → 부모 onPick(member) 호출. * - 검색어로 이름·회원코드·직업·지역 필터 * - 결과를 박스로 드롭다운(최대 8명) * - 입력 외 영역 클릭 / ESC / 항목 선택 시 닫힘 */ function MemberSearchPicker({ members, onPick, openDetail }) { const [q, setQ] = useSt(''); const [open, setOpen] = useSt(false); const [active, setActive] = useSt(0); const boxRef = useRf(null); const MAX_DROPDOWN = 50; const { list, totalMatched } = useMm(() => { const arr = Array.isArray(members) ? members : []; const needle = String(q || '').trim().toLowerCase(); const matched = !needle ? arr : arr.filter((m) => { if (!m) return false; const fields = [ m.name, m.memberCode, m.role, m.job, m.company, m.region, m.mbti, String(m.age || ''), ]; return fields.some((f) => String(f || '').toLowerCase().includes(needle)); }); return { list: matched.slice(0, MAX_DROPDOWN), totalMatched: matched.length }; }, [members, q]); useEf(() => { if (!open) return; const onDown = (e) => { if (boxRef.current && !boxRef.current.contains(e.target)) setOpen(false); }; const onKey = (e) => { if (e.key === 'Escape') setOpen(false); }; document.addEventListener('mousedown', onDown); document.addEventListener('keydown', onKey); return () => { document.removeEventListener('mousedown', onDown); document.removeEventListener('keydown', onKey); }; }, [open]); const pick = (m) => { onPick?.(m); setOpen(false); setQ(''); }; const tierLabel = (t) => { const map = (typeof window !== 'undefined' && window.TIER_LABEL) || {}; return map[t] || (t || '').toUpperCase(); }; return (

회원 검색 (선택 시 5개 항목 자동 입력) {Array.isArray(members) ? `${members.length}명` : '0명'}

{ setQ(e.target.value); setOpen(true); setActive(0); }} onFocus={() => setOpen(true)} onKeyDown={(e) => { if (!open) return; if (e.key === 'ArrowDown') { e.preventDefault(); setActive((i) => Math.min(list.length - 1, i + 1)); } else if (e.key === 'ArrowUp') { e.preventDefault(); setActive((i) => Math.max(0, i - 1)); } else if (e.key === 'Enter') { const m = list[active]; if (m) { e.preventDefault(); pick(m); } } }} placeholder="이름·회원코드·직업·지역으로 검색" style={{ flex: 1, minWidth: 0, border: 0, outline: 'none', background: 'transparent', fontSize: 13, color: '#161412', }} /> {q && ( )}

{open && (

{list.length === 0 ? (

일치하는 회원이 없습니다.

) : ( list.map((m, i) => { const photoUrl = (m.photos && m.photos[0] && m.photos[0].url) || null; const isActive = i === active; const sido = (m.region || '').split(' ')[0]; return ( ); }) )}

{totalMatched > list.length && (

상위 {list.length}명 표시 중 · 검색어를 입력해 더 좁혀보세요 (전체 {totalMatched}명 일치)

)}

); } function MemberForm({ data, set, members, openDetail }) { const onFile = (e) => { const f = e.target.files?.[0]; if (!f) return; const reader = new FileReader(); reader.onload = () => set('photo', reader.result); reader.readAsDataURL(f); }; return (

MEMBER INFO

{ if (!m) return; // 자동 채움: 나이 / 거주지(시·도) / 직업(직무) / 이상형 / 등급 const sido = (m.region || '').split(' ')[0] || m.region || ''; set('age', m.age != null ? String(m.age) : ''); set('region', sido); set('job', m.role || m.job || ''); set('ideal', m.ideal || ''); if (m.tier) set('tier', m.tier); // 회원 번호와 닮은꼴은 수동 입력 — 채우지 않음 window.__adminNotify?.( '회원 정보 불러옴 ✓', `${m.name} (${m.memberCode || ''}) · 나이·지역·직업·이상형·등급`, 2400, ); }} /> set('no', v)} placeholder="042" />

set('age', v)} placeholder="29" /> set('region', v)} placeholder="서울" />

set('job', v)} placeholder="피아노 선생님" />

등급

{Object.entries(STORY_TIER_THEME).map(([k, tv]) => ( ))}

set('lookalike', v)} placeholder="토끼" />

이상형

set('ideal', e.target.value)}
            rows={3}
            placeholder="키 178 이상 연상. 두부상 좋아합니다!"
            style={{
              width: '100%',
              boxSizing: 'border-box',
              padding: '10px 12px',
              border: '1px solid #ebe3d2',
              borderRadius: 10,
              fontSize: 13,
              fontFamily: 'inherit',
              resize: 'vertical',
              minHeight: 76,
              outline: 'none',
            }}
          />
        </div>
        <div>
          <label style={{
            fontSize: 12, fontWeight: 600, color: '#34302a',
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6,
          }}>
            <span>관리자 한마디</span>
            <button
              type="button"
              onClick={() => set('adminMessage', '스토리 소개팅은 신청 하시면 대기 없이 신청 가능 합니다.\n단, 사전에 신청이 된 사용자만 신청이 가능하며 회원 번호도 함께 전송 해주세요')}
              title="기본 안내 문구로 되돌리기"
              style={{
                background: 'transparent', border: 0, padding: 0,
                color: '#6b6359', fontSize: 11, fontWeight: 600,
                cursor: 'pointer', fontFamily: 'inherit',
              }}
            >기본값 복원 ↺</button>
          </label>
          <textarea
            value={data.adminMessage}
            onChange={(e) => set('adminMessage', e.target.value)}
            rows={4}
            placeholder="스토리 카드 하단에 표시될 운영자 안내 문구"
            style={{
              width: '100%',
              boxSizing: 'border-box',
              padding: '10px 12px',
              border: '1px solid #ebe3d2',
              borderRadius: 10,
              fontSize: 13,
              fontFamily: 'inherit',
              resize: 'vertical',
              minHeight: 92,
              outline: 'none',
              lineHeight: 1.55,
            }}
          />
          <div style={{
            marginTop: 4, fontSize: 10.5, color: '#948a7c', fontFamily: "'JetBrains Mono', monospace",
            letterSpacing: '0.02em',
          }}>
            {(data.adminMessage || '').length} 자 · 4종 카드 하단에 동일하게 들어갑니다
          </div>
        </div>
        <div style={{ borderTop: '1px dashed #ebe3d2', paddingTop: 12, marginTop: 2 }}>
          <label style={{ fontSize: 12, fontWeight: 600, color: '#34302a', display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
            <span>사진 (선택) · 블러</span>
            {data.photo && (
              <button
                type="button"
                onClick={() => set('photo', null)}
                style={{ background: 'transparent', border: 0, color: '#a8281d', fontSize: 11, fontWeight: 600, cursor: 'pointer', padding: 0 }}
              >
                제거 ×
              </button>
            )}
          </label>
          {!data.photo ? (
            <label
              htmlFor="adm-story-photo"
              style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                gap: 8,
                padding: '12px 10px',
                border: '1.5px dashed #c6bdad',
                borderRadius: 12,
                background: '#f6f2ec',
                color: '#6b6359',
                fontSize: 12.5,
                cursor: 'pointer',
              }}
            >
              + 사진 올리기 (PNG/JPG)
              <input id="adm-story-photo" type="file" accept="image/*" onChange={onFile} style={{ display: 'none' }} />
            </label>
          ) : (
            <div>
              <div style={{ position: 'relative', borderRadius: 12, overflow: 'hidden', aspectRatio: '9/16', background: (data.photoFit === 'contain') ? '#0a0807' : '#161412', maxWidth: 220, margin: '0 auto' }}>
                {(() => {
                  const { fit, fx, fy, finalScale } = readPhotoView(data, 1.08);
                  return (
                    <img
                      src={data.photo}
                      alt=""
                      style={{
                        width: '100%',
                        height: '100%',
                        objectFit: fit,
                        objectPosition: `${fx}% ${fy}%`,
                        filter: `blur(${data.blur}px)`,
                        transform: `scale(${finalScale})`,
                        transformOrigin: `${fx}% ${fy}%`,
                      }}
                    />
                  );
                })()}
                <div
                  style={{
                    position: 'absolute',
                    bottom: 6,
                    right: 6,
                    background: 'rgba(0,0,0,0.72)',
                    color: '#fff',
                    fontSize: 10,
                    fontFamily: "'JetBrains Mono', monospace",
                    padding: '3px 8px',
                    borderRadius: 999,
                  }}
                >
                  BLUR {data.blur}px
                </div>
                <div
                  style={{
                    position: 'absolute',
                    top: 6,
                    left: 6,
                    background: 'rgba(0,0,0,0.72)',
                    color: '#fff',
                    fontSize: 9,
                    fontFamily: "'JetBrains Mono', monospace",
                    padding: '3px 7px',
                    borderRadius: 999,
                    letterSpacing: '0.04em',
                  }}
                >
                  9:16 PREVIEW
                </div>
              </div>
              <div style={{ marginTop: 10 }}>
                <label style={{ fontSize: 11, color: '#6b6359', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span>블러 강도 (0 = 선명, 최대 = 윤곽만)</span>
                  <Mono style={{ fontSize: 11 }}>{Number(data.blur).toFixed(1)}px</Mono>
                </label>

{/* 프리셋 — 한 번에 빠르게 */}
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 4, marginTop: 6 }}>
                  {[
                    { label: '없음', value: 0 },
                    { label: '아주 약', value: 4 },
                    { label: '약함', value: 10 },
                    { label: '중간', value: 24 },
                    { label: '강함', value: 50 },
                    { label: '매우 강', value: 90 },
                  ].map((p) => {
                    const active = Math.abs(Number(data.blur) - p.value) < 0.5;
                    return (
                      <button
                        key={p.value}
                        type="button"
                        onClick={() => set('blur', p.value)}
                        style={{
                          padding: '6px 4px', borderRadius: 8,
                          background: active ? '#161412' : '#fff',
                          color: active ? '#fff' : '#34302a',
                          border: '1px solid ' + (active ? '#161412' : '#ebe3d2'),
                          fontSize: 10.5, fontWeight: 600,
                          cursor: 'pointer',
                        }}
                      >
                        {p.label}
                        <div style={{
                          fontFamily: "'JetBrains Mono', monospace",
                          fontSize: 9, opacity: 0.7, marginTop: 1,
                        }}>{p.value}px</div>
                      </button>
                    );
                  })}
                </div>

{/* 메인 슬라이더 — 0.5px 단위 */}
                <input
                  type="range"
                  min={0}
                  max={200}
                  step={0.5}
                  value={data.blur}
                  onChange={(e) => set('blur', Number(e.target.value))}
                  style={{ width: '100%', accentColor: '#161412', marginTop: 10 }}
                />

{/* 정밀 조정: −/+ 버튼 + 직접 입력 */}
                <div style={{
                  display: 'grid', gridTemplateColumns: '34px 34px 1fr 34px 34px', gap: 4,
                  marginTop: 8, alignItems: 'center',
                }}>
                  <button
                    type="button"
                    onClick={() => set('blur', Math.max(0, Number(data.blur) - 1))}
                    title="-1"
                    style={{
                      height: 32, borderRadius: 7, background: '#fff', border: '1px solid #ebe3d2',
                      fontSize: 14, fontWeight: 700, cursor: 'pointer',
                    }}
                  >−1</button>
                  <button
                    type="button"
                    onClick={() => set('blur', Math.max(0, Number(data.blur) - 0.5))}
                    title="-0.5"
                    style={{
                      height: 32, borderRadius: 7, background: '#fff', border: '1px solid #ebe3d2',
                      fontSize: 11, fontWeight: 600, cursor: 'pointer',
                    }}
                  >−.5</button>
                  <input
                    type="number"
                    min={0}
                    max={200}
                    step={0.5}
                    value={Number(data.blur)}
                    onChange={(e) => {
                      const v = Math.max(0, Math.min(200, Number(e.target.value) || 0));
                      set('blur', v);
                    }}
                    style={{
                      height: 32, borderRadius: 7, border: '1px solid #ebe3d2',
                      padding: '0 10px', textAlign: 'center', fontFamily: "'JetBrains Mono', monospace",
                      fontSize: 13, color: '#161412', background: '#fff',
                    }}
                  />
                  <button
                    type="button"
                    onClick={() => set('blur', Math.min(200, Number(data.blur) + 0.5))}
                    title="+0.5"
                    style={{
                      height: 32, borderRadius: 7, background: '#fff', border: '1px solid #ebe3d2',
                      fontSize: 11, fontWeight: 600, cursor: 'pointer',
                    }}
                  >+.5</button>
                  <button
                    type="button"
                    onClick={() => set('blur', Math.min(200, Number(data.blur) + 1))}
                    title="+1"
                    style={{
                      height: 32, borderRadius: 7, background: '#fff', border: '1px solid #ebe3d2',
                      fontSize: 14, fontWeight: 700, cursor: 'pointer',
                    }}
                  >+1</button>
                </div>

<div style={{
                  marginTop: 8, padding: '8px 10px', background: '#f6f2ec',
                  borderRadius: 8, fontSize: 10.5, color: '#6b6359', lineHeight: 1.55,
                }}>
                  💡 0~200px 범위 · 슬라이더는 0.5px 단위 · ←/→ 키로도 미세 조정 가능합니다.
                </div>
              </div>

{/* 사진 위치 · 확대 · 맞춤 — 멀리서 찍은 사진도 자연스럽게 배치 */}
              <div style={{ marginTop: 14, paddingTop: 12, borderTop: '1px dashed #ebe3d2' }}>
                <label style={{
                  fontSize: 12, fontWeight: 600, color: '#34302a',
                  display: 'flex', justifyContent: 'space-between', marginBottom: 8,
                }}>
                  <span>사진 위치 · 확대 (멀리 찍은 사진용)</span>
                  <button
                    type="button"
                    onClick={() => {
                      set('photoFit', 'cover');
                      set('photoFocusX', 50);
                      set('photoFocusY', 35);
                      set('photoZoom', 1.0);
                    }}
                    style={{
                      background: 'transparent', border: 0, padding: 0,
                      color: '#6b6359', fontSize: 11, fontWeight: 600,
                      cursor: 'pointer', fontFamily: 'inherit',
                    }}
                  >기본값 복원 ↺</button>
                </label>

{/* 한 번 누르면 적용되는 프리셋 — 멀리 찍은 사진 대응 */}
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4, marginBottom: 8 }}>
                  {[
                    { label: '얼굴 (상단)', tip: '인물 사진', x: 50, y: 25, zoom: 1.0, fit: 'cover' },
                    { label: '인물 중앙', tip: '기본', x: 50, y: 35, zoom: 1.0, fit: 'cover' },
                    { label: '인물 하단', tip: '하반신', x: 50, y: 75, zoom: 1.0, fit: 'cover' },
                    { label: '얼굴 확대', tip: '멀리 찍은 사진', x: 50, y: 28, zoom: 1.6, fit: 'cover' },
                    { label: '상반신 확대', tip: '먼 전신 사진', x: 50, y: 35, zoom: 1.35, fit: 'cover' },
                    { label: '전신 노컷', tip: '여백 허용', x: 50, y: 50, zoom: 1.0, fit: 'contain' },
                  ].map((p, i) => {
                    const active =
                      (data.photoFit || 'cover') === p.fit &&
                      Math.abs(Number(data.photoFocusY ?? 50) - p.y) < 1 &&
                      Math.abs(Number(data.photoFocusX ?? 50) - p.x) < 1 &&
                      Math.abs(Number(data.photoZoom ?? 1.0) - p.zoom) < 0.04;
                    return (
                      <button
                        key={i}
                        type="button"
                        onClick={() => {
                          set('photoFit', p.fit);
                          set('photoFocusX', p.x);
                          set('photoFocusY', p.y);
                          set('photoZoom', p.zoom);
                        }}
                        style={{
                          padding: '7px 4px', borderRadius: 8,
                          background: active ? '#161412' : '#fff',
                          color: active ? '#fff' : '#34302a',
                          border: '1px solid ' + (active ? '#161412' : '#ebe3d2'),
                          fontSize: 10.5, fontWeight: 600,
                          cursor: 'pointer', lineHeight: 1.2,
                          fontFamily: 'inherit',
                        }}
                      >
                        {p.label}
                        <div style={{
                          fontSize: 9, opacity: 0.65, marginTop: 2, fontWeight: 500,
                        }}>{p.tip}</div>
                      </button>
                    );
                  })}
                </div>

{/* 맞춤 모드 토글 */}
                <div style={{ display: 'flex', gap: 4, marginBottom: 10 }}>
                  {[
                    { value: 'cover', label: '꽉 채우기', tip: '크롭됨' },
                    { value: 'contain', label: '전체 보기', tip: '여백 생김' },
                  ].map((opt) => {
                    const active = (data.photoFit || 'cover') === opt.value;
                    return (
                      <button
                        key={opt.value}
                        type="button"
                        onClick={() => set('photoFit', opt.value)}
                        style={{
                          flex: 1,
                          padding: '8px 4px', borderRadius: 8,
                          background: active ? '#161412' : '#fff',
                          color: active ? '#fff' : '#34302a',
                          border: '1px solid ' + (active ? '#161412' : '#ebe3d2'),
                          fontSize: 11, fontWeight: 600,
                          cursor: 'pointer',
                          fontFamily: 'inherit',
                        }}
                      >
                        {opt.label}
                        <div style={{
                          fontFamily: "'JetBrains Mono', monospace",
                          fontSize: 9, opacity: 0.6, marginTop: 1,
                        }}>{opt.tip}</div>
                      </button>
                    );
                  })}
                </div>

{/* Y 세로 위치 */}
                <div style={{ marginBottom: 8 }}>
                  <label style={{
                    fontSize: 11, color: '#6b6359',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                  }}>
                    <span>세로 위치 (위 ↔ 아래)</span>
                    <Mono style={{ fontSize: 11 }}>{Number(data.photoFocusY ?? 50).toFixed(0)}%</Mono>
                  </label>
                  <input
                    type="range"
                    min={0}
                    max={100}
                    step={1}
                    value={Number(data.photoFocusY ?? 50)}
                    onChange={(e) => set('photoFocusY', Number(e.target.value))}
                    style={{ width: '100%', accentColor: '#161412', marginTop: 4 }}
                  />
                </div>

{/* X 가로 위치 */}
                <div style={{ marginBottom: 8 }}>
                  <label style={{
                    fontSize: 11, color: '#6b6359',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                  }}>
                    <span>가로 위치 (왼쪽 ↔ 오른쪽)</span>
                    <Mono style={{ fontSize: 11 }}>{Number(data.photoFocusX ?? 50).toFixed(0)}%</Mono>
                  </label>
                  <input
                    type="range"
                    min={0}
                    max={100}
                    step={1}
                    value={Number(data.photoFocusX ?? 50)}
                    onChange={(e) => set('photoFocusX', Number(e.target.value))}
                    style={{ width: '100%', accentColor: '#161412', marginTop: 4 }}
                  />
                </div>

{/* 확대 비율 */}
                <div style={{ marginBottom: 4 }}>
                  <label style={{
                    fontSize: 11, color: '#6b6359',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                  }}>
                    <span>확대 (작게 ↔ 크게)</span>
                    <Mono style={{ fontSize: 11 }}>×{Number(data.photoZoom ?? 1.0).toFixed(2)}</Mono>
                  </label>
                  <input
                    type="range"
                    min={0.5}
                    max={2.5}
                    step={0.05}
                    value={Number(data.photoZoom ?? 1.0)}
                    onChange={(e) => set('photoZoom', Number(e.target.value))}
                    style={{ width: '100%', accentColor: '#161412', marginTop: 4 }}
                  />
                </div>

<div style={{
                  marginTop: 8, padding: '8px 10px', background: '#f6f2ec',
                  borderRadius: 8, fontSize: 10.5, color: '#6b6359', lineHeight: 1.55,
                }}>
                  💡 멀리서 찍은 사진은 <b>「얼굴 확대」</b> 또는 <b>「상반신 확대」</b> 프리셋을 눌러보세요.
                  전신을 그대로 보이려면 <b>「전신 노컷」</b>을 선택하면 여백이 생기는 대신 사진이 잘리지 않습니다.
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
      <div style={{ marginTop: 14, padding: 11, background: '#f6f2ec', borderRadius: 10, fontSize: 11, color: '#6b6359', lineHeight: 1.55 }}>
        💡 파일명은 <b>회원번호-나이-거주지-직업-A~D.png</b> 형식입니다. 각 변형 버튼 또는 상단 <b>A~D 다운로드</b>로 1080×1920을 저장할 수 있어요. (최초 1회 라이브러리 로딩에 몇 초 걸릴 수 있어요.)
      </div>
    </div>
  );
}

function Input({ label, value, onChange, placeholder }) {
  return (
    <div>
      <label style={{ fontSize: 12, fontWeight: 600, color: '#34302a', display: 'block', marginBottom: 6 }}>{label}</label>
      <input
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        style={{
          width: '100%',
          boxSizing: 'border-box',
          padding: '9px 11px',
          border: '1px solid #ebe3d2',
          borderRadius: 10,
          fontSize: 13,
          fontFamily: 'inherit',
          outline: 'none',
        }}
      />
    </div>
  );
}

const HTML_TO_IMAGE_UMD = 'https://unpkg.com/html-to-image@1.11.11/dist/html-to-image.js';

/** UMD 전역 `window.htmlToImage` 로드 (한 번만) */
let htmlToImageLoadPromise = null;
function ensureHtmlToImage() {
  if (typeof window === 'undefined') return Promise.reject(new Error('window 없음'));
  if (window.htmlToImage && typeof window.htmlToImage.toPng === 'function') {
    return Promise.resolve(window.htmlToImage);
  }
  if (!htmlToImageLoadPromise) {
    htmlToImageLoadPromise = new Promise((resolve, reject) => {
      const s = document.createElement('script');
      s.src = HTML_TO_IMAGE_UMD;
      s.async = true;
      s.onload = () => {
        if (window.htmlToImage && typeof window.htmlToImage.toPng === 'function') {
          resolve(window.htmlToImage);
        } else {
          htmlToImageLoadPromise = null;
          reject(new Error('htmlToImage 전역 없음'));
        }
      };
      s.onerror = () => {
        htmlToImageLoadPromise = null;
        reject(new Error('html-to-image 스크립트 로드 실패'));
      };
      document.head.appendChild(s);
    });
  }
  return htmlToImageLoadPromise;
}

/** 파일명용: 경로 금지 문자 제거, 빈 값은 대시 표기 */
function sanitizeStoryFilenamePart(val) {
  const s = String(val ?? '').trim();
  if (!s) return '—';
  return s
    .replace(/[/\\:*?"<>|]/g, '')
    .replace(/\s+/g, ' ')
    .slice(0, 120);
}

/** 회원번호-나이-거주지-직업-파일타입(A~D).png */
function storyPngFilename(data, fileType) {
  const no = sanitizeStoryFilenamePart(data.no);
  const age = sanitizeStoryFilenamePart(data.age);
  const region = sanitizeStoryFilenamePart(data.region);
  const job = sanitizeStoryFilenamePart(data.job);
  const u = String(fileType || 'A').toUpperCase();
  const t = /^[A-D]$/.test(u) ? u : 'A';
  return `${no}-${age}-${region}-${job}-${t}.png`;
}

async function downloadStoryPng(innerEl, filename, options = {}) {
  const { quiet = false } = options;
  const notify = window.__adminNotify;
  if (!innerEl) {
    if (!quiet) notify?.('저장 실패', '캔버스를 찾을 수 없습니다.', 3000);
    return;
  }
  try {
    let hti;
    try {
      hti = await ensureHtmlToImage();
    } catch (e) {
      htmlToImageLoadPromise = null;
      throw e;
    }
    const dataUrl = await hti.toPng(innerEl, {
      cacheBust: true,
      pixelRatio: 1,
      width: STORY_W,
      height: STORY_H,
      style: { transform: 'none', transformOrigin: 'top left' },
    });
    const a = document.createElement('a');
    a.href = dataUrl;
    a.download = filename;
    a.click();
    if (!quiet) notify?.('저장됨', `${filename} 다운로드를 시작했습니다.`, 2400);
  } catch (err) {
    console.error(err);
    notify?.('PNG 저장 실패', err?.message || 'html-to-image 오류', 4000);
  }
}

function VariantWrap({ label, tone, children, onDownload, downloadLabel }) {
  return (
    <div>
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          flexWrap: 'wrap',
          gap: 8,
          marginBottom: 10,
        }}
      >
        <div
          style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: 6,
            padding: '4px 12px',
            borderRadius: 999,
            background: '#161412',
            color: '#fff',
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 11,
            fontWeight: 600,
            letterSpacing: '0.04em',
          }}
        >
          <span style={{ width: 6, height: 6, borderRadius: 999, background: tone === 'dark' ? '#5ad17a' : '#f5c419' }} />
          {label}
        </div>
        <button
          type="button"
          style={{
            fontSize: 12,
            fontWeight: 600,
            padding: '9px 16px',
            borderRadius: 10,
            border: 'none',
            color: '#fff',
            background: '#e23a2e',
            cursor: 'pointer',
            boxShadow: '0 2px 10px rgba(226,58,46,0.35)',
          }}
          onClick={onDownload}
        >
          {downloadLabel || 'PNG 다운로드'}
        </button>
      </div>
      <div
        style={{
          boxShadow: '0 8px 28px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05)',
          borderRadius: 14,
          overflow: 'hidden',
          background: '#fff',
          display: 'inline-block',
        }}
      >
        {children}
      </div>
    </div>
  );
}

function AdminMemberStoryWorkspace({ go, members, seenNewMemberIds = [], openDetail }) {
  const [data, setData] = useSt({
    no: '042',
    age: '29',
    region: '서울',
    job: '피아노 선생님',
    tier: 'black',
    lookalike: '토끼',
    ideal: '키 178 이상 연상. 두부상 좋아합니다!',
    adminMessage:
      '스토리 소개팅은 신청 하시면 대기 없이 신청 가능 합니다.\n단, 사전에 신청이 된 사용자만 신청이 가능하며 회원 번호도 함께 전송 해주세요',
    photo: null,
    blur: 20,
  });
  const set = (k, v) => setData((d) => ({ ...d, [k]: v }));

const refA = useRf(null);
  const refB = useRf(null);
  const refC = useRf(null);
  const refD = useRf(null);

const saveA = useCb(() => downloadStoryPng(refA.current, storyPngFilename(data, 'A')), [data]);
  const saveB = useCb(() => downloadStoryPng(refB.current, storyPngFilename(data, 'B')), [data]);
  const saveC = useCb(() => downloadStoryPng(refC.current, storyPngFilename(data, 'C')), [data]);
  const saveD = useCb(() => downloadStoryPng(refD.current, storyPngFilename(data, 'D')), [data]);

return (
    <AdminShell go={go} active="insta-story" members={members} seenNewMemberIds={seenNewMemberIds}>
      <div className="page-head" style={{ marginBottom: 14 }}>
        <div>
          <div className="crumb">인스타 컨텐츠 생성</div>
          <h1>스토리 생성</h1>
        </div>
      </div>
      <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.5)', marginBottom: 18, maxWidth: 720, lineHeight: 1.55 }}>
        인스타 스토리(9:16)용 이미지 4종입니다. 입력 후 <b style={{ color: 'rgba(255,255,255,0.85)' }}>PNG 다운로드</b>로 브라우저 다운로드 폴더에 저장하세요.
      </p>
      <div style={{ marginBottom: 18, display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'center' }}>
          <button type="button" className="btn brand" onClick={saveAll}>
            4종 한 번에 PNG 저장
          </button>
          <span className="tiny" style={{ color: 'rgba(255,255,255,0.45)' }}>
            등급 색은 배지·포인트로만 쓰이고, 배경은 어두운 톤 + 블러 사진 대비를 유지합니다.
          </span>
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
          <span className="tiny" style={{ color: 'rgba(255,255,255,0.55)', width: '100%', marginBottom: 2 }}>
            풀해상도 1080×1920 · 변형별 개별 다운로드 (파일명: 회원번호-나이-거주지-직업-A~D.png)
          </span>
          <button type="button" className="btn brand sm" onClick={saveA}>A 다운로드</button>
          <button type="button" className="btn brand sm" onClick={saveB}>B 다운로드</button>
          <button type="button" className="btn brand sm" onClick={saveC}>C 다운로드</button>
          <button type="button" className="btn brand sm" onClick={saveD}>D 다운로드</button>
        </div>
      </div>

<div
        style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 300px) minmax(0, 1fr)',
          gap: 22,
          alignItems: 'flex-start',
        }}
        className="adm-story-grid"
      >
        <MemberForm data={data} set={set} members={members} openDetail={openDetail} />
        <div>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 14, flexWrap: 'wrap', gap: 8 }}>
            <Mono style={{ fontSize: 11, color: 'rgba(255,255,255,0.45)', textTransform: 'uppercase' }}>4 VARIANTS · 1080 × 1920</Mono>
            <Mono style={{ fontSize: 10, color: 'rgba(255,255,255,0.35)' }}>Preview @{Math.round(STORY_SCALE * 100)}%</Mono>
          </div>
          <div
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fill, minmax(360px, 1fr))',
              gap: 20,
            }}
          >
            <VariantWrap label="A · Tier accent + photo" tone="dark" onDownload={saveA} downloadLabel="A · 1080×1920 다운로드">
              <VariantA data={data} innerRef={refA} />
            </VariantWrap>
            <VariantWrap label="B · Cream card" tone="light" onDownload={saveB} downloadLabel="B · 1080×1920 다운로드">
              <VariantB data={data} innerRef={refB} />
            </VariantWrap>
            <VariantWrap label="C · Editorial age" tone="dark" onDownload={saveC} downloadLabel="C · 1080×1920 다운로드">
              <VariantC data={data} innerRef={refC} />
            </VariantWrap>
            <VariantWrap label="D · Magazine circle" tone="light" onDownload={saveD} downloadLabel="D · 1080×1920 다운로드">
              <VariantD data={data} innerRef={refD} />
            </VariantWrap>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 1100px) {
          .adm-story-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </AdminShell>
  );
}