커뮤니티

{TABS.map((t,i)=>)}

{tab===0&&<>

현재 지역: {myCity}

setQ(e.target.value)} placeholder="이야기 검색" style={{flex:1, border:'none', background:'none', fontFamily:'inherit', fontSize:14, outline:'none'}}/>

guardAuth(S,set,go,()=>set({storyComposeOpen:!S.storyComposeOpen}))}/>

{S.storyComposeOpen&&

새 이야기 쓰기

{topics.map(t=>set({storyDraftTopic:t})} on={S.storyDraftTopic===t}/>)}

set({storyDraftBody:e.target.value})} placeholder="어떤 이야기를 나누고 싶으세요?" rows={3} style={{width:'100%',border:'1px solid var(--c-line)',borderRadius:8,padding:'10px 14px',fontFamily:'inherit',fontSize:14,marginBottom:10,outline:'none',resize:'none'}}/>
          {S.myHostedMeetups.length>0&&<div style={{marginBottom:12}}>
            <div className="meta" style={{marginBottom:6}}>관련 모임 연결 (선택)</div>
            <select value={S.storyDraftRelated} onChange={e=>set({storyDraftRelated:e.target.value})} style={{width:'100%', border:'1px solid var(--c-line)', borderRadius:8, padding:'10px 14px', fontFamily:'inherit', fontSize:14, outline:'none'}}>
              <option value="">연결 안 함</option>
              {S.myHostedMeetups.map((hm,i)=><option key={i} value={'my'+i}>{hm.title||'(제목 없음)'}</option>)}
            </select>
          </div>}
          <DSBtn label="올리기" size="md" disable={!S.storyDraftBody.trim()} onClick={submitStory}/>
        </div>}
        <div className="row" style={{gap:8, flexWrap:'wrap', marginBottom:20}}>
          <Chip label="전체" onClick={()=>setTopicFilter(null)} on={!topicFilter}/>
          {topics.map(t=><Chip key={t} label={t} onClick={()=>setTopicFilter(t)} on={topicFilter===t}/>)}
        </div>
        {pagedStoryPosts.length===0?<div className="card" style={{textAlign:'center', padding:'32px 20px'}}>
          <p style={{fontSize:14.5, fontWeight:700, margin:'0 0 6px'}}>{topicFilter||q.trim()?'해당하는 이야기가 없어요.':'아직 등록된 이야기가 없어요. 서버 연동 전이면 여기가 비어있는 게 정상이에요.'}</p>
          <p className="meta" style={{margin:0}}>모임 경험이나 유학 생활 이야기를 처음으로 나눠보세요.</p>
        </div>:pagedStoryPosts.map((p,i)=><Reveal key={p.id} delay={i*70}><div className="card" style={{marginBottom:12, padding:'16px 18px', cursor:'pointer'}} onClick={()=>set({qnaDetailPost:{...p, postSource:'story'}, screen:'postdetail'})}>
          <div className="row" style={{gap:8, marginBottom:8, justifyContent:'space-between'}}>
            <div className="row" style={{gap:8}}><Av name={p.author_name} size={30}/><span style={p.is_admin_post?{fontSize:13.5, fontWeight:900, color:'var(--c-primary)'}:{fontSize:13.5, fontWeight:700}}>{p.author_name}{p.is_admin_post&&<span className="chip green" style={{fontSize:10,padding:'1px 6px',marginLeft:5}}>운영진</span>}</span><span className="meta">· {timeAgo(new Date(p.created_at).getTime())}</span>{p.topic&&<span className="chip" style={{fontSize:11}}>{p.topic}</span>}</div>
            {(isAdmin||p.author_email===S.acctEmail)&&<button style={{background:'none',border:'none',color:'var(--c-red)',fontSize:12,cursor:'pointer'}} onClick={e=>{e.stopPropagation(); if(isAdminUser(S)&&p.author_email&&p.author_email!==S.acctEmail){ set({adminRemove:{kind:'post', id:p.id, ownerEmail:p.author_email, title:(p.topic||p.body||'게시글').slice(0,30)}}); return;} removePost(p.id, loadStory);}}>삭제</button>}
          </div>
          <p style={{fontSize:14, color:'var(--c-text)', margin:'0 0 8px', lineHeight:1.6}}>{p.body}</p>
          {p.related_meetup_id&&<button style={{background:'none', border:'none', color:'var(--c-primary)', fontFamily:'inherit', fontSize:12.5, fontWeight:700, cursor:'pointer', padding:0}} onClick={e=>{e.stopPropagation(); MEETUPS[p.related_meetup_id]?go('detail',{detailId:p.related_meetup_id}):set({toast:'연결된 모임을 찾을 수 없어요'});}}>관련 모임 보기</button>}
        </div></Reveal>)}
        <Pagination page={storyPage} total={storyTotalPages} onChange={n=>set({storyPage:n})}/>
      </>}

{tab===1&&<WScrQnAInline S={S} set={set} go={go}/>}

{tab===2&&<>
        {(()=>{ const eligible = S.completed.map(id=>MEETUPS[id]).filter(Boolean);
          const perPage=7, totalPages=Math.max(1,Math.ceil(reviewPosts.length/perPage)), page=Math.min(S.reviewPage||1,totalPages), paged=reviewPosts.slice((page-1)*perPage, page*perPage);
          return <>
          <div className="row" style={{gap:8, marginBottom:16}}>
            <DSBtn label="후기 쓰기" size="md" onClick={()=>guardAuth(S,set,go,()=>{ if(eligible.length===0){ set({toast:'실제로 참석 완료한 모임이 있어야 후기를 쓸 수 있어요'}); return; } set({reviewComposeOpen:!S.reviewComposeOpen, reviewDraftMeetupId:eligible[0]?eligible[0].id:''}); })}/>
            <span className="meta" style={{alignSelf:'center'}}>{eligible.length===0?'참석 완료한 모임이 있어야 후기를 쓸 수 있어요':`참석 완료 ${eligible.length}건 — 후기를 남길 수 있어요`}</span>
          </div>
          {S.reviewComposeOpen&&eligible.length>0&&<div className="card" style={{marginBottom:16}}>
            <b style={{fontSize:15}}>후기 쓰기</b>
            <div className="meta" style={{margin:'10px 0 6px'}}>어떤 모임이었나요?</div>
            <select value={S.reviewDraftMeetupId} onChange={e=>set({reviewDraftMeetupId:e.target.value})} style={{width:'100%', border:'1px solid var(--c-line)', borderRadius:8, padding:'10px 14px', fontFamily:'inherit', fontSize:14, outline:'none', marginBottom:10}}>
              {eligible.map(m=><option key={m.id} value={m.id}>{m.title}</option>)}
            </select>
            <textarea value={S.reviewDraftBody} onChange={e=>set({reviewDraftBody:e.target.value})} placeholder="어떤 모임이었는지 자유롭게 남겨주세요" rows={3} style={{width:'100%',border:'1px solid var(--c-line)',borderRadius:8,padding:'10px 14px',fontFamily:'inherit',fontSize:14,marginBottom:12,outline:'none',resize:'none'}}/>
            <DSBtn label="올리기" size="md" disable={!S.reviewDraftBody.trim()} onClick={()=>{
              const m = MEETUPS[S.reviewDraftMeetupId];
              createPost({category:'review', topic:m.title, author_email:S.acctEmail, author_name:S.profile.nickname||'나', body:S.reviewDraftBody.trim(), related_meetup_id:S.reviewDraftMeetupId, meetup_title:m.title, meetup_when:m.when, meetup_place:m.place, meetup_size:effectiveJoined(m)+'명 참여', is_admin_post:isAdmin}).then(res=>{
                if (res&&res.error) { set({toast:'후기 등록에 실패했어요'}); return; }
                set({reviewComposeOpen:false, reviewDraftBody:'', reviewPage:1, toast:'후기가 올라갔어요'});
                loadReview();
              });
            }}/>
          </div>}
          {paged.length===0?<div className="card" style={{textAlign:'center', padding:'32px 20px'}}>
            <p style={{fontSize:14.5, fontWeight:700, margin:'0 0 6px'}}>아직 작성된 후기가 없어요.</p>
            <p className="meta" style={{margin:0}}>모임이 끝나면 참가자의 첫 후기를 확인할 수 있어요.</p>
          </div>:<>{paged.map((r,i)=><Reveal key={r.id} delay={i*80}><div className="card" style={{marginBottom:12, padding:'16px 18px'}}>
            <div className="row" style={{gap:8, marginBottom:8, justifyContent:'space-between'}}>
              <div className="row" style={{gap:8}}><Av name={r.author_name} size={28}/><b style={{fontSize:13.5}}>{r.author_name}</b><span className="meta">· {r.meetup_title} · {timeAgo(new Date(r.created_at).getTime())}</span></div>
              {(isAdmin||r.author_email===S.acctEmail)&&<button style={{background:'none',border:'none',color:'var(--c-red)',fontSize:12,cursor:'pointer'}} onClick={()=>{ if(isAdminUser(S)&&r.author_email&&r.author_email!==S.acctEmail){ set({adminRemove:{kind:'post', id:r.id, ownerEmail:r.author_email, title:(r.meetup_title||r.body||'후기').slice(0,30)}}); return;} removePost(r.id, loadReview); }}>삭제</button>}
            </div>
            {(r.meetup_when||r.meetup_place||r.meetup_size)&&<div className="meta" style={{marginBottom:8, fontSize:12}}>{[r.meetup_when,r.meetup_place,r.meetup_size].filter(Boolean).join(' · ')}</div>}
            <p style={{fontSize:13.5, color:'var(--c-sub)', margin:0, lineHeight:1.6}}>{r.body}</p>
          </div></Reveal>)}
          <Pagination page={page} total={totalPages} onChange={n=>set({reviewPage:n})}/></>}
        </>; })()}
      </>}

{tab===3&&<>
        {isAdmin&&<div className="row" style={{gap:8, marginBottom:16}}>
          <DSBtn label={S.noticeComposeOpen?'취소':'공지 작성'} size="md" onClick={()=>set({noticeComposeOpen:!S.noticeComposeOpen})}/>
          <span className="meta" style={{alignSelf:'center'}}>운영진 계정으로 로그인 중이라 공지를 작성할 수 있어요</span>
        </div>}
        {isAdmin&&S.noticeComposeOpen&&<div className="card" style={{marginBottom:16}}>
          <b style={{fontSize:15}}>공지사항 작성</b>
          <div className="row" style={{gap:8, margin:'10px 0'}}>
            <button type="button" style={{background:'var(--c-fill)', border:'none', borderRadius:6, padding:'6px 12px', fontFamily:'inherit', fontSize:13, fontWeight:800, cursor:'pointer'}} onClick={insertBold}>B 굵게</button>
            <select value={S.noticeDraftSize||'normal'} onChange={e=>set({noticeDraftSize:e.target.value})} style={{border:'1px solid var(--c-line)', borderRadius:6, padding:'6px 10px', fontFamily:'inherit', fontSize:13, outline:'none'}}>
              <option value="normal">보통 글자 크기</option>
              <option value="large">크게</option>
              <option value="xlarge">아주 크게</option>
            </select>
            <span className="meta" style={{alignSelf:'center'}}>강조하고 싶은 문구를 선택하고 "B 굵게"를 누르세요</span>
          </div>
          <textarea ref={noticeTextareaRef} value={S.noticeDraftBody} onChange={e=>set({noticeDraftBody:e.target.value})} placeholder="공지 내용을 입력하세요" rows={5} style={{width:'100%',border:'1px solid var(--c-line)',borderRadius:8,padding:'10px 14px',fontFamily:'inherit',fontSize:14,marginBottom:8,outline:'none',resize:'none'}}/>
          <div style={{marginBottom:12}}>
            <div className="meta" style={{marginBottom:4}}>미리보기</div>
            <div className="card" style={{background:'var(--c-fill-a)', padding:'10px 14px'}} dangerouslySetInnerHTML={{__html: renderNoticeBody(S.noticeDraftBody)||'<span style="color:var(--c-faint)">내용을 입력하면 여기 미리보기가 나와요</span>'}}/>
          </div>
          <DSBtn label="게시하기" size="md" disable={!S.noticeDraftBody.trim()} onClick={submitNotice}/>
        </div>}
        {noticePosts.length===0?<div className="card" style={{textAlign:'center', padding:'32px 20px'}}>
          <p style={{fontSize:14.5, fontWeight:700, margin:0}}>등록된 공지사항이 없어요.</p>
        </div>:noticePosts.map((p,i)=><Reveal key={p.id} delay={i*70}><div className="card" style={{marginBottom:12, padding:'16px 18px'}}>
          <div className="row" style={{gap:8, marginBottom:8, justifyContent:'space-between'}}>
            <div className="row" style={{gap:8}}><span className="chip green" style={{fontSize:11}}>운영진</span><b style={{fontSize:13.5}}>공지사항</b><span className="meta">· {timeAgo(new Date(p.created_at).getTime())}</span></div>
            {isAdmin&&<button style={{background:'none',border:'none',color:'var(--c-red)',fontSize:12,cursor:'pointer'}} onClick={()=>removePost(p.id, loadNotice)}>삭제</button>}
          </div>
          <div dangerouslySetInnerHTML={{__html: renderNoticeBody(p.body)}} style={{color:'var(--c-text)', lineHeight:1.6, fontSize:p.font_size==='xlarge'?19:p.font_size==='large'?16:14}}/>
        </div></Reveal>)}
      </>}
    </div>
    <Footer go={go} set={set}/>
  </div>;
}
function WScrQnAInline({S,set,go}){
  const {useState, useEffect} = React;
  const tabs=['전체','해외거주 Q&A','친구만들기','귀국 적응'];
  const t=S.qtab||0;
  const [serverPosts, setServerPosts] = useState([]);
  useEffect(()=>{ fetchPosts('qna').then(setServerPosts); }, []);
  const base=DEMO_MODE?[{cat:1,tag:'해외거주 Q&A',title:'지금 영국에서 워홀 중인데, 저 같은 사람 여기 있나요?',body:'런던 온 지 3개월 됐는데 여기서도 한인 유학생·워홀러 분들과 연결돼서 지내고 싶어요.',meta:'지은 · 런던 · 공감 5'},{cat:2,tag:'친구만들기',title:'서울 사는 미국 고등학교 출신 분 계신가요?',body:'귀국한 지 1년 됐는데 아직도 유학 시절 얘기할 친구가 없어요.',meta:'태호 · 서울 · 공감 3'},{cat:1,tag:'해외거주 Q&A',title:'토론토 워홀 비자 팁 나눠요',body:'워홀 비자 준비하며 헷갈렸던 부분 정리해봤어요.',meta:'하나 · 토론토 · 공감 6'},{cat:3,tag:'귀국 적응',title:'귀국하고 다시 적응하는 데 얼마나 걸리셨나요',body:'생각보다 역문화충격이 크네요. 다들 어떻게 극복하셨어요?',meta:'유진 · 서울 · 공감 4'}]:[];
  const tagOf = i => ['전체','해외거주 Q&A','친구만들기','귀국 적응'][i];
  const catOf = topic => tagOf(1)===topic?1:tagOf(2)===topic?2:tagOf(3)===topic?3:0;
  const fromServer = serverPosts.map(p=>{ const sp=qnaSplit(p.body); return {...p, ...sp, cat:catOf(p.topic), tag:p.topic, postSource:'qna'}; });
  const posts=[...fromServer, ...base].filter(p=>t===0||p.cat===t);
  return <div>
    <div className="row" style={{gap:6, marginBottom:16, overflowX:'auto'}}>{tabs.map((tb,i)=><Chip key={tb} label={tb} onClick={()=>set({qtab:i})} on={t===i}/>)}</div>
    {posts.length===0&&<div className="card" style={{textAlign:'center', padding:'32px 20px', marginBottom:12}}>
      <p style={{fontSize:14.5, fontWeight:700, margin:'0 0 6px'}}>아직 등록된 질문이 없어요.</p>
      <p className="meta" style={{margin:'0 0 14px'}}>유학 생활, 귀국 후 생활, 모임에 관해 궁금한 점을 처음으로 남겨보세요.</p>
      <DSBtn label="첫 질문 남기기" size="md" onClick={()=>guardAuth(S,set,go,()=>go('qna',{composeOpen:true, draftTag:1, draftTitle:'', draftBody:''}))}/>
    </div>}
    {posts.map((p,i)=><Reveal key={p.id||p.title+i} delay={Math.min(i,6)*70}><div className="card" style={{marginBottom:12, cursor:'pointer', padding:'16px 18px'}} onClick={()=>set({qnaDetailPost:p, screen:'postdetail'})}>
      <Chip label={p.tag} tone="primary"/>
      <div style={{fontSize:15.5,fontWeight:700,margin:'10px 0 6px'}}>{p.title}</div>
      <p style={{fontSize:13.5,color:'var(--c-sub)',margin:'0 0 10px',lineHeight:1.6}}>{p.body}</p>
      <span className="meta">{p.meta || (p.postSource==='qna' ? `${p.author_name||'익명'} · ${timeAgo(new Date(p.created_at).getTime())}` : '')}</span>
    </div></Reveal>)}
    <button className="card" style={{width:'100%', textAlign:'left', cursor:'pointer', fontFamily:'inherit', background:'var(--c-primary-bg)', border:'none', padding:'14px 16px'}} onClick={()=>go('qna')}>Q&A 전체 보기 · 검색 · 글쓰기</button>
  </div>;
}
function WScrRegion({S,set,go}){
  const rows=[['cur','현재 거주','IconNormalLocation2NameLocationFillFillTrue'],['move','이동(귀국) 예정','IconNormalChangeNameChange'],['interest','관심 지역','IconNormalGlobe2NameGlobeFillFalse']];
  return <div className="wapp"><WNav S={S} go={go} set={set}/>
    <div className="wmain" style={{maxWidth:640}}>
      <div className="wsect"><h2>지역 설정</h2></div>
      <p style={{margin:'0 0 18px',fontSize:14,color:'var(--c-sub)',lineHeight:1.6}}>거주·귀국·관심 지역을 나눠 두면 지금 있는 곳과 돌아갈 곳의 모임을 함께 추천해드려요.</p>
      {rows.map(r=>{const editing=S.regionEdit===r[0]; const isCountry=r[0]==='cur'||r[0]==='interest'; const isMove=r[0]==='move'; const locked=r[0]==='cur'&&S.locGranted; return <div key={r[0]} className="card" style={{display:'flex',alignItems:editing&&(isCountry||isMove)?'flex-start':'center',gap:14,marginBottom:10}}>
        <Ic n={r[2]} s={22} c="var(--c-primary)" style={{marginTop:editing&&(isCountry||isMove)?2:0}}/>
        {locked?<>
          <span style={{flex:1}}><span className="meta">{r[1]}</span><br/><b style={{fontSize:16}}>{S.regionVals[r[0]]}</b></span>
          <Chip icon="IconNormalLocation2NameLocationFillFillTrue" label="위치 자동 설정" tone="violet"/>
        </>:editing?(isMove?<div style={{flex:1}}>
          <div className="meta" style={{marginBottom:6}}>귀국 예정일</div>
          <input type="date" value={S.moveDate} onChange={e=>set({moveDate:e.target.value})} style={{width:'100%',border:'1px solid var(--c-line)',borderRadius:8,padding:'8px 12px',fontFamily:'inherit',fontSize:14,outline:'none',marginBottom:10}}/>
          <div className="meta" style={{marginBottom:6}}>귀국 국가</div>
          <CountrySelect value={S.moveCountry} onChange={v=>set({moveCountry:v})}/>
          <button style={{marginTop:8,background:'var(--c-primary)',color:'#fff',border:'none',borderRadius:8,padding:'8px 14px',fontFamily:'inherit',fontSize:13,fontWeight:700,cursor:'pointer'}} onClick={()=>{
            const d = S.moveDate ? new Date(S.moveDate) : null;
            const label = d ? `${d.getMonth()+1}월 ${d.getDate()}일` : S.regionVals.move.split(' · ')[0];
            set({regionVals:{...S.regionVals, move:`${label} · ${S.moveCountry}`}, regionEdit:null});
          }}>저장</button>
          <button style={{marginTop:8,marginLeft:8,background:'none',color:'var(--c-sub)',border:'1px solid var(--c-line)',borderRadius:8,padding:'8px 14px',fontFamily:'inherit',fontSize:13,fontWeight:700,cursor:'pointer'}} onClick={()=>set({regionVals:{...S.regionVals, move:'설정 안 함'}, regionEdit:null, moveDate:''})}>비워두기</button>
        </div>:isCountry?<div style={{flex:1}}>
          <div className="meta" style={{marginBottom:6}}>{r[1]} — 국가 선택</div>
          <CountrySelect value={S.regionDraft} onChange={v=>set({regionDraft:v})}/>
          <button style={{marginTop:8,background:'var(--c-primary)',color:'#fff',border:'none',borderRadius:8,padding:'8px 14px',fontFamily:'inherit',fontSize:13,fontWeight:700,cursor:'pointer'}} onClick={()=>set({regionVals:{...S.regionVals,[r[0]]:S.regionDraft||S.regionVals[r[0]]}, regionEdit:null})}>저장</button>
        </div>:<>
          <input autoFocus value={S.regionDraft} onChange={e=>set({regionDraft:e.target.value})} onKeyDown={e=>{if(e.key==='Enter') set({regionVals:{...S.regionVals,[r[0]]:S.regionDraft||S.regionVals[r[0]]}, regionEdit:null});}} style={{flex:1,border:'1px solid var(--c-line)',borderRadius:8,padding:'8px 12px',fontFamily:'inherit',fontSize:15,outline:'none'}}/>
          <button style={{background:'var(--c-primary)',color:'#fff',border:'none',borderRadius:8,padding:'8px 14px',fontFamily:'inherit',fontSize:13,fontWeight:700,cursor:'pointer'}} onClick={()=>set({regionVals:{...S.regionVals,[r[0]]:S.regionDraft||S.regionVals[r[0]]}, regionEdit:null})}>저장</button>
        </>):<>
          <button style={{flex:1,background:'none',border:'none',textAlign:'left',cursor:'pointer',fontFamily:'inherit',padding:0}} onClick={()=>set({regionEdit:r[0], regionDraft:S.regionVals[r[0]]})}><span className="meta">{r[1]}</span><br/><b style={{fontSize:16}}>{S.regionVals[r[0]]}</b></button>
          <Chip label={r[0]==='move'?'선택':'필수'} tone={r[0]==='move'?'line':'primary'}/>{/* 2026-07-30 확정: 이동예정=선택, 관심지역=필수 */}
          <button className="iconbtn" aria-label="수정" onClick={()=>set({regionEdit:r[0], regionDraft:S.regionVals[r[0]]})}><Ic n="IconNormalPencil2NamePencilFillFalse" s={17} c="var(--c-faint)"/></button>
        </>}
      </div>;})}
      {S.locGranted&&<p className="meta" style={{margin:'-2px 2px 14px', lineHeight:1.6}}>현재 거주 지역은 위치 정보로 자동 설정돼 직접 바꿀 수 없어요. 변경하려면 브라우저의 위치 권한을 다시 설정해주세요.</p>}
      <div className="card" style={{marginBottom:10}}>
        <span className="meta">체류 기간 유형</span>
        <div style={{display:'flex',gap:8,marginTop:10,flexWrap:'wrap',justifyContent:'space-evenly'}}>{['단기 여행','교환학기','유학생','워홀','장기거주'].map((t,i)=><Chip key={t} label={t} onClick={()=>set({stayType:t})} on={(S.stayType||'교환학기')===t}/>)}</div>
      </div>
      <DSBtn label="저장하기" onClick={()=>go('home',{toast:'지역 설정이 저장됐어요 — 홈 추천에 바로 반영돼요'})}/>
    </div>
  </div>;
}
function WScrBrowseRegions({S,set,go}){
  const {useState, useEffect, useRef} = React;
  const events = useEvents();
  const initQ = React.useMemo(()=>parseHashQuery(location.hash), []);
  const validKind = ['all','member','official'];
  const type = S.browseregionsType||'all';
  const setType = t => { set({browseregionsType:t}); };
  const skipQuerySync = useRef(true); // 마운트 시 1회는 URL이 이미 맞는 상태이므로 재-push 방지
  const CITY={KR:'서울',GB:'런던',US:'뉴욕',CA:'토론토',BE:'브뤼셀'};
  const curCode = countryOf(S.regionVals.cur).code;
  const ALL=DEMO_MODE?[
    {code:'KR',id:'m2',title:'강남 밤모임',when:'오늘(목) 오후 8시',size:'4~6명',cardTags:[['친구 만들기','primary'],['조용한 대화','']],soloLine:'혼자 참여 환영',capMax:6,capJoined:4,host:{name:'지은',reviews:24},dateBucket:'today'},
    {code:'GB',id:'c-gb1',title:'런던 한인 브런치 모임',when:'토 오전 11시',size:'4~6명',cardTags:[['브런치','primary'],['조용한 대화','']],soloLine:'첫 참가자 환영 · 대기 1',capMax:6,capJoined:2,dateBucket:'week'},
    {code:'US',id:'c-us1',title:'뉴욕 커리어 커피챗',when:'오늘(수) 오후 6시',size:'4~6명',cardTags:[['커리어','primary'],['조용한 대화','']],soloLine:'첫 참가자 환영 · 대기 1',capMax:6,capJoined:3,dateBucket:'today'},
    {code:'CA',id:'c-ca1',title:'토론토 유학생 네트워킹',when:'금 오후 7시',size:'4~6명',cardTags:[['네트워킹','primary'],['조용한 대화','']],soloLine:'첫 참가자 환영 · 대기 1',capMax:6,capJoined:2,dateBucket:'week'},
    {code:'BE',id:'c-be1',title:'브뤼셀 유학생 브런치',when:'토 오전 11시',size:'4~6명',cardTags:[['브런치','primary'],['조용한 대화','']],soloLine:'첫 참가자 환영 · 대기 1',capMax:6,capJoined:1,dateBucket:'week'},
    {code:'KR',id:'m1',title:'유학생 귀국 환영 웰컴파티',when:'8월 2일(토) 오후 6시',size:'정원 40명',cardTags:[['동문교류','primary'],['활발한 네트워킹','']],soloLine:'혼자 참여 환영',capMax:40,capJoined:37,host:{name:'윤영진',reviews:34},dateBucket:'month'},
    {code:'GB',id:'c-gb2',title:'런던 스터디 카페 모임',when:'화 오후 7시',size:'4~6명',cardTags:[['스터디','primary'],['첫 참가자 환영','green']],soloLine:'방금 등록됨',capMax:6,capJoined:5,dateBucket:'week'},
    {code:'US',id:'c-us2',title:'뉴욕 러닝 크루',when:'토 오전 9시',size:'4~6명',cardTags:[['운동','primary'],['첫 참가자 환영','green']],soloLine:'방금 등록됨',capMax:6,capJoined:5,dateBucket:'week'},
    {code:'CA',id:'c-ca2',title:'토론토 스터디 모임',when:'일 오후 2시',size:'4~6명',cardTags:[['스터디','primary'],['첫 참가자 환영','green']],soloLine:'방금 등록됨',capMax:6,capJoined:5,dateBucket:'week'},
    {code:'BE',id:'c-be2',title:'브뤼셀 스터디 모임',when:'화 오후 7시',size:'4~6명',cardTags:[['스터디','primary'],['첫 참가자 환영','green']],soloLine:'방금 등록됨',capMax:6,capJoined:5,dateBucket:'week'},
    {code:'KR',id:'x1',title:'귀국 취준 커피챗',when:'수 오후 8시',size:'4~6명',cardTags:[['커리어','primary'],['조용한 대화','']],soloLine:'첫 참가자 환영 · 대기 1',capMax:6,capJoined:6,dateBucket:'week'},
    {code:'GB',id:'x2',title:'한인 유학생 펍모임',when:'금 오후 8시',size:'4~6명',cardTags:[['펍모임','primary']],soloLine:'혼자 참여 환영',capMax:6,capJoined:6,dateBucket:'week'},
    {code:'US',id:'x6',title:'뉴욕 유학생 네트워킹 브런치',when:'일 오전 11시',size:'4~6명',cardTags:[['네트워킹','primary']],soloLine:'혼자 참여 환영',capMax:6,capJoined:6,dateBucket:'week'},
    {code:'CA',id:'x3',title:'워홀러 브런치 모임',when:'토 오전 11시',size:'4~6명',cardTags:[['CA 토론토','line']],soloLine:'첫 참가자 비율 70%',capMax:6,capJoined:6,dateBucket:'week'},
    {code:'BE',id:'x7',title:'브뤼셀 유학생 모임',when:'금 오후 7시',size:'4~6명',cardTags:[['BE 브뤼셀','line']],soloLine:'혼자 참여 환영',capMax:6,capJoined:6,dateBucket:'week'},
    {code:'ON',id:'on1',title:'온라인 영어 회화 스터디',when:'매주 화 오후 9시 · 화상',size:'4~6명',cardTags:[['스터디','primary'],['첫 참가자 환영','green']],soloLine:'방금 등록됨',capMax:6,capJoined:3,dateBucket:'week',online:true},
    {code:'ON',id:'on2',title:'온라인 커리어 코칭 톡',when:'목 오후 8시 · 화상',size:'4~6명',cardTags:[['커리어','primary']],soloLine:'첫 참가자 환영 · 대기 1',capMax:6,capJoined:4,dateBucket:'week',online:true},
  ]:[];
  const OFFICIAL = events.map(e=>({code:'KR', id:e.id, title:e.title, when:e.when, size:e.mode==='firstcome'?`정원 ${e.cap}명`:'추첨제', cardTags:[[e.tag, e.tone]], soloLine:e.cost, capMax:e.mode==='firstcome'?e.cap:null, capJoined:e.mode==='firstcome'?e.applied:null, official:true, isEvent:true, dateBucket:'month'}));
  const base = (type==='official'?OFFICIAL:type==='member'?ALL:[...ALL, ...OFFICIAL]);
  const ACTIVITIES = [...new Set(base.map(m=>m.cardTags&&m.cardTags[0]&&m.cardTags[0][0]).filter(t=>t&&!/^[A-Z]{2} /.test(t)))];
  const popupCat = POPUP_ACTIVITIES.find(([label])=>label===S.pendingActivityFilter);
  const matchedActivity = popupCat ? ACTIVITIES.find(a=>popupCat[2].test(a)) : null;
  const [filters,setFilters] = useState(()=>{
    const region = initQ.get('region');
    const date = initQ.get('date');
    const activity = initQ.get('activity');
    return {
      region: region && (CITY[region]||region==='all') ? region : ((S.pendingActivityFilter||S.pendingCustomActivity)?'all':(CITY[curCode]?curCode:'all')),
      date: ['today','week','all'].includes(date) ? date : 'all',
      activity: activity || matchedActivity || 'all', // 목록 없는 값이면 아래 effect에서 안전하게 정리
      online: initQ.get('online')==='true',
      beginner: initQ.get('beginner')==='true',
    };
  });
  useEffect(()=>{ if(S.pendingActivityFilter||S.pendingCustomActivity) set({pendingActivityFilter:null, pendingCustomActivity:null}); }, []);
  // 마운트 시 kind 쿼리 유효성 검사 후 1회 반영
  useEffect(()=>{ const kind=initQ.get('kind'); if(validKind.includes(kind) && kind!==type) setType(kind); }, []);
  // activity는 목록(ACTIVITIES) 계산 이후에만 검증 가능 — 잘못된 값이면 조용히 'all'로 정리
  useEffect(()=>{ if(filters.activity!=='all' && !ACTIVITIES.includes(filters.activity)) setFilters(f=>({...f, activity:'all'})); }, [ACTIVITIES.join('|')]);
  const patch = p => setFilters(f=>({...f,...p}));
  const toggle = (key,val) => patch({[key]: filters[key]===val?'all':val});
  // 필터·구분(type) 변경을 쿼리로 반영 — 기본값 생략, 실제 변경 시에만 push(중복 방지)
  useEffect(()=>{
    syncQuery('#/browseregions', {kind: type==='all'?null:type, region: filters.region==='all'?null:filters.region, date: filters.date==='all'?null:filters.date, activity: filters.activity==='all'?null:filters.activity, online: filters.online?'true':null, beginner: filters.beginner?'true':null}, skipQuerySync);
  }, [type, filters.region, filters.date, filters.activity, filters.online, filters.beginner]);
  // 브라우저 뒤로가기·앞으로가기로 이 화면에 쿼리가 다시 적용될 때 상태를 반영(재-push 방지)
  useEffect(()=>{
    const onPop = () => {
      if (!location.hash.startsWith('#/browseregions')) return;
      const q = parseHashQuery(location.hash);
      skipQuerySync.current = true;
      const kind = q.get('kind'); if (validKind.includes(kind)) setType(kind); else if (!q.has('kind')) setType('all');
      setFilters({
        region: q.get('region') && (CITY[q.get('region')]||q.get('region')==='all') ? q.get('region') : 'all',
        date: ['today','week'].includes(q.get('date')) ? q.get('date') : 'all',
        activity: q.get('activity') || 'all',
        online: q.get('online')==='true',
        beginner: q.get('beginner')==='true',
      });
    };
    window.addEventListener('popstate', onPop);
    return ()=>window.removeEventListener('popstate', onPop);
  }, []);
  const list = base.filter(m=>{
    if(!meetupVisibleTo(m, S.viewAsUser)) return false;
    if(filters.region!=='all' && m.code!==filters.region) return false;
    if(filters.date!=='all' && (m.dateBucket||'week')!==filters.date) return false;
    if(filters.activity!=='all' && !(m.cardTags&&m.cardTags[0]&&m.cardTags[0][0]===filters.activity)) return false;
    if(filters.online && !m.online) return false;
    if(filters.beginner && !(m.soloLine&&(m.soloLine.includes('첫 참가자')||m.soloLine.includes('방금 등록')))) return false;
    return true;
  });
  const anyFilterOn = filters.region!=='all'||filters.date!=='all'||filters.activity!=='all'||filters.online||filters.beginner;
  return <div className="wapp"><WNav S={S} go={go} set={set}/>
    <div className="wmain" style={{maxWidth:1080}}>
      <div className="wsect"><h2>모임 찾기</h2></div>
      {type==='official'&&setType('all')}
      <div className="row" style={{gap:8, marginBottom:14, flexWrap:'wrap'}}>
        <Chip label="전체" onClick={()=>setType('all')} on={type==='all'}/>
        <Chip label="회원 모임" onClick={()=>setType('member')} on={type==='member'}/>
      </div>
      {/* 공식 이벤트는 이벤트 탭으로 통일(2026-07-30 사용자 확정) — 여기선 안내 링크만 */}
      <button className="card row" style={{width:'100%', gap:10, marginBottom:14, cursor:'pointer', fontFamily:'inherit', textAlign:'left', padding:'12px 16px'}} onClick={()=>go('events')}>
        <Ic n="IconNormalMegaphoneNameMegaphoneFillFalse" s={16} c="var(--c-primary)"/>
        <span style={{flex:1, fontSize:13.5}}><b>운영진이 여는 공식 이벤트</b>는 이벤트 탭에서 확인하세요</span>
        <Ic n="IconNormalChevronRightNameChevronRightTightFalseThick" s={13} c="var(--c-faint)"/>
      </button>
      <div className="row" style={{gap:8, marginBottom:12, flexWrap:'wrap'}}>
        <Chip icon="IconNormalCalendarNameCalendar" label="오늘" onClick={()=>toggle('date','today')} on={filters.date==='today'}/>
        <Chip label="이번 주" onClick={()=>toggle('date','week')} on={filters.date==='week'}/>
        <Chip icon="IconNormalVideoNameVideo" label="온라인" onClick={()=>patch({online:!filters.online})} on={filters.online}/>
        <Chip label="첫 참가자 환영" onClick={()=>patch({beginner:!filters.beginner})} on={filters.beginner}/>
        {anyFilterOn&&<Chip label="필터 초기화" onClick={()=>setFilters({region:'all',date:'all',activity:'all',online:false,beginner:false})}/>}
      </div>
      <div className="card" style={{padding:'14px 16px', marginBottom:20, display:'flex', flexDirection:'column', gap:10}}>
        <div>
          <div className="meta" style={{marginBottom:8}}>지역</div>
          <div className="row" style={{gap:6, flexWrap:'wrap'}}>
            <Chip label="전체" onClick={()=>patch({region:'all'})} on={filters.region==='all'}/>
            {Object.entries(CITY).map(([code,city])=><Chip key={code} label={city+(code===curCode?' · 현재 위치':'')} onClick={()=>patch({region:code})} on={filters.region===code}/>)}
          </div>
        </div>
        <div>
          <div className="meta" style={{marginBottom:8}}>활동</div>
          <div className="row" style={{gap:6, flexWrap:'wrap'}}>
            <Chip label="전체" onClick={()=>patch({activity:'all'})} on={filters.activity==='all'}/>
            {ACTIVITIES.map(a=><Chip key={a} label={a} onClick={()=>toggle('activity',a)} on={filters.activity===a}/>)}
          </div>
        </div>
      </div>
      <p style={{margin:'0 0 18px',fontSize:14,color:'var(--c-sub)'}}>{anyFilterOn?`조건에 맞는 모임 ${list.length}개예요.`:'국가 상관없이 최근 활발한 순으로 보여드려요. 모두모여 공식 모임은 운영진이 직접 진행해요.'}</p>
      {list.length===0?
        <div className="card" style={{textAlign:'center', padding:'32px 20px'}}>
          <Ic n="IconNormalTelescopeNameTelescope" s={28} c="var(--c-faint)"/>
          {anyFilterOn?<>
            <p style={{margin:'12px 0 4px', fontSize:14.5, fontWeight:700}}>현재 조건에 맞는 모임이 없어요.</p>
            <div className="row" style={{gap:8, justifyContent:'center', marginTop:12}}><DSBtn label="필터 초기화" variant="outlined" size="md" onClick={()=>setFilters({region:'all',date:'all',activity:'all',online:false,beginner:false})}/><DSBtn label="다른 활동 둘러보기" size="md" onClick={()=>go('explore')}/></div>
          </>:type==='official'?<>
            <p style={{margin:'12px 0 4px', fontSize:14.5, fontWeight:700}}>아직 예정된 공식 이벤트가 없어요.</p>
            <p className="meta" style={{margin:0}}>모두모여 운영팀이 직접 기획하거나 확인한 이벤트가 등록되면 여기에서 확인할 수 있어요.</p>
          </>:<>
            <p style={{margin:'12px 0 4px', fontSize:14.5, fontWeight:700}}>아직 등록된 모임이 없어요.</p>
            <p className="meta" style={{margin:'0 0 12px'}}>새로운 사람들과 하고 싶은 활동이 있다면 첫 모임을 만들어보세요.</p>
            <div className="row" style={{gap:8, justifyContent:'center'}}><DSBtn label="첫 모임 만들기" size="md" onClick={()=>startCreateMeetup(S,set,go)}/><DSBtn label="다른 지역 보기" variant="outlined" size="md" onClick={()=>patch({region:'all'})}/></div>
          </>}
        </div>:
        <div className="wgrid">{list.map(m=><MeetCard key={(m.isEvent?'ev-':'')+m.id} m={m} onClick={()=>m.isEvent?go('eventdetail',{eventId:m.id}):(MEETUPS[m.id]?go('detail',{detailId:m.id}):go('detail',{detailId:m.id, tempDetail:synthDetailFromCard(m)}))}/>)}</div>}
    </div>
    <Footer go={go} set={set}/>
  </div>;
}
function WScrInterestRegion({S,set,go}){
  const meta=countryOf(S.regionVals.interest);
  const code=meta.code, city=meta.city;
  const DATA={
    GB:[{id:'c-gb1',title:'런던 한인 브런치 모임',when:'토 오전 11시',size:'4~6명',cardTags:[['브런치','primary'],['조용한 대화','']],soloLine:'첫 참가자 환영 · 대기 1'},{id:'x2',title:'한인 유학생 펍모임',when:'금 오후 8시',size:'4~6명',cardTags:[['GB 런던','line']],soloLine:'혼자 참여 환영'},{id:'c-gb2',title:'런던 스터디 카페 모임',when:'화 오후 7시',size:'4~6명',cardTags:[['스터디','primary']],soloLine:'방금 등록됨'},{id:'c-gb1p',title:'런던 유학생 펍모임',when:'지난 목 오후 8시',size:'4~6명',cardTags:[['펍모임','primary']],soloLine:'22명 참여 완료',expired:true}],
    US:[{id:'c-us1',title:'뉴욕 커리어 커피챗',when:'수 오후 6시',size:'4~6명',cardTags:[['커리어','primary'],['조용한 대화','']],soloLine:'첫 참가자 환영 · 대기 1'},{id:'x6',title:'뉴욕 유학생 네트워킹 브런치',when:'일 오전 11시',size:'4~6명',cardTags:[['US 뉴욕','line']],soloLine:'혼자 참여 환영'},{id:'c-us2',title:'뉴욕 러닝 크루',when:'토 오전 9시',size:'4~6명',cardTags:[['운동','primary']],soloLine:'방금 등록됨'},{id:'c-us1p',title:'뉴욕 유학생 네트워킹',when:'지난 일 오전 11시',size:'4~6명',cardTags:[['네트워킹','primary']],soloLine:'31명 참여 완료',expired:true}],
    CA:[{id:'c-ca1',title:'토론토 유학생 네트워킹',when:'금 오후 7시',size:'4~6명',cardTags:[['네트워킹','primary'],['조용한 대화','']],soloLine:'첫 참가자 환영 · 대기 1'},{id:'x3',title:'워홀러 브런치 모임',when:'토 오전 11시',size:'4~6명',cardTags:[['CA 토론토','line']],soloLine:'첫 참가자 비율 70%'},{id:'c-ca2',title:'토론토 스터디 모임',when:'일 오후 2시',size:'4~6명',cardTags:[['스터디','primary']],soloLine:'방금 등록됨'},{id:'c-ca1p',title:'토론토 워홀러 브런치',when:'지난 토 오전 11시',size:'4~6명',cardTags:[['브런치','primary']],soloLine:'19명 참여 완료',expired:true}],
    BE:[{id:'c-be1',title:'브뤼셀 유학생 브런치',when:'토 오전 11시',size:'4~6명',cardTags:[['브런치','primary'],['조용한 대화','']],soloLine:'첫 참가자 환영 · 대기 1'},{id:'x7',title:'브뤼셀 유학생 모임',when:'금 오후 7시',size:'4~6명',cardTags:[['BE 브뤼셀','line']],soloLine:'혼자 참여 환영'},{id:'c-be2',title:'브뤼셀 스터디 모임',when:'화 오후 7시',size:'4~6명',cardTags:[['스터디','primary']],soloLine:'방금 등록됨'},{id:'c-be1p',title:'브뤼셀 유학생 모임',when:'지난 금 오후 7시',size:'4~6명',cardTags:[['모임','primary']],soloLine:'15명 참여 완료',expired:true}],
    KR:[{id:'x5',title:'서울 귀국생 네트워킹',when:'토 오후 3시',size:'10명 내외',cardTags:[['KR 서울','line']],soloLine:'혼자 참여 환영'}],
  };
  const list=DATA[code]||genCityMeetups(city);
  return <div className="wapp"><WNav S={S} go={go} set={set}/>
    <div className="wmain" style={{maxWidth:900}}>
      <div className="wsect"><h2>{city} 모임</h2></div>
      <p style={{margin:'0 0 18px',fontSize:14,color:'var(--c-sub)'}}>관심 지역으로 설정한 {city}의 모임이에요.</p>
      <div className="wgrid">{list.map(m=><MeetCard key={m.id} m={m} onClick={()=>MEETUPS[m.id]?go('detail',{detailId:m.id}):go('detail',{detailId:m.id, tempDetail:synthDetailFromCard(m)})}/>)}</div>
    </div>
  </div>;
}
function WScrEmpty({S,set,go}){
  const n=S.interest+(S.interested?1:0);
  return <div className="wapp"><WNav S={S} go={go} set={set}/>
    <div className="wmain" style={{maxWidth:640}}>
      <button className="wback" onClick={()=>go('home')}><Ic n="IconNormalChevronLeftNameChevronLeftTightFalseThick" s={14}/>홈으로</button>
      <div style={{textAlign:'center',padding:'20px 0 24px'}}>
        <Ph h={140} r={18} label="빈 지역" icon="IconNormalTelescopeNameTelescope" style={{margin:'0 auto',maxWidth:280}}/>
        <h2 style={{fontSize:20,margin:'20px 0 8px'}}>아직 맨체스터 모임이 없어요</h2>
        <p style={{margin:0,fontSize:14,color:'var(--c-sub)'}}>대신, 열리면 가장 먼저 알려드릴게요.</p>
      </div>
      <div className="card" style={{marginBottom:14}}>
        <b style={{fontSize:15}}>맨체스터에서 모임이 열리면 알려주세요</b>
        <div className="row" style={{gap:8,margin:'10px 0 14px'}}><Ic n="IconNormalBellPlusNameBellPlus" s={18} c="var(--c-primary)"/><span style={{fontSize:14}}>지금까지 <b style={{color:'var(--c-primary)'}}>{n}명</b>이 기다리고 있어요</span></div>
        <DSBtn label={S.interested?'관심 등록 완료':'관심 등록하기'} variant={S.interested?'outlined':'solid'} color={S.interested?'assistive':'primary'} size="md" onClick={()=>guardAuth(S,set,go,()=>set({interested:!S.interested,toast:S.interested?null:'등록 완료 — 모임이 열리면 알려드려요'}))}/>
      </div>
      <div className="card" style={{marginBottom:14}}>
        <b style={{fontSize:15}}>5명 이상 관심 등록 시 운영진이 검토해요</b>
        <div className="meta" style={{margin:'10px 0 8px'}}>어떤 모임을 원하세요? (투표)</div>
        {[['펍모임 · 현지생활 적응',3],['브런치 · 친구 만들기',2],['취준 스터디 · 커리어',1]].map(v=>{const c=v[1]+(S.votes[v[0]]?1:0);
          return <button key={v[0]} className="row" style={{width:'100%',gap:8,padding:'10px 12px',marginBottom:8,border:'1px solid '+(S.votes[v[0]]?'var(--c-primary)':'var(--c-line)'),background:S.votes[v[0]]?'var(--c-primary-bg)':'var(--c-bg)',borderRadius:10,cursor:'pointer',fontFamily:'inherit',fontSize:14}} onClick={()=>guardAuth(S,set,go,()=>set({votes:{...S.votes,[v[0]]:!S.votes[v[0]]}}))}><span style={{flex:1,textAlign:'left'}}>{v[0]}</span><b style={{color:'var(--c-primary)'}}>{c}/5</b></button>;})}
      </div>
      <button className="card" style={{width:'100%',display:'flex',gap:12,alignItems:'center',cursor:'pointer',fontFamily:'inherit',textAlign:'left',marginBottom:14}} onClick={()=>startCreateMeetup(S,set,go,{toast:'모모가 첫 모임 개설을 도와드릴게요!'})}>
        <Ic n="IconNormalSparkleNameSparkle" s={22} c="var(--c-violet)"/><span style={{flex:1,fontSize:14}}><b>제가 첫 호스트가 될게요</b><br/><span className="meta">템플릿으로 쉽게 시작해요 · 첫 호스트 뱃지 제공</span></span>
      </button>
      <button className="card" style={{width:'100%',display:'flex',gap:12,alignItems:'center',cursor:'pointer',fontFamily:'inherit',textAlign:'left'}} onClick={()=>go('home',{region:'gb',toast:'가까운 도시 — 런던 모임을 보여드려요'})}>
        <Ic n="IconNormalCompassNameCompassFillFalse" s={22} c="var(--c-primary)"/><span style={{flex:1,fontSize:14}}><b>가까운 런던 모임 둘러보기</b><br/><span className="meta">기차 2시간 · 이번 주 3개 모임</span></span>
      </button>
    </div>
  </div>;
}
function WScrPrivacyAvoid({S, set, go}) {
  return <div className="wapp"><WNav S={S} go={go} set={set}/>
    <div className="wmain" style={{maxWidth:640}}>
      <button className="wback" onClick={()=>go('profile')}><Ic n="IconNormalChevronLeftNameChevronLeftTightFalseThick" s={14}/>내 정보로</button>
      <div className="wsect"><h2>지인 마주침 방지</h2></div>
      {DEMO_MODE?<PrivacyAvoidBody S={S} set={set}/>:<div className="card" style={{textAlign:'center', padding:'32px 20px'}}>
        <Ic n="IconNormalClockNameClockFillFalse" s={32} c="var(--c-faint)"/>
        <p style={{fontSize:14.5, fontWeight:700, margin:'14px 0 6px'}}>준비 중이에요</p>
        <p className="meta" style={{margin:0, lineHeight:1.6}}>아는 사람과 같은 모임에서 마주치지 않도록 설정하는 기능을 만들고 있어요.</p>
      </div>}
    </div>
  </div>;
}
// 이메일 미인증 상태일 때 보여주는 안내 — 실제 Supabase 인증 메일 재발송으로 연결(가짜 인증코드 입력칸 없음)
function EmailVerifyResendRow({S, set}){
  const {useState} = React;
  const [sent, setSent] = useState(false);
  const resend = () => {
    authResendConfirmation(S.acctEmail).then(res=>{
      if (res.skipped) { set({toast:'서버 연동이 안 돼 있어서 지금은 보낼 수 없어요'}); return; }
      if (res.error) { set({toast:res.error}); return; }
      setSent(true);
      set({toast:'인증 메일을 다시 보냈어요 — 메일함(스팸함 포함)을 확인해주세요'});
    });
  };
  return <div className="row" style={{gap:8, flexWrap:'wrap', alignItems:'center'}}>
    <Chip icon="IconNormalCircleInfo2NameCircleInfoFillFalse" label="아직 인증 전이에요" tone="orange"/>
    <button style={{background:'none', border:'1px solid var(--c-line)', borderRadius:8, padding:'7px 14px', fontFamily:'inherit', fontSize:13, cursor:'pointer'}} onClick={resend} disabled={sent}>{sent?'다시 보냈어요':'인증 메일 다시 보내기'}</button>
  </div>;
}
// 내가 쓴 Q&A 글 — posts 테이블에서 내 이메일로 작성한 것만 걸러서 보여줌(10단계: Q&A 서버화 이후 실데이터)
function MyQnaPostsList({S, set, go}){
  const {useState, useEffect} = React;
  const [posts, setPosts] = useState(null);
  const load = () => fetchPosts('qna').then(all=>setPosts(all.filter(p=>p.author_email===S.acctEmail)));
  useEffect(()=>{ load(); }, []);
  if (posts===null) return <p className="meta">불러오는 중...</p>;
  if (posts.length===0) return <p className="meta">아직 쓴 글이 없어요.</p>;
  return <>{posts.map(p=>{ const sp=qnaSplit(p.body); return <div key={p.id} className="card" style={{width:'100%', marginBottom:10, position:'relative'}}>
    <button style={{width:'100%', cursor:'pointer', fontFamily:'inherit', textAlign:'left', background:'none', border:'none', padding:0}} onClick={()=>set({qnaDetailPost:{...p, ...sp, postSource:'qna'}, screen:'postdetail'})}>
      <Chip label={p.topic} tone="primary"/>
      <div style={{fontSize:14, fontWeight:700, margin:'8px 0 4px'}}>{sp.title}</div>
      <div className="meta">{timeAgo(new Date(p.created_at).getTime())}</div>
    </button>
    <button style={{position:'absolute', top:10, right:10, background:'none', border:'none', color:'var(--c-red)', fontSize:12, cursor:'pointer'}} onClick={()=>deletePost(p.id).then(load)}>삭제</button>
  </div>; })}</>;
}
function WScrProfile({S,set,go}){
  const [profErr, setProfErr] = React.useState('');
  const [profSaving, setProfSaving] = React.useState(false);
  const [profSavedAt, setProfSavedAt] = React.useState(0);
  const tab = S.profileTab||0;
  if (S.authStatus !== 'authenticated') {
    return <div className="wapp"><WNav S={S} go={go} set={set}/>
      <div className="wmain" style={{maxWidth:480}}>
        <div className="wsect"><h2>내 정보</h2></div>
        <div className="card" style={{textAlign:'center', padding:'40px 20px'}}>
          <p style={{fontSize:15, fontWeight:700, margin:'0 0 8px'}}>로그인이 필요해요</p>
          <p className="meta" style={{margin:'0 0 20px'}}>회원가입하면 내 프로필, 참여 기록, 계정 설정을 볼 수 있어요.</p>
          <div style={{display:'flex', flexDirection:'column', gap:8}}>
            <DSBtn label="회원가입" size="md" onClick={()=>go('signup')}/>
            <DSBtn label="이미 계정이 있어요 · 로그인" variant="outlined" size="md" onClick={()=>go('signup')}/>
          </div>
        </div>
      </div>
    </div>;
  }
  return <div className="wapp"><WNav S={S} go={go} set={set}/>
    <div className="wmain" style={{maxWidth:680}}>
      <div className="wsect"><h2>내 정보</h2></div>
      <div className="wtabs">{['프로필','내 활동','회원정보'].map((t,i)=><button key={t} className={'qtab'+(tab===i?' on':'')} onClick={()=>set({profileTab:i})}>{t}</button>)}</div>
      {tab===0&&<>
      <div className="profile-stats">
        <div className="card" style={{textAlign:'center', padding:'16px 8px'}}><b style={{fontSize:22, display:'block'}}>{S.myHostedMeetups.length}</b><span className="meta">주최한 모임</span></div>
        <div className="card" style={{textAlign:'center', padding:'16px 8px'}}><b style={{fontSize:22, display:'block'}}>{S.completed.length}</b><span className="meta">참석한 모임</span></div>
        <div className="card" style={{textAlign:'center', padding:'16px 8px'}}><b style={{fontSize:22, display:'block', color:'var(--c-green)'}}>0</b><span className="meta">노쇼 이력</span></div>
        <div className="card" style={{textAlign:'center', padding:'16px 8px'}}><b style={{fontSize:22, display:'block'}}>{[S.locGranted,S.emailVerified].filter(Boolean).length+S.schoolBadges.length}</b><span className="meta">인증 배지</span></div>
      </div>
      <div className="wtwo profile-photo-form">
        <div style={{display:'flex', flexDirection:'column', alignItems:'center', gap:10}}>
          <PhotoUpload value={S.profile.photoUrl} onChange={url=>set({profile:{...S.profile, photoUrl:url}})} folder="profile" shape="circle" size={160} placeholder="사진 올리기"/>
        </div>
        <div className="card" style={{display:'flex', flexDirection:'column', gap:12}}>
          <div>
            <div className="meta" style={{marginBottom:6}}>닉네임
          </div>
            <input value={S.profile.nickname} onChange={e=>set({profile:{...S.profile, nickname:e.target.value}})} style={{width:'100%', border:'1px solid var(--c-line)', borderRadius:8, padding:'10px 14px', fontFamily:'inherit', fontSize:14, outline:'none'}}/>
            {S.profileNickConflict&&<div role="alert" className="notice orange" style={{marginTop:8}}><Ic n="IconNormalCircleInfo2NameCircleInfoFillFalse" s={15}/><span><b>이 닉네임은 이미 다른 회원이 사용 중이에요.</b> 다른 닉네임으로 바꾸고 아래 [프로필 저장]을 눌러야 확정돼요.</span></div>}
          </div>
          <div>
            <div className="meta" style={{marginBottom:6}}>학교 (선택)</div>
            <SchoolSelect value={S.profile.school} onChange={v=>set({profile:{...S.profile, school:v}})}/>
          </div>
          <div>
            <div className="meta" style={{marginBottom:6}}>한줄 소개</div>
            <textarea value={S.profile.bio} onChange={e=>set({profile:{...S.profile, bio:e.target.value}})} rows={2} style={{width:'100%', border:'1px solid var(--c-line)', borderRadius:8, padding:'10px 14px', fontFamily:'inherit', fontSize:14, outline:'none', resize:'none'}}/>
          </div>
          <div>
            <div className="meta" style={{marginBottom:8}}>관심사 (최대 3개)</div>
            <div style={{display:'flex', gap:8, flexWrap:'wrap'}}>{INTERESTS_POOL.map(t=>{const arr=S.profile.interests||[]; const has=arr.includes(t); return <Chip key={t} label={t} onClick={()=>set({profile:{...S.profile, interests: has?arr.filter(x=>x!==t):(arr.length<3?[...arr,t]:arr)}})} on={has}/>;})}</div>
            <button style={{background:'none', border:'none', color:'var(--c-primary)', fontFamily:'inherit', fontSize:12.5, fontWeight:600, cursor:'pointer', padding:'8px 0 0'}} onClick={()=>set({screen:'home', forceActivityPicker:true})}>관심 활동 다시 선택하기</button>
          </div>
          <label className="row" style={{gap:8, cursor:'pointer', fontSize:13.5, marginTop:2}}>
            <input type="checkbox" checked={!!S.profile.photoPublic} onChange={e=>set({profile:{...S.profile, photoPublic:e.target.checked}})} style={{width:17, height:17, accentColor:'var(--c-primary)'}}/>
            모임에 내 사진 공개
          </label>
          <p className="meta" style={{margin:'-4px 0 0', lineHeight:1.5}}>끄면 내가 연 모임에서 사진 대신 첫 글자 아바타로 표시돼요. 언제든 바꿀 수 있어요.</p>
          <label className="row" style={{gap:8, cursor:'pointer', fontSize:13.5, marginTop:2}}>
            <input type="checkbox" checked={!!(S.consents&&S.consents.marketing)} onChange={e=>{ const on=e.target.checked; set({consents:{...S.consents, marketing:on}}); saveMarketingConsent(S.acctEmail||S.signupEmail, on).then(r=>{ set({toast: r&&r.error ? '수신 동의 저장에 실패했어요 — 잠시 후 다시 시도해주세요' : (on?'이벤트·혜택 이메일 수신에 동의했어요':'이벤트·혜택 이메일 수신 동의를 철회했어요')}); }); }} style={{width:17, height:17, accentColor:'var(--c-primary)'}}/>
            이벤트·혜택 이메일 수신 동의
          </label>
          <p className="meta" style={{margin:'-4px 0 0', lineHeight:1.5}}>가입 때 선택한 값이에요. 체크를 바꾸면 바로 저장되고, 언제든 철회할 수 있어요.</p>
          {profErr&&<div role="alert" className="notice orange" style={{margin:0}}><Ic n="IconNormalCircleInfo2NameCircleInfoFillFalse" s={15}/><span>{profErr}</span></div>}
          {profSavedAt>0&&!profErr&&<div className="notice blue" style={{margin:0}}><Ic n="IconNormalCircleCheck2NameCircleCheckFillFillTrue" s={15}/><span>프로필이 저장됐어요 — 다른 회원에게도 이 정보로 보여요.</span></div>}
          <DSBtn label={profSaving?'저장 중…':'프로필 저장'} size="md" disable={profSaving} onClick={()=>{
            setProfErr(''); setProfSaving(true);
            saveMyProfile(S.acctEmail||S.signupEmail, S.profile).then(res=>{
              setProfSaving(false);
              if (res && res.dup) { setProfErr('이미 사용 중인 닉네임이에요 — 다른 닉네임을 골라주세요.'); return; }
              if (res && res.reserved) { setProfErr('운영진 사칭이 의심되는 닉네임은 사용할 수 없어요 — 다른 닉네임을 골라주세요.'); return; }
              if (res && res.error) {
                const raw = String(res.error.message||'');
                setProfErr(/row-level security|violates|permission/i.test(raw) ? '저장 권한을 확인하지 못했어요 — 로그아웃 후 다시 로그인해서 저장해주세요.' : (raw||'저장에 실패했어요 — 잠시 후 다시 시도해주세요.'));
                return;
              }
              if (res && res.skipped) { setProfErr('서버 연동이 안 돼 있어 저장할 수 없어요.'); return; }
              setProfSavedAt(Date.now()); set({profileNickConflict:false});
            });
          }}/>
        </div>
      </div>
      <div className="row" style={{gap:6, flexWrap:'wrap', marginTop:16}}><TrustBadges items={[...(S.locGranted?[`${S.regionVals.cur} 거주 인증`]:[]), ...(S.emailVerified?['이메일 인증']:[]), ...S.schoolBadges]}/><MeetupBadge count={S.completed.length}/></div>
      <div style={{marginTop:12}}><TrustSignals S={S} size="lg"/></div>
      <p className="meta" style={{margin:'10px 0 20px', lineHeight:1.6}}>인증은 서열이 아니라 사실 확인이에요 — 완료한 것만 표시되고, 뱃지는 신원이나 안전을 보증하지 않아요.</p>
      <div className="profile-menu-grid">
        <button className="card profile-menu-item" onClick={()=>go('region')}>
          <Ic n="IconNormalLocation2NameLocationFillFalse" s={20} c="var(--c-primary)"/>
          <span className="profile-menu-text"><b style={{fontSize:14.5}}>지역 설정</b><br/><span className="meta">거주·귀국·관심 지역 관리</span></span>
          <Ic n="IconNormalChevronRightNameChevronRightTightFalseThick" s={14} c="var(--c-faint)"/>
        </button>
        <button className="card profile-menu-item" onClick={()=>go('schoolemail')}>
          <Ic n="IconNormalVerifiedCheck2NameVerifiedCheckFillFalse" s={20} c="var(--c-primary)"/>
          <span className="profile-menu-text"><b style={{fontSize:14.5}}>학교 인증</b><br/><span className="meta">선택 사항 — 이메일 또는 학생증</span></span>
          <Ic n="IconNormalChevronRightNameChevronRightTightFalseThick" s={14} c="var(--c-faint)"/>
        </button>
        <button className="card profile-menu-item" onClick={()=>go('privacyavoid')}>
          <Ic n="IconNormalEyeSlashNameEyeSlashFillFalse" s={20} c="var(--c-primary)"/>
          <span className="profile-menu-text"><b style={{fontSize:14.5}}>지인 마주침 방지</b><br/><span className="meta">아는 사람과 마주칠 가능성 줄이기</span></span>
          <Ic n="IconNormalChevronRightNameChevronRightTightFalseThick" s={14} c="var(--c-faint)"/>
        </button>
        <button className="card profile-menu-item" onClick={()=>startCreateMeetup(S,set,go)}>
          <Ic n="IconNormalCalendarNameCalendar" s={20} c="var(--c-primary)"/>
          <span className="profile-menu-text"><b style={{fontSize:14.5}}>모임 개설하기</b><br/><span className="meta">내가 호스트가 되어 모임을 열어요</span></span>
          <Ic n="IconNormalChevronRightNameChevronRightTightFalseThick" s={14} c="var(--c-faint)"/>
        </button>
      </div>
      <div className="profile-save-wrap"><DSBtn label="저장하기" onClick={()=>set({toast:'프로필이 저장됐어요'})}/></div>
      </>}
      {tab===1&&<div className="wtwo">
        <div>
          <b style={{fontSize:15}}>내가 쓴 글</b>
          <div style={{margin:'12px 0 24px'}}>
            <MyQnaPostsList S={S} set={set} go={go}/>
          </div>
          <b style={{fontSize:15}}>내가 주최한 모임 <span className="meta" style={{fontWeight:400}}>({S.myHostedMeetups.length}개)</span></b>
          <div style={{margin:'12px 0'}}>
            {S.myHostedMeetups.length===0?<p className="meta">아직 개설한 모임이 없어요.</p>:S.myHostedMeetups.map((m,i)=><button key={i} className="card" style={{width:'100%', marginBottom:10, cursor:'pointer', fontFamily:'inherit', textAlign:'left'}} onClick={()=>go('mymeethosted')}>
              <div style={{fontSize:14, fontWeight:700, marginBottom:4}}>{m.title||'(제목 없음)'}</div>
              <div className="meta">{m.when||'일정 미정'} · {m.place||'장소 미정'} · <Chip label="모임개설예정" tone="violet"/></div>
            </button>)}
          </div>
        </div>
        <div>
          <b style={{fontSize:15}}>내가 쓴 댓글</b>
          <div style={{margin:'12px 0'}}>
            <p className="meta">댓글 모아보기는 준비 중이에요.</p>
          </div>
        </div>
      </div>}
      {tab===2&&<div style={{maxWidth:480}}>
        <div className="card" style={{marginBottom:14}}>
          <div className="row" style={{justifyContent:'space-between', marginBottom:S.acctEdit==='email'?10:0}}>
            <div><div className="meta">이메일</div><b style={{fontSize:15}}>{S.confirmedAuthMethod==='kakao'?'카카오 계정으로 로그인 중':S.acctEmail}</b></div>
            {S.confirmedAuthMethod!=='kakao'&&S.acctEdit!=='email'&&<button style={{background:'none', border:'1px solid var(--c-line)', borderRadius:8, padding:'7px 14px', fontFamily:'inherit', fontSize:13, cursor:'pointer'}} onClick={()=>set({acctEdit:'email'})}>변경</button>}
          </div>
          {S.confirmedAuthMethod!=='kakao'&&S.acctEdit==='email'&&<div style={{display:'flex', gap:8}}>
            <input type="email" value={S.acctEmail} onChange={e=>set({acctEmail:e.target.value})} style={{flex:1, border:'1px solid var(--c-line)', borderRadius:8, padding:'10px 14px', fontFamily:'inherit', fontSize:14, outline:'none'}}/>
            <button style={{background:'var(--c-primary)', color:'#fff', border:'none', borderRadius:8, padding:'0 16px', fontFamily:'inherit', fontSize:13, fontWeight:700, cursor:'pointer'}} onClick={()=>{ authChangeEmail(S.acctEmail).then(res=>{ if(res.skipped){ set({toast:'서버 연동이 안 돼 있어서 지금은 변경할 수 없어요'}); return; } if(res.error){ set({toast:res.error}); return; } set({acctEdit:null, emailVerified:false, phoneVerified:false, phoneCodeSent:false, phoneCode:'', toast:'변경 확인 메일을 새 이메일로 보냈어요 — 링크를 눌러야 최종 반영돼요'}); }); }}>저장</button>
          </div>}
        </div>
        <div className="card" style={{marginBottom:14}}>
          <div className="row" style={{justifyContent:'space-between', marginBottom:S.acctEdit==='pw'?12:0}}>
            <div className="meta">비밀번호</div>
            {S.confirmedAuthMethod!=='kakao'&&S.acctEdit!=='pw'&&<button style={{background:'none', border:'1px solid var(--c-line)', borderRadius:8, padding:'7px 14px', fontFamily:'inherit', fontSize:13, cursor:'pointer'}} onClick={()=>set({acctEdit:'pw'})}>변경</button>}
          </div>
          {S.confirmedAuthMethod==='kakao'?<p className="meta" style={{margin:0, lineHeight:1.6}}>카카오 계정으로 로그인해요 · 비밀번호는 카카오에서 관리돼요</p>:S.acctEdit==='pw'&&<div style={{display:'flex', flexDirection:'column', gap:10}}>
            <PasswordField value={S.pwCurrent} onChange={v=>set({pwCurrent:v})} placeholder="현재 비밀번호"/>
            <PasswordField value={S.pwNew} onChange={v=>set({pwNew:v})} placeholder="새 비밀번호 (8자 이상)" showRequirements/>
            <PasswordField value={S.pwConfirm} onChange={v=>set({pwConfirm:v})} placeholder="새 비밀번호 확인"/>
            <DSBtn label="비밀번호 변경" size="md" disable={S.pwNew.length<8||S.pwNew!==S.pwConfirm||!S.pwCurrent} onClick={()=>{ authChangePassword(S.pwNew).then(res=>{ if(res.skipped){ set({toast:'서버 연동이 안 돼 있어서 지금은 변경할 수 없어요'}); return; } if(res.error){ set({toast:res.error}); return; } set({acctEdit:null, pwCurrent:'', pwNew:'', pwConfirm:'', toast:'비밀번호가 변경됐어요'}); }); }}/>
          </div>}
        </div>
        <div className="card" style={{marginBottom:14}}>
          <div className="meta" style={{marginBottom:8}}>이메일 인증</div>
          {S.emailVerified?<Chip icon="IconNormalVerifiedCheck2NameVerifiedCheckFillFillTrue" label={S.acctEmail+' · 인증 완료'} tone="green"/>:<EmailVerifyResendRow S={S} set={set}/>}
        </div>
        <div className="card" style={{marginBottom:12, padding:0}}>
          <div style={{width:'100%', display:'flex', justifyContent:'space-between', alignItems:'center', padding:'14px 18px', fontSize:14}}>
            <span>로그인 방식</span>
            <span className="meta">{S.confirmedAuthMethod==='kakao'?'카카오 연결됨':'이메일'}</span>
          </div>
          <div style={{width:'100%', display:'flex', justifyContent:'space-between', alignItems:'center', borderTop:'1px solid var(--c-line)', padding:'14px 18px', fontSize:14, color:'var(--c-faint)'}}>
            <span>차단한 사용자 관리</span>
            <span className="meta">준비 중</span>
          </div>
          <button style={{width:'100%', display:'flex', justifyContent:'space-between', alignItems:'center', background:'none', border:'none', borderTop:'1px solid var(--c-line)', padding:'14px 18px', fontFamily:'inherit', fontSize:14, cursor:'pointer', textAlign:'left'}} onClick={()=>set({myReportsOpen:!S.myReportsOpen})}>
            <span>신고 내역</span>
            <Ic n="IconNormalChevronRightNameChevronRightTightFalseThick" s={13} c="var(--c-faint)"/>
          </button>
          {S.myReportsOpen&&<MyReportsList S={S}/>}
          <button style={{width:'100%', display:'flex', justifyContent:'space-between', alignItems:'center', background:'none', border:'none', borderTop:'1px solid var(--c-line)', padding:'14px 18px', fontFamily:'inherit', fontSize:14, cursor:'pointer', textAlign:'left'}} onClick={()=>set({legalOpen:'terms'})}>
            <span>이용약관 보기</span>
            <Ic n="IconNormalChevronRightNameChevronRightTightFalseThick" s={13} c="var(--c-faint)"/>
          </button>
        </div>
        <button style={{width:'100%', background:'none', border:'1px solid var(--c-line)', borderRadius:10, padding:'13px', fontFamily:'inherit', fontSize:14, fontWeight:600, cursor:'pointer', marginBottom:10}} onClick={async()=>{ try { await authSignOut(); } catch(e) {} set(logoutAccount(BASE)); }}>로그아웃</button>
        <button style={{width:'100%', background:'none', border:'1px solid var(--c-line)', borderRadius:10, padding:'13px', fontFamily:'inherit', fontSize:14, fontWeight:600, cursor:'pointer', color:'var(--c-red)'}} onClick={()=>set({withdrawConfirmOpen:true})}>회원 탈퇴</button>
      </div>}
    </div>
  </div>;
}
function MyReportsList({S}) {
  const {useState, useEffect} = React;
  const [reports, setReports] = useState(null);
  useEffect(()=>{ fetchMyReports(S.acctEmail).then(setReports); }, []);
  if (reports===null) return <p className="meta" style={{padding:'0 18px 14px'}}>불러오는 중...</p>;
  if (reports.length===0) return <p className="meta" style={{padding:'0 18px 14px'}}>제출한 신고 내역이 없어요.</p>;
  return <div style={{padding:'0 18px 14px'}}>{reports.map(r=><div key={r.id} style={{borderTop:'1px solid var(--c-line)', padding:'12px 0'}}>
    <div className="row" style={{justifyContent:'space-between', marginBottom:4}}><b style={{fontSize:13.5}}>{r.report_type} · {r.target||'(대상 미기재)'}</b><Chip label={r.status} tone={r.status==='처리완료'?'green':'orange'}/></div>
    <div className="meta" style={{fontSize:12}}>{r.reason}</div>
  </div>)}</div>;
}
function WScrCreateMeetup({S,set,go}){
  const {useState} = React;
  const [step, setStep] = useState(0);
  const d=S.newMeetup;
  const upd = p => set({newMeetup:{...d, ...p}});
  const purposes=['러닝·운동','식사·맛집','카페','보드게임','전시·공연','여행','언어 교환','스터디','펍·바','네트워킹'];
  const moods=['조용한 대화','활발한 네트워킹','술 없는 모임'];
  const STEPS = ['기본 정보','날짜와 장소','정원·승인','참가비','안전·취소 정책','미리보기'];
  const canNext = [
    !!d.title.trim(),
    !!(d.date&&d.time&&(d.regionType==='abroad'?d.country:true)&&d.place),
    !!(d.cap||'').trim(),
    d.feeType!=='paid'||!!(d.cost||'').trim(),
    !!d.safetyAck,
    true,
  ];
  const next = () => setStep(s=>Math.min(STEPS.length-1, s+1));
  const back = () => setStep(s=>Math.max(0, s-1));
  const editing = S.editingMeetupIdx!=null;
  // 선택된 활동들을 화면에 표시할 라벨 배열로 변환 ('기타·직접 입력'은 실제 입력한 텍스트로 치환)
  const purposeLabels = (d.purposes||[]).map(p=>p==='기타·직접 입력'?(d.customActivity||'기타'):p).filter(Boolean);
  const resetDraft = {title:'', when:'', date:'', time:'', cap:'6', place:'', purposes:[], purpose:'', customActivity:'', mood:'', desc:''};
  const submit = () => {
    if (editing) {
      const idx = S.editingMeetupIdx;
      const prev = S.myHostedMeetups[idx] || {};
      // 참가자에게 알릴 변경 내용 요약 — 실제로 바뀐 항목만 문장으로 구성
      const changes = [];
      if ((prev.purposes||[]).join(',')!==purposeLabels.join(',')) changes.push(`활동이 ${(prev.purposes||[]).join('·')||'미정'} → ${purposeLabels.join('·')||'미정'}으로`);
      if ((prev.cap||'')!==(d.cap||'')) changes.push(`정원이 ${prev.cap||'?'}명 → ${d.cap||'?'}명으로`);
      if ((prev.when||'')!==(d.when||'')) changes.push(`일정이 ${prev.when||'미정'} → ${d.when||'미정'}으로`);
      if ((prev.place||'')!==(d.place||'')) changes.push(`장소가 ${prev.place||'미정'} → ${d.place||'미정'}으로`);
      const summary = changes.length ? changes.join(', ')+' 변경됐어요.' : '모임 정보가 수정됐어요.';
      const prevApplicants = prev.applicants||[];
      const confirmedCount = prevApplicants.filter(a=>a.status==='confirmed').length;
      const updatedApplicants = prevApplicants.map(a=>a.status==='confirmed'?{...a, needsAck:true, ackNote:summary}:a);
      const updatedEntry = {...prev, ...d, purpose:purposeLabels[0]||'', purposes:purposeLabels, applicants:updatedApplicants};
      const nextHosted = S.myHostedMeetups.map((hm,hi)=>hi===idx?updatedEntry:hm);
      const applyEditLocal = () => go('mymeethosted', {myHostedMeetups:nextHosted, editingMeetupIdx:null, newMeetup:resetDraft, toast: confirmedCount>0 ? `모임 정보를 수정했어요 — 확정 참가자 ${confirmedCount}명에게 재확인을 요청했어요` : '모임 정보를 수정했어요'});
      // 서버에 저장된 모임이면 서버 수정이 성공한 뒤에만 화면 반영(15단계) — 실패를 숨기지 않기 원칙
      if (prev.serverId && isServerMeetupId(prev.serverId)) {
        const capNum2 = parseInt(d.cap)||6;
        updateRemoteMeetup(prev.serverId, {
          title: d.title, purposes: purposeLabels, country: d.country||'대한민국', city: d.placeVisibility==='confirmed'?'':(d.place||''), place_visibility: d.placeVisibility||'public',
          lat: ((d.regionType||'kr')==='kr'&&d.placeLat)||null, lng: ((d.regionType||'kr')==='kr'&&d.placeLng)||null,
          place: d.placeVisibility==='confirmed'?'':(d.place||''), when_label: d.when||'', event_date: d.date||null, cap: capNum2, approval_mode: d.approvalMode||'instant', waitlist_ok: d.waitlistOk!==false,
          fee_text: ({free:'참가비 없음', split:'현장에서 각자 결제', dutch:'주최자 선결제 · 현장에서 N분의 1 정산', paid:'예상 비용 '+(d.cost||'')+'원'+((d.costIncludes||'').trim()?' ('+d.costIncludes.trim()+')':'')}[d.feeType||'free']), description: d.desc||'', solo_welcome: !!d.soloWelcome, photo_url: d.photoUrl||null,
        }, summary).then(res=>{
          if (res && res.error) {
            const gone = String(res.error.message||'').includes('MM_MEETUP_GONE');
            set({toast: gone ? '이 모임은 서버에서 이미 삭제된 상태라 수정할 수 없어요 — 목록에서 삭제 후 새로 개설해주세요.' : '수정이 서버에 반영되지 못했어요 — 다른 회원에게는 아직 옛 정보가 보여요. 잠시 후 다시 시도해주세요.'});
            return;
          }
          saveMeetupPlaceDetail(prev.serverId, d.placeVisibility==='confirmed'?(d.place||''):null).then(r=>{ if(r&&r.error) console.error('place detail 동기화 실패', r.error); });
          applyEditLocal();
        });
      } else applyEditLocal();
      return;
    }
    // 취소 페널티 중에는 모임 개설도 차단(사용자 정책 2026-07-30) — 서버 트리거(trg_meetups_create_guard)가 최종 강제
    const penaltyUntil = Number((()=>{ try { return localStorage.getItem(nsKey('mm_cancel_penalty:'+((S.acctEmail||S.signupEmail||'').toLowerCase()))); } catch(e) { return 0; } })()||0);
    if (Date.now() < penaltyUntil) {
      const min = Math.max(1, Math.ceil((penaltyUntil-Date.now())/60000));
      set({toast:`최근 참가를 취소해서 지금은 모임을 열 수 없어요 — 약 ${min}분 뒤에 가능해요 (취소 후 1시간 제한)`});
      return;
    }
    const idx=S.myHostedMeetups.length;
    const capNum = parseInt(d.cap)||6;
    // 모임장 승인제인 경우, 데모 신청자를 정원보다 넉넉히 시딩해 승인대기 충돌(정원 초과) 상황을 재현할 수 있게 함
    const applicants = (d.approvalMode==='approval' && DEMO_MODE)
      ? ATTENDEES.slice(0, Math.min(capNum+2, ATTENDEES.length)).map(n=>({name:n, status:'pending'}))
      : [];
    const newEntry = {...d, purpose:purposeLabels[0]||'', purposes:purposeLabels, applicants, createdAt: editing?(d.createdAt||Date.now()):Date.now()};
    const nextHosted = [...S.myHostedMeetups, newEntry];
    const toast = '모임이 개설됐어요 — 채팅방이 열렸어요';
    go('chat',{detailId:'my'+idx, toast, myHostedMeetups:nextHosted, newMeetup:resetDraft});
    // 실제 서버(Supabase)가 연동돼 있으면 다른 계정에서도 보이도록 서버에도 등록. 연동 안 됐으면 skipped:true만 반환되고 아무 일도 안 일어남.
    createRemoteMeetup({
      host_email: S.acctEmail||S.signupEmail||'guest', host_name: S.profile.nickname||'호스트',
      title: d.title, purposes: purposeLabels, region_type: d.regionType||'local', country: d.country||'대한민국', city: d.placeVisibility==='confirmed'?'':(d.place||''),
      place: d.placeVisibility==='confirmed'?'':(d.place||''), place_visibility: d.placeVisibility||'public', when_label: d.when||'', event_date: d.date||null, cap: capNum, approval_mode: d.approvalMode||'instant', waitlist_ok: d.waitlistOk!==false,
      lat: ((d.regionType||'kr')==='kr'&&d.placeLat)||null, lng: ((d.regionType||'kr')==='kr'&&d.placeLng)||null,
      fee_text: ({free:'참가비 없음', split:'현장에서 각자 결제', dutch:'주최자 선결제 · 현장에서 N분의 1 정산', paid:'예상 비용 '+(d.cost||'')+'원'+((d.costIncludes||'').trim()?' ('+d.costIncludes.trim()+')':'')}[d.feeType||'free']), description: d.desc||'', solo_welcome: !!d.soloWelcome, photo_url: d.photoUrl||null,
    }).then(res=>{
      // 저장 실패를 더 이상 숨기지 않는다 — 서버에 없으면 다른 사람에게 안 보이므로 반드시 알림
      if (res && res.error) {
        console.error('createRemoteMeetup 실패', res.error);
        const msg = String((res.error&&res.error.message)||'');
        if (msg.includes('MM_SUSPENDED')) set({toast:'이용이 제한된 계정이에요 — 제한 기간에는 모임을 열 수 없어요. 문의: support@modumoyeo.com'});
        else if (msg.includes('MM_APPLY_COOLDOWN')) set({toast:'최근 참가 취소로 지금은 모임을 열 수 없어요 — 방금 만든 모임은 서버에 저장되지 않았으니 삭제 후 나중에 다시 만들어주세요.'});
        else set({toast:'모임이 서버에 저장되지 못했어요 — 이 모임은 다른 회원에게 보이지 않아요. 모임을 삭제 후 다시 만들어주세요.'});
        return;
      }
      if (res && res.data && res.data.id) {
        // 서버가 발급한 진짜 ID를 저장해둬야 나중에 그 모임을 서버에서 찾아 삭제할 수 있음
        set({myHostedMeetups: nextHosted.map((mm,ix)=>ix===idx?{...mm, serverId:res.data.id}:mm)});
        if (d.placeVisibility==='confirmed' && d.place) saveMeetupPlaceDetail(res.data.id, d.place).then(r=>{ if(r&&r.error) console.error('place detail 저장 실패', r.error); });
      }
    });
  };
  return <div className="wapp"><WNav S={S} go={go} set={set}/>
    <div className="wmain" style={{maxWidth:640}}>
      <button className="wback" onClick={()=>step===0?go(editing?'mymeethosted':'profile'):back()}><Ic n="IconNormalChevronLeftNameChevronLeftTightFalseThick" s={14}/>{step===0?(editing?'내가 개설한 모임으로':'내 정보로'):'이전 단계'}</button>
      <div className="wsect"><h2>{editing?'모임 정보 수정':'모임 개설'}</h2></div>
      <div style={{display:'flex', gap:6, marginBottom:24}}>
        {STEPS.map((t,i)=><div key={t} style={{flex:1, textAlign:'center'}}>
          <div style={{width:24, height:24, borderRadius:'50%', margin:'0 auto 6px', display:'flex', alignItems:'center', justifyContent:'center', fontSize:11, fontWeight:700, background:step>=i?'var(--c-primary)':'var(--c-fill)', color:step>=i?'#fff':'var(--c-faint)'}}>{i+1}</div>
          <div style={{fontSize:10, color:step>=i?'var(--c-text)':'var(--c-faint)', lineHeight:1.3}}>{t}</div>
        </div>)}
      </div>

<div style={{display:'flex', flexDirection:'column', gap:16}}>
        {step===0&&<>
          <PhotoUpload value={d.photoUrl} onChange={url=>upd({photoUrl:url})} folder="meetup" shape="rounded" size="100%" placeholder="모임 대표 사진 올리기"/>
          <div>
            <div className="meta" style={{marginBottom:6}}>모임 이름</div>
            <input value={d.title} onChange={e=>upd({title:e.target.value})} placeholder="예: 강남 밤모임" style={{width:'100%', border:'1px solid var(--c-line)', borderRadius:8, padding:'10px 14px', fontFamily:'inherit', fontSize:14, outline:'none'}}/>
          </div>
          <div>
            <div className="meta" style={{marginBottom:8}}>어떤 활동인가요? <span style={{fontWeight:400}}>(여러 개 선택 가능)</span></div>
            <div style={{display:'flex', gap:8, flexWrap:'wrap'}}>{purposes.map(p=><Chip key={p} label={p} onClick={()=>upd({purposes:(d.purposes||[]).includes(p)?(d.purposes||[]).filter(x=>x!==p):[...(d.purposes||[]),p]})} on={(d.purposes||[]).includes(p)}/>)}<Chip label="기타·직접 입력" onClick={()=>upd({purposes:(d.purposes||[]).includes('기타·직접 입력')?(d.purposes||[]).filter(x=>x!=='기타·직접 입력'):[...(d.purposes||[]),'기타·직접 입력']})} on={(d.purposes||[]).includes('기타·직접 입력')}/></div>
            {(d.purposes||[]).includes('기타·직접 입력')&&<div style={{marginTop:10}}>
              <div className="meta" style={{marginBottom:6}}>어떤 활동을 하는 모임인가요?</div>
              <input value={d.customActivity||''} onChange={e=>upd({customActivity:e.target.value})} placeholder="예: 보드게임을 하면서 같이 저녁을 먹는 모임" style={{width:'100%', border:'1px solid var(--c-line)', borderRadius:8, padding:'10px 14px', fontFamily:'inherit', fontSize:14, outline:'none'}}/>
              {(d.customActivity||'').trim()
                ?<p className="meta" style={{margin:'6px 2px 0', color:'var(--c-green)', fontWeight:700}}>"{(d.customActivity||'').trim()}" 활동으로 모임 카드에 표시돼요 — 이대로 진행하면 반영됩니다.</p>
                :<p className="meta" style={{margin:'6px 2px 0'}}>목록에 없는 활동도 자유롭게 입력할 수 있어요 — 입력만 하면 자동으로 반영돼요.</p>}
            </div>}
            {(d.purposes||[]).length>1&&<div className="notice" style={{marginTop:10}}><Ic n="IconNormalCircleInfo2NameCircleInfoFillFalse" s={15}/><span>활동을 여러 개 고르면 모임 안에 여러 활동이 함께 진행돼요. 참가자가 일부 활동만 참여하고 싶다면 신청 후 채팅방에서 직접 조율해요.</span></div>}
          </div>
          <div>
            <div className="meta" style={{marginBottom:8}}>분위기</div>
            <div style={{display:'flex', gap:8, flexWrap:'wrap'}}>{moods.map(m=><Chip key={m} label={m} onClick={()=>upd({mood:m})} on={d.mood===m}/>)}</div>
          </div>
          <label className="row" style={{gap:8, cursor:'pointer', fontSize:13.5, minHeight:36}}>
            <input type="checkbox" checked={!!d.soloWelcome} onChange={e=>upd({soloWelcome:e.target.checked})} style={{width:18, height:18, accentColor:'var(--c-primary)'}}/>
            혼자 참여 환영 — 혼자 오는 참가자도 자연스럽게 어울릴 수 있도록 안내를 추가할게요
          </label>
          <div>
            <div className="meta" style={{marginBottom:6}}>소개</div>
            <textarea value={d.desc} onChange={e=>upd({desc:e.target.value})} rows={3} placeholder="어떤 모임인지 소개해주세요" style={{width:'100%', border:'1px solid var(--c-line)', borderRadius:8, padding:'10px 14px', fontFamily:'inherit', fontSize:14, outline:'none', resize:'none'}}/>
          </div>
        </>}

{step===1&&<>
          <div style={{display:'flex', gap:12}}>
            <div style={{flex:1}}>
              <div className="meta" style={{marginBottom:6}}>날짜</div>
              <DatePicker value={d.date} onChange={dt=>upd({date:dt, when:formatWhen(dt, d.time)})}/>
            </div>
            <div style={{flex:1}}>
              <div className="meta" style={{marginBottom:6}}>시간</div>
              <TimePicker value={d.time} onChange={t=>upd({time:t, when:formatWhen(d.date, t)})}/>
            </div>
          </div>
          <div>
            <div className="meta" style={{marginBottom:8}}>모임 지역</div>
            <div style={{display:'flex', gap:8, marginBottom:10}}>
              <Chip label="국내 (카카오맵)" onClick={()=>upd({regionType:'kr'})} on={(d.regionType||'kr')==='kr'}/>
              <Chip label="해외" onClick={()=>upd({regionType:'abroad'})} on={d.regionType==='abroad'}/>
            </div>
            {(d.regionType||'kr')==='kr'?<>
              <div className="meta" style={{marginBottom:6}}>장소 (이름 또는 주소)</div>
              <div className="row" style={{gap:8}}>
                <input value={d.place} onChange={e=>upd({place:e.target.value, placeLat:null, placeLng:null})} placeholder="예: 강남역 카페 또는 서울 강남구 테헤란로 123" style={{flex:1, minWidth:0, border:'1px solid var(--c-line)', borderRadius:8, padding:'10px 14px', fontFamily:'inherit', fontSize:14, outline:'none'}}/>
                {getKakaoMapKey()&&<DSBtn label="지도 검색" size="md" fit variant="outlined" onClick={()=>upd({placeSearchOpen:true})}/>}
              </div>
              {d.placeLat&&<p className="meta" style={{margin:'6px 2px 0', color:'var(--c-green)', fontWeight:700}}>카카오맵 장소가 연결됐어요 — 상세 화면에 정확한 핀이 표시돼요.</p>}
              <div style={{marginTop:10}}>
                <MapEmbed {...(d.placeLat?{lat:d.placeLat, lng:d.placeLng}:geocodeKR(d.place))} height={160} label="입력한 위치 미리보기"/>
                <p className="meta" style={{margin:'6px 2px 0'}}>{d.placeLat?'선택한 장소 위치예요. 장소명을 수정하면 연결이 풀려요.':'지도 검색으로 장소를 선택하면 정확한 위치가 저장돼요.'}</p>
              </div>
              {d.placeSearchOpen&&<PlaceSearchModal initial={d.place} onClose={()=>upd({placeSearchOpen:false})} onPick={pk=>upd({place:pk.name, placeLat:pk.lat, placeLng:pk.lng, placeSearchOpen:false})}/>}
            </>:<>
              <div className="meta" style={{marginBottom:6}}>국가</div>
              <CountrySelect value={d.country||''} onChange={v=>upd({country:v})} exclude={['대한민국']}/>
              <div className="meta" style={{margin:'12px 0 6px'}}>가게명 (선택)</div>
              <input value={d.placeName||''} onChange={e=>upd({placeName:e.target.value})} placeholder="예: Blue Bottle Coffee Manhattan" style={{width:'100%', border:'1px solid var(--c-line)', borderRadius:8, padding:'10px 14px', fontFamily:'inherit', fontSize:14, outline:'none', marginBottom:10}}/>
              <div className="meta" style={{marginBottom:6}}>주소</div>
              <input value={d.place} onChange={e=>upd({place:e.target.value})} placeholder="예: 123 5th Ave, New York, NY" style={{width:'100%', border:'1px solid var(--c-line)', borderRadius:8, padding:'10px 14px', fontFamily:'inherit', fontSize:14, outline:'none'}}/>
              <p className="meta" style={{margin:'6px 2px 0'}}>해외 지역은 아직 지도 없이 국가·주소 텍스트로만 안내돼요.</p>
            </>}
          </div>
        </>}

{step===2&&<>
          <div>
            <div className="meta" style={{marginBottom:6}}>정원</div>
            <div className="row" style={{gap:8}}>
              <button style={{width:38, height:38, borderRadius:8, border:'1px solid var(--c-line)', background:'var(--c-bg)', fontSize:17, cursor:'pointer'}} onClick={()=>upd({cap:String(Math.max(2,(parseInt(d.cap)||6)-1))})}>−</button>
              <input value={d.cap} onChange={e=>upd({cap:e.target.value.replace(/[^0-9]/g,'')})} type="number" min="2" max="50" style={{flex:1, textAlign:'center', border:'1px solid var(--c-line)', borderRadius:8, padding:'10px 14px', fontFamily:'inherit', fontSize:14, outline:'none'}}/>
              <button style={{width:38, height:38, borderRadius:8, border:'1px solid var(--c-line)', background:'var(--c-bg)', fontSize:17, cursor:'pointer'}} onClick={()=>upd({cap:String(Math.min(50,(parseInt(d.cap)||6)+1))})}>+</button>
            </div>
          </div>
          <div>
            <div className="meta" style={{marginBottom:8}}>정원 마감 시 대기 명단</div>
            <div style={{display:'flex', gap:8}}>
              <Chip label="대기 명단 받기" onClick={()=>upd({waitlistOk:true})} on={d.waitlistOk!==false}/>
              <Chip label="받지 않기" onClick={()=>upd({waitlistOk:false})} on={d.waitlistOk===false}/>
            </div>
          </div>
          <div>
            <div className="meta" style={{marginBottom:8}}>정원과 승인 방식</div>
            <div style={{display:'flex', gap:8, marginBottom:8}}>
              <Chip label="즉시 확정" onClick={()=>upd({approvalMode:'instant'})} on={(d.approvalMode||'instant')==='instant'}/>
              <Chip label="모임장 승인제" onClick={()=>upd({approvalMode:'approval'})} on={d.approvalMode==='approval'}/>
            </div>
            <p className="meta" style={{margin:0}}>{d.approvalMode==='approval'?'신청이 오면 먼저 승인 대기 상태가 되고, 직접 승인해야 참가가 확정돼요.':'정원이 남아있으면 신청 즉시 참가가 확정돼요.'}</p>
          </div>
          <div>
            <div className="meta" style={{marginBottom:8}}>정확한 장소 공개</div>
            <div style={{display:'flex', gap:8, marginBottom:8}}>
              <Chip label="누구나 볼 수 있게 공개" onClick={()=>upd({placeVisibility:'public'})} on={(d.placeVisibility||'public')==='public'}/>
              <Chip label="참가 확정자에게만 공개" onClick={()=>upd({placeVisibility:'confirmed'})} on={d.placeVisibility==='confirmed'}/>
            </div>
            <p className="meta" style={{margin:0}}>{d.placeVisibility==='confirmed'?'목록·상세에는 동네 단위까지만 보이고, 정확한 주소는 참가가 확정된 회원에게만 공개돼요.':'모임 상세에서 정확한 장소를 누구나 바로 볼 수 있어요.'}</p>
          </div>
        </>}

{step===3&&<>
          <div>
            <div className="meta" style={{marginBottom:8}}>참가비</div>
            <div style={{display:'flex', gap:8, marginBottom:10, flexWrap:'wrap'}}>
              <Chip label="참가비 없음" onClick={()=>upd({feeType:'free'})} on={(d.feeType||'free')==='free'}/>
              <Chip label="현장에서 각자 결제" onClick={()=>upd({feeType:'split'})} on={d.feeType==='split'}/>
              <Chip label="주최자 선결제 · N분의 1" onClick={()=>upd({feeType:'dutch'})} on={d.feeType==='dutch'}/>
              <Chip label="참가비 있음 (금액 입력)" onClick={()=>upd({feeType:'paid'})} on={d.feeType==='paid'}/>
            </div>
            {d.feeType==='split'&&<p className="meta" style={{margin:'0 2px 10px', lineHeight:1.6}}>각자 먹거나 쓴 만큼 현장에서 직접 결제하는 방식이에요.</p>}
            {d.feeType==='dutch'&&<p className="meta" style={{margin:'0 2px 10px', lineHeight:1.6}}>주최자가 먼저 계산하고, 현장에서 인원수대로 나눠(N분의 1) 정산하는 방식이에요.</p>}
            {d.feeType==='paid'&&<>
              <div className="meta" style={{marginBottom:6}}>참가비 (원)</div>
              <input value={d.cost||''} onChange={e=>upd({cost:e.target.value.replace(/[^0-9]/g,'')})} placeholder="예: 20000" style={{width:'100%', border:'1px solid var(--c-line)', borderRadius:8, padding:'10px 14px', fontFamily:'inherit', fontSize:14, outline:'none', marginBottom:10}}/>
              <div className="meta" style={{marginBottom:6}}>포함 내역</div>
              <input value={d.costIncludes||''} onChange={e=>upd({costIncludes:e.target.value})} placeholder="예: 식사·음료 포함" style={{width:'100%', border:'1px solid var(--c-line)', borderRadius:8, padding:'10px 14px', fontFamily:'inherit', fontSize:14, outline:'none'}}/>
              <p className="meta" style={{margin:'10px 2px 0', lineHeight:1.6}}>참가비는 앱에서 결제되지 않고, 모임 당일 현장에서 정산해요.</p>
            </>}
          </div>
        </>}

{step===4&&<>
          <div className="card" style={{padding:'16px 18px'}}>
            <b style={{fontSize:14.5, display:'block', marginBottom:10}}>취소 및 참석 안내 (기본값)</b>
            <div style={{display:'flex', flexDirection:'column', gap:6}}>
              <span style={{fontSize:13.5, color:'var(--c-sub)'}}>모임 24시간 전까지 — 참가 취소 가능해요</span>
              <span style={{fontSize:13.5, color:'var(--c-sub)'}}>24시간 이내 취소·노쇼 — 다음 신청에 제한이 있을 수 있어요</span>
              <span style={{fontSize:13.5, color:'var(--c-sub)'}}>모임장 사정으로 취소된 경우 — 바로 알려드려요</span>
            </div>
          </div>
          <label className="row" style={{gap:8, cursor:'pointer', fontSize:13.5}}>
            <input type="checkbox" checked={!!d.safetyAck} onChange={e=>upd({safetyAck:e.target.checked})} style={{width:18, height:18, accentColor:'var(--c-primary)'}}/>
            안전수칙과 취소 및 참석 안내를 참가자에게 안내하고, 커뮤니티 가이드를 준수할게요
          </label>
          <div className="card" style={{padding:'14px 16px', marginTop:4}}>
            <label className="row" style={{gap:8, cursor:'pointer', fontSize:13.5, alignItems:'flex-start'}}>
              <input type="checkbox" checked={!!d.photoPromoConsent} onChange={e=>upd({photoPromoConsent:e.target.checked})} style={{width:18, height:18, accentColor:'var(--c-primary)', marginTop:2}}/>
              <span>이 모임에서 찍힌 사진을 운영진 SNS 홍보에 활용해도 괜찮아요</span>
            </label>
            <p className="meta" style={{margin:'8px 0 0 26px', lineHeight:1.6}}>체크하면 신청 화면에 미리 안내돼서, 참가자가 이걸 보고 신청 여부를 정할 수 있어요. 실제로는 참가자가 모임 후기에 직접 올린 사진만 홍보에 쓰여요 — 후기에 안 올리면 쓰이지 않아요.</p>
          </div>
        </>}

{step===5&&<>
          <p className="meta" style={{margin:'0 0 4px'}}>참가자에게 이렇게 보여요</p>
          <div className="wgrid" style={{maxWidth:280}}>
            <MeetCard m={{id:'preview', title:d.title||'(제목 없음)', when:d.when||'일정 미정', size:(d.cap||'6')+'명 정원', cardTags:[...purposeLabels.map(p=>[p,'primary']), [d.mood||'','']].filter(t=>t[0]), soloLine:'내가 개설한 모임', soloWelcome:!!d.soloWelcome, capMax:parseInt(d.cap)||undefined, capJoined:0, host:{name:S.profile.nickname||'나', reviews:0}}} onClick={()=>{}}/>
          </div>
          {!editing&&<div className="notice"><Ic n="IconNormalCircleInfo2NameCircleInfoFillFalse" s={16}/><span>등록하면 바로 공개돼요.</span></div>}
        </>}

<div className="row" style={{gap:10, marginTop:8}}>
          {step<STEPS.length-1?<DSBtn label="다음" disable={!canNext[step]} onClick={next} style={{flex:1}}/>:<DSBtn label={editing?'수정 사항 저장하기':'모임 개설하기'} disable={!d.title.trim()} onClick={submit} style={{flex:1}}/>}
        </div>
      </div>
    </div>
  </div>;
}
function WScrEvents({S,set,go}){
  const likes=S.eventLikes||{};
  const events = useEvents();
  return <div className="wapp"><WNav S={S} go={go} set={set}/>
    <div className="wmain" style={{maxWidth:760}}>
      <div className="wsect"><h2>이벤트</h2></div>
      <div className="notice violet" style={{marginBottom:20}}><Ic n="IconNormalStarNameStarFillFillTrue" s={16}/><span>운영진이 직접 여는 특별 이벤트 게시판이에요 — 일반 회원은 글을 올릴 수 없고, 공감으로 관심을 표현할 수 있어요.</span></div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:16}}>
        <button className="card" style={{textAlign:'left', cursor:'pointer', fontFamily:'inherit', padding:'20px 22px'}} onClick={()=>go('eventslist')}>
          <Ic n="IconNormalStarNameStarFillFillTrue" s={22} c="var(--c-primary)"/>
          <div style={{fontSize:16, fontWeight:800, margin:'10px 0 4px'}}>이벤트 전체보기</div>
          <div className="meta">{events.length}개 진행 중 · 자세히 보기</div>
        </button>
        <button className="card" style={{textAlign:'left', cursor:'pointer', fontFamily:'inherit', padding:'20px 22px'}} onClick={()=>go('eventshighlights')}>
          <Ic n="IconNormalCameraNameCameraFillFalse" s={22} c="var(--c-violet)"/>
          <div style={{fontSize:16, fontWeight:800, margin:'10px 0 4px'}}>지난 이벤트 하이라이트</div>
          <div className="meta">사진과 후기 모아보기</div>
        </button>
      </div>
    </div>
    <Footer go={go} set={set}/>
  </div>;
}
// 운영진 이벤트 작성(2026-07-30 사용자 지시) — events 테이블에 직접 등록(RLS: 운영진만 쓰기 가능)
function AdminEventCompose({S, set}) {
  const [open, setOpen] = React.useState(false);
  const [d, setD] = React.useState({title:'', tag:'', when_label:'', city:'', cost_text:'무료', cap:'10', mode:'firstcome', description:''});
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState('');
  const upd = patch => setD(prev=>({...prev, ...patch}));
  const inputSt = {width:'100%', border:'1px solid var(--c-line)', borderRadius:8, padding:'9px 12px', fontFamily:'inherit', fontSize:14, outline:'none'};
  const submit = () => {
    if (busy) return;
    if (!d.title.trim()) { setErr('제목을 입력해주세요.'); return; }
    setErr(''); setBusy(true);
    adminCreateEvent({title:d.title.trim(), tag:d.tag.trim()||'이벤트', tone:'primary', when_label:d.when_label.trim(), city:d.city.trim(), cost_text:d.cost_text.trim()||'무료', description:d.description.trim(), mode:d.mode, cap:parseInt(d.cap)||10, host_label:'모두모여 운영진', created_by:S.acctEmail||''}).then(res=>{
      setBusy(false);
      if (res && res.error) { setErr('등록에 실패했어요 — 운영진 계정인지 확인해주세요.'); return; }
      setOpen(false); setD({title:'', tag:'', when_label:'', city:'', cost_text:'무료', cap:'10', mode:'firstcome', description:''});
      set({toast:'이벤트가 등록됐어요 — 목록에 바로 표시돼요'});
    });
  };
  if (!open) return <div className="card" style={{marginBottom:16, display:'flex', alignItems:'center', gap:10}}>
    <Ic n="IconNormalMegaphoneNameMegaphoneFillFalse" s={16} c="var(--c-primary)"/>
    <span style={{flex:1, fontSize:13.5, fontWeight:700}}>운영진 전용 — 공식 이벤트 등록</span>
    <DSBtn label="이벤트 만들기" size="md" fit onClick={()=>setOpen(true)}/>
  </div>;
  return <div className="card" style={{marginBottom:16, display:'flex', flexDirection:'column', gap:10}}>
    <b style={{fontSize:14.5}}>공식 이벤트 등록</b>
    <input placeholder="제목 (예: 서울 유학생 소개팅 파티)" value={d.title} onChange={e=>upd({title:e.target.value})} style={inputSt}/>
    <div style={{display:'flex', gap:8}}>
      <input placeholder="태그 (예: 소개팅)" value={d.tag} onChange={e=>upd({tag:e.target.value})} style={{...inputSt, flex:1}}/>
      <input placeholder="도시 (예: 서울)" value={d.city} onChange={e=>upd({city:e.target.value})} style={{...inputSt, flex:1}}/>
    </div>
    <input placeholder="일정 표시 (예: 8월 16일(토) 오후 6시 · 강남)" value={d.when_label} onChange={e=>upd({when_label:e.target.value})} style={inputSt}/>
    <div style={{display:'flex', gap:8}}>
      <input placeholder="비용 표시 (예: 4만원 (식사 포함))" value={d.cost_text} onChange={e=>upd({cost_text:e.target.value})} style={{...inputSt, flex:1}}/>
      <input placeholder="정원" type="number" min="1" value={d.cap} onChange={e=>upd({cap:e.target.value})} style={{...inputSt, width:90, flex:'none'}}/>
    </div>
    <div className="row" style={{gap:8}}>
      <Chip label="선착순 확정" tone={d.mode==='firstcome'?'primary':'line'} onClick={()=>upd({mode:'firstcome'})}/>
      <Chip label="사연 추첨" tone={d.mode==='lottery'?'primary':'line'} onClick={()=>upd({mode:'lottery'})}/>
    </div>
    <textarea placeholder="소개 문구" rows={3} value={d.description} onChange={e=>upd({description:e.target.value})} style={{...inputSt, resize:'none'}}/>
    {err&&<div role="alert" className="meta" style={{color:'var(--c-red)', fontWeight:600}}>{err}</div>}
    <div style={{display:'flex', gap:8}}>
      <div style={{flex:1}}><DSBtn label="취소" variant="outlined" color="assistive" size="md" onClick={()=>setOpen(false)}/></div>
      <div style={{flex:1}}><DSBtn label={busy?'등록 중…':'등록하기'} size="md" disable={busy} onClick={submit}/></div>
    </div>
  </div>;
}
function WScrEventsList({S,set,go}){
  const likes=S.eventLikes||{};
  const toggleLike=(id,ev)=>{ ev.stopPropagation(); set({eventLikes:{...likes,[id]:!likes[id]}}); };
  const events = useEvents();
  const page = S.eventsPage||1;
  const perPage = 2;
  const totalPages = Math.max(1, Math.ceil(events.length/perPage));
  const items = events.slice((page-1)*perPage, page*perPage);
  return <div className="wapp"><WNav S={S} go={go} set={set}/>
    <div className="wmain" style={{maxWidth:760}}>
      <button className="wback" onClick={()=>go('events')}><Ic n="IconNormalChevronLeftNameChevronLeftTightFalseThick" s={14}/>이벤트로</button>
      <div className="wsect"><h2>이벤트 전체보기</h2></div>
      {isAdminUser(S)&&<AdminEventCompose S={S} set={set}/>}
      {events.length===0&&<div className="card" style={{textAlign:'center', padding:'40px 20px'}}>
        <p style={{fontSize:14.5, fontWeight:700, margin:0}}>지금 진행 중인 이벤트가 없어요.</p>
      </div>}
      {items.map((e,i)=><Reveal key={e.id} delay={i*80}><div className="card" style={{marginBottom:14, padding:'20px 22px', cursor:'pointer'}} onClick={()=>go('eventdetail',{eventId:e.id})}>
        <Chip label={e.tag} tone={e.tone}/>
        <div style={{fontSize:17, fontWeight:800, margin:'10px 0 5px'}}>{e.title}</div>
        <div className="meta" style={{marginBottom:4}}>{e.when} · 주최 {e.host}</div>
        <div className="meta" style={{marginBottom:10}}>{e.city} · {e.cost}{e.sponsor?` · 협찬 ${e.sponsor} (${e.sponsorItem})`:''}</div>
        <p style={{fontSize:14, color:'var(--c-sub)', margin:'0 0 12px', lineHeight:1.6}}>{e.desc}</p>
        <div style={{marginBottom:12}}><EventStats e={e}/></div>
        <button onClick={ev=>toggleLike(e.id,ev)} style={{display:'flex', alignItems:'center', gap:6, background:'none', border:'1px solid var(--c-line)', borderRadius:20, padding:'8px 16px', cursor:'pointer', fontFamily:'inherit', fontSize:13, fontWeight:700, color:likes[e.id]?'var(--c-red)':'var(--c-sub)'}}>
          <Ic n={likes[e.id]?'IconNormalHeartNameHeartFillFillTrue':'IconNormalHeartNameHeartFillFalse'} s={16}/>공감{likes[e.id]?' (관심 등록됨)':''}
        </button>
      </div></Reveal>)}
      <Pagination page={page} total={totalPages} onChange={n=>set({eventsPage:n})}/>
    </div>
    <Footer go={go} set={set}/>
  </div>;
}
function WScrEventsHighlights({S,set,go}){
  const highlights = [['7월 벙개 · 을지로 골목 투어','참가 22명 · 공감 41'],['6월 소개팅 파티 · 홍대','참가 18명 · 공감 63'],['5월 워홀러 밋업 · 토론토','참가 14명 · 공감 29'],['4월 스터디 모임 데이','참가 11명 · 공감 18'],['3월 봄맞이 피크닉','참가 26명 · 공감 52'],['2월 신년 소개팅','참가 20명 · 공감 47']];
  const page = S.highlightsPage||1;
  const perPage = 3;
  const totalPages = Math.ceil(highlights.length/perPage);
  const items = highlights.slice((page-1)*perPage, page*perPage);
  return <div className="wapp"><WNav S={S} go={go} set={set}/>
    <div className="wmain" style={{maxWidth:760}}>
      <button className="wback" onClick={()=>go('events')}><Ic n="IconNormalChevronLeftNameChevronLeftTightFalseThick" s={14}/>이벤트로</button>
      <div className="wsect"><h2>지난 이벤트 하이라이트</h2></div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:14, marginBottom:12}}>
        {items.map((h,i)=><Reveal key={h[0]} delay={i*80}><button className="card" style={{width:'100%', cursor:'pointer', fontFamily:'inherit', textAlign:'left', padding:0, overflow:'hidden'}} onClick={()=>set({toast:'다음 이벤트에서 만나요 — 사진첩은 준비 중이에요'})}>
          <Ph h={120} label="이벤트 사진"/>
          <div style={{padding:'12px 14px'}}><b style={{fontSize:13.5}}>{h[0]}</b><div className="meta" style={{marginTop:4}}>{h[1]}</div></div>
        </button></Reveal>)}
      </div>
      <Pagination page={page} total={totalPages} onChange={n=>set({highlightsPage:n})}/>
    </div>
    <Footer go={go} set={set}/>
  </div>;
}
function WScrEventChat({S,set,go}){
  const {useState, useEffect, useRef} = React;
  const eid = String(S.detailId||'');
  const meta = S.eventChatMeta||{};
  const [msgs, setMsgs] = useState(null);
  const [input, setInput] = useState('');
  const [err, setErr] = useState('');
  const listRef = useRef(null);
  useEffect(()=>{
    let alive=true;
    const load=()=>fetchEventChat(eid).then(rows=>{ if(alive&&rows) setMsgs(rows); else if(alive&&rows===null&&msgs===null) setErr('채팅방에 입장할 수 없어요 — 선정자만 입장할 수 있는 공간이에요.'); });
    load();
    const iv=setInterval(load, 5000);
    return ()=>{ alive=false; clearInterval(iv); };
  }, [eid]);
  useEffect(()=>{ const el=listRef.current; if(el) requestAnimationFrame(()=>{ el.scrollTop=el.scrollHeight; }); }, [msgs&&msgs.length]);
  const send=()=>{
    const v=input.trim(); if(!v) return;
    setInput(''); setErr('');
    sendEventChat(eid, v).then(r=>{
      if(r&&r.error){ const m=String(r.error.message||''); setErr(m.includes('MM_RATE_LIMIT')?'메시지를 너무 빠르게 보내고 있어요 — 잠시 후 다시 보내주세요.':m.includes('MM_NOT_ALLOWED')?'선정자만 보낼 수 있어요.':'전송에 실패했어요 — 잠시 후 다시 시도해주세요.'); setInput(v); return; }
      fetchEventChat(eid).then(rows=>{ if(rows) setMsgs(rows); });
    });
  };
  return <div className="wapp"><WNav S={S} go={go} set={set}/>
    <div className="wmain" style={{maxWidth:640}}>
      <button className="wback" onClick={()=>go(isAdminUser(S)?'admin':'eventdetail')}><Ic n="IconNormalChevronLeftNameChevronLeftTightFalseThick" s={14}/>{isAdminUser(S)?'운영진 페이지로':'이벤트로'}</button>
      <h2 style={{fontSize:19, margin:'8px 0 6px'}}>{meta.title||'이벤트'} · 선정자 채팅방</h2>
      {meta.anonymous&&<div className="notice blue" style={{marginBottom:10}}><Ic n="IconNormalCircleInfo2NameCircleInfoFillFalse" s={15}/><span>익명 채팅방이에요 — 서로 가명으로만 표시돼요. 신고가 접수되면 운영진은 계정을 확인할 수 있어요.</span></div>}
      {err&&<div role="alert" className="notice orange" style={{marginBottom:10}}><Ic n="IconNormalCircleExclamation2NameCircleExclamationFillFalse" s={15}/><span>{err}</span></div>}
      <div ref={listRef} style={{height:380, overflowY:'auto', background:'var(--c-fill-a)', borderRadius:14, padding:'14px'}}>
        {msgs==null&&!err&&<p className="meta" style={{textAlign:'center', padding:'20px 0'}}>채팅을 불러오는 중…</p>}
        {msgs&&msgs.length===0&&<p className="meta" style={{textAlign:'center', padding:'20px 0'}}>아직 대화가 없어요 — 첫 인사를 남겨보세요!</p>}
        {(msgs||[]).map(m=><div key={m.id} style={{display:'flex', flexDirection:'column', alignItems:m.mine?'flex-end':'flex-start', marginBottom:10}}>
          {!m.mine&&<span className="row" style={{gap:5, fontSize:11.5, color:'var(--c-sub)', marginBottom:3}}><Av name={m.display_name} size={18}/>{m.display_name}{m.is_admin&&<AdminBadge small/>}</span>}
          <div style={{maxWidth:'78%', background:m.mine?'var(--c-primary)':(m.is_admin?'var(--c-primary-bg)':'#fff'), color:m.mine?'#fff':'var(--c-text)', borderRadius:12, padding:'8px 12px', fontSize:13.5, lineHeight:1.55, whiteSpace:'pre-wrap', wordBreak:'break-word', border:m.mine?'none':'1px solid var(--c-line)'}}>{m.body}</div>
        </div>)}
      </div>
      <div className="row" style={{gap:8, marginTop:10}}>
        <input value={input} onChange={e2=>setInput(e2.target.value)} onKeyDown={e2=>{ if(e2.key==='Enter') send(); }} placeholder="메시지 입력" style={{flex:1, minWidth:0, background:'var(--c-fill)', border:'none', borderRadius:999, padding:'11px 14px', fontSize:13.5, fontFamily:'inherit', outline:'none'}}/>
        <button className="iconbtn" aria-label="보내기" onClick={send}><Ic n="IconNormalSendNameSendFillFillTrue" s={19} c="var(--c-primary)"/></button>
      </div>
      <p className="meta" style={{margin:'8px 2px 0'}}>사진·링크 전송은 안전을 위해 제한될 수 있어요. 문제가 있는 메시지는 신고하기로 알려주세요.</p>
    </div>
  </div>;
}
function WScrEventDetail({S,set,go}){
  // 31.5: 내 신청 상태(서버)·채팅방 존재 조회 — 선정 배지·입장 버튼용
  const [myApp, setMyApp] = React.useState(undefined);
  const [evRoom2, setEvRoom2] = React.useState(null);
  const isServerEvent = /^[0-9a-f-]{36}$/.test(String((S.tempEventDetail&&S.tempEventDetail.id)||S.detailId||''));
  React.useEffect(()=>{
    const eid = String((S.tempEventDetail&&S.tempEventDetail.id)||S.detailId||'');
    if (!isServerEvent || S.authStatus!=='authenticated' || !S.acctEmail) { setMyApp(null); return; }
    let al=true;
    fetchMyEventApplication(eid, S.acctEmail).then(r=>{ if(al) setMyApp(r); });
    fetchEventChatRoom(eid).then(r=>{ if(al) setEvRoom2(r); });
    return ()=>{ al=false; };
  }, [S.detailId, S.authStatus, S.acctEmail]);

모두 어디에 있든,
모여요

모임을 열면 이렇게 소개돼요

이번 주에 실제로 열리는 모임들이에요

오늘은 뭐 하고 싶으세요?

시작은 이렇게 간단해요

이런 순간에 모두모여를 열어보세요

안심하고 만날 수 있도록

자주 묻는 질문

이번 주말, 새로운 얼굴들과 마주 앉아볼까요?

이메일로 로그인

약관 동의

기본 프로필

{honorific?`${honorific}님, `:''}{myCity}에서 이번 주 뭐 하고 싶으세요?

“{q}” 검색 결과

내가 찜한 모임

실제 등록된 모임

이번 주 {myCity} 추천 모임

관심사 기반 추천

{abroadTitle}

최근 커뮤니티 활동

{curCityTitle}

{abroadTitle}

커뮤니티 스냅샷

타임라인

최근 후기

커뮤니티

모두 어디에 있든,모여요

모임을 열면 이렇게 소개돼요

이번 주에 실제로 열리는 모임들이에요

오늘은 뭐 하고 싶으세요?

시작은 이렇게 간단해요

이런 순간에 모두모여를 열어보세요

안심하고 만날 수 있도록

자주 묻는 질문

이번 주말, 새로운 얼굴들과 마주 앉아볼까요?

이메일로 로그인

약관 동의

기본 프로필

{honorific?`${honorific}님, `:''}{myCity}에서 이번 주 뭐 하고 싶으세요?

“{q}” 검색 결과

내가 찜한 모임

실제 등록된 모임

이번 주 {myCity} 추천 모임

관심사 기반 추천

{abroadTitle}

최근 커뮤니티 활동

{curCityTitle}

{abroadTitle}

커뮤니티 스냅샷

타임라인

최근 후기

커뮤니티

모두 어디에 있든,
모여요