function EditPost({ nav, post }) {
  const { Button, ChipFilter, BottomSheet, RestaurantCard } = window.SpotureDesignSystem_f7ad96;
  const josa = (w) => { const c = (w || '').charCodeAt((w || '').length - 1) - 44032; return (c >= 0 && c < 11172 && c % 28 !== 0) ? '으로' : '로'; };
  const params = new URLSearchParams(location.search);
  const p = post || { place: '금강산초다리 역삼점', menu: '갈치조림', mediaCount: 4, likes: 128, comments: 24, time: '2시간 전', meal: '점심', srcs: ['../../assets/feed/jorim-1.jpeg', '../../assets/feed/gopchang.jpeg', '../../assets/feed/sushi.jpeg', '../../assets/feed/hanwoo-raw.jpeg'], caption: '20년째 같은 자리에서 하는 집인데 국물이 진짜 진해요. 순대는 따로 주문했고 깍두기가 계속 들어가서 두 번 리필했습니다.' };
  const initMedia = Array.from({ length: p.mediaCount || 1 }, (_, i) => ({ id: 'ep-m' + i, kind: p.hasVideo && i === (p.mediaCount || 1) - 1 ? 'video' : 'photo', src: (p.srcs && p.srcs[i]) || (i === 0 ? p.src : null), slot: (p.imageId || 'edit') + '-' + i }));
  const [media, setMedia] = React.useState(initMedia);
  const [active, setActive] = React.useState(0);
  const [addOpen, setAddOpen] = React.useState(false);
  const [meal, setMeal] = React.useState(p.meal || '점심');
  const [caption, setCaption] = React.useState(p.caption || '');
  const [tagInput, setTagInput] = React.useState('');
  const baseTags = p.tags || (p.menu ? { 0: [p.menu] } : {});
  const [tags, setTags] = React.useState(baseTags);
  const baseCols = p.cols || ['역삼 국밥 지도'];
  const [cols, setCols] = React.useState(baseCols);
  const [colOpen, setColOpen] = React.useState(false);
  const acctVis = accountVis();
  const [vis, setVis] = React.useState(p.vis || params.get('pvis') || 'public');
  const [visOpen, setVisOpen] = React.useState(params.get('pvisopen') === '1');
  const [step, setStep] = React.useState(params.get('epstep') === '2' ? 2 : 1);
  const [place, setPlace] = React.useState(p.place || null);
  const [placeAddr, setPlaceAddr] = React.useState(p.addr || '서울 강남구 테헤란로 27');
  const [placeDetail, setPlaceDetail] = React.useState(p.detail || '');
  const [gq, setGq] = React.useState('');
  const [gpsPick, setGpsPick] = React.useState(null);
  const [pinOpen, setPinOpen] = React.useState(params.get('eppin') === '1');
  const [leaveOpen, setLeaveOpen] = React.useState(params.get('leave') === '1');
  const [saved, setSaved] = React.useState(false);
  const photoCount = media.filter(m => m.kind === 'photo').length;
  const videoCount = media.filter(m => m.kind === 'video').length;
  const activeTags = tags[active] || [];
  const myCollections = [
    { name: '역삼 국밥 지도', count: 12, icon: 'soup' },
    { name: '혼밥 가능', count: 8, icon: 'user' },
    { name: '데이트 코스', count: 5, icon: 'heart' },
    { name: '야식 리스트', count: 17, icon: 'moon-stars' }
  ];
  const toggleCol = (n) => setCols(s => s.includes(n) ? s.filter(x => x !== n) : [...s, n]);
  const near = [
    { name: '할매순대국 강남점', category: '한식', distance: '45m' },
    { name: '역삼동 국밥집', category: '한식', distance: '180m' },
    { name: '청년다방 역삼점', category: '분식', distance: '80m' }
  ];
  const wider = [
    { name: '할매순대국 본점', category: '한식', distance: '1.2km' },
    { name: '역삼 참숯갈비', category: '한식', distance: '260m' },
    { name: '우나기야 역삼', category: '일식', distance: '90m' },
    { name: '스시노아지 역삼', category: '일식', distance: '210m' },
    { name: '나무가나길 커피', category: '카페', distance: '180m' }
  ];
  const hit = (r) => (r.name + ' ' + r.category).replace(/\s/g, '').includes(gq.replace(/\s/g, ''));
  const results = gq ? near.concat(wider).filter(hit) : [];
  const removeTag = (t) => setTags(s => ({ ...s, [active]: (s[active] || []).filter(x => x !== t) }));
  const addTag = (raw) => {
    const v = (raw || '').trim().replace(/^#+/, '').slice(0, 15);
    if (!v) return;
    setTags(s => { const cur = s[active] || []; return cur.includes(v) || cur.length >= 5 ? s : Object.assign({}, s, { [active]: cur.concat(v) }); });
    setTagInput('');
  };
  const onTagKey = (ev) => {
    if (ev.key === 'Enter' || ev.key === ',') { ev.preventDefault(); addTag(tagInput); }
    else if (ev.key === 'Backspace' && !tagInput && activeTags.length) removeTag(activeTags[activeTags.length - 1]);
  };
  const removeMedia = (idx) => {
    if (media.length <= 1) return;
    setMedia(list => list.filter((_, k) => k !== idx));
    setTags(s => { const next = {}; Object.keys(s).forEach(k => { const n = Number(k); if (n < idx) next[n] = s[k]; else if (n > idx) next[n - 1] = s[k]; }); return next; });
    setActive(a => (idx < a || a > media.length - 2) ? Math.max(0, a - 1) : a);
  };
  const tagCount = Object.keys(tags).reduce((n, k) => n + (tags[k] || []).length, 0);
  const normTags = (t) => JSON.stringify(Object.keys(t).sort((a, b) => a - b).map(k => (t[k] || []).slice().sort()));
  const dirty = caption !== (p.caption || '')
    || meal !== (p.meal || '점심')
    || media.length !== initMedia.length
    || normTags(tags) !== normTags(baseTags)
    || JSON.stringify(cols.slice().sort()) !== JSON.stringify(baseCols.slice().sort())
    || place !== (p.place || null)
    || placeDetail !== (p.detail || '');
  const back = () => dirty ? setLeaveOpen(true) : nav('feed');
  const removedCount = initMedia.length - media.length;
  return (
    <div style={{ flex: '1 1 0%', minHeight: 0, display: 'flex', flexDirection: 'column', position: 'relative', background: 'var(--bg-app)' }}>
      <StatusBar />
      <ScreenHeader title={step === 2 ? '음식점 위치 수정' : '게시물 수정'} sub={step === 2 ? (place ? '현재 · ' + place : '장소 미지정') : (place || '장소 미지정')} onBack={step === 2 ? () => setStep(1) : back} />
      <div style={{ flex: '1 1 0%', minHeight: 0, overflowY: 'auto', padding: '0 20px 20px' }}>
        {step === 1 && (<div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '12px 14px', marginBottom: 14 }}>
          <i className="ti ti-clock" style={{ fontSize: 16, color: 'var(--text-muted)', flexShrink: 0 }}></i>
          <span style={{ flex: 1, minWidth: 0, font: 'var(--text-small)', color: 'var(--text-secondary)' }}>{[p.time, '좋아요 ' + (p.likes || 0), '댓글 ' + (p.comments || 0)].filter(Boolean).join(' · ')}</span>
          <span onClick={() => nav('feed')} style={{ flexShrink: 0, font: '600 12px/1 var(--font-family)', color: 'var(--text-primary)', background: 'var(--surface-1)', borderRadius: 999, padding: '8px 11px', cursor: 'pointer' }}>원본 보기</span>
        </div>
        <div style={{ position: 'relative', borderRadius: 'var(--radius-card)', overflow: 'hidden', background: 'var(--surface-1)', aspectRatio: '4/5', marginBottom: 12, boxShadow: 'var(--shadow-card)' }}>
          {media[active].src
            ? <img src={media[active].src} alt={p.place || '사진'} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            : <image-slot id={media[active].slot} shape="rect" placeholder={'사진 ' + (active + 1)} style={{ width: '100%', height: '100%' }}></image-slot>}
          <span style={{ position: 'absolute', top: 12, left: 12, font: '600 12px/1 var(--font-family)', color: '#fff', background: 'rgba(26,26,26,.66)', backdropFilter: 'blur(8px)', borderRadius: 999, padding: '8px 12px', display: 'inline-flex', alignItems: 'center', gap: 5 }}>
            <i className={media[active].kind === 'video' ? 'ti ti-player-play' : 'ti ti-photo'} style={{ fontSize: 12 }}></i>
            {media[active].kind === 'video' ? '동영상' : (active + 1) + '/' + photoCount}
          </span>
          {media.length > 1 && (
            <div onClick={() => removeMedia(active)} style={{ position: 'absolute', top: 12, right: 12, display: 'inline-flex', alignItems: 'center', gap: 6, font: '600 12px/1 var(--font-family)', color: '#fff', background: 'rgba(26,26,26,.66)', backdropFilter: 'blur(8px)', borderRadius: 999, padding: '8px 12px', cursor: 'pointer' }}>
              <i className="ti ti-trash" style={{ fontSize: 13 }}></i>이 사진 지우기
            </div>
          )}
        </div>
        <div style={{ background: 'var(--surface-1)', border: '1px solid ' + (activeTags.length ? 'var(--border-accent)' : 'var(--border)'), borderRadius: 'var(--radius-tile)', padding: '10px 12px', marginBottom: 12 }}>
          <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 7 }}>
            {activeTags.map(t => (
              <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 5, background: 'var(--bg-accent)', borderRadius: 999, padding: '7px 8px 7px 11px', font: '600 13px/1 var(--font-family)', color: 'var(--text-accent)' }}>
                #{t}
                <i className="ti ti-x" onClick={() => removeTag(t)} style={{ fontSize: 13, cursor: 'pointer', opacity: .7 }}></i>
              </span>
            ))}
            {activeTags.length < 5 && (
              <input value={tagInput} onChange={ev => setTagInput(ev.target.value.slice(0, 15))} onKeyDown={onTagKey} onBlur={() => addTag(tagInput)} placeholder={activeTags.length ? '하나 더' : '메뉴 태그 입력 · Enter로 추가'} style={{ flex: '1 1 96px', minWidth: 96, border: 'none', outline: 'none', background: 'transparent', font: 'var(--text-body)', color: 'var(--text-primary)', fontFamily: 'var(--font-family)', padding: '6px 2px' }} />
            )}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8, paddingTop: 8, borderTop: '1px solid var(--border)' }}>
            <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', flexShrink: 0 }}>{media[active].kind === 'video' ? '동영상' : '사진 ' + (active + 1)} · {activeTags.length}/5</span>
          </div>
        </div>
        <span style={{ font: 'var(--text-small)', color: 'var(--text-muted)', display: 'block', margin: '-6px 0 12px', paddingLeft: 4 }}>사진마다 메뉴 태그를 달면 이웃이 찾기 쉬워요</span>
        <div style={{ display: 'flex', gap: 8, marginBottom: 8, overflowX: 'auto', padding: '3px 3px 5px' }}>
          {media.map((m, i) => (
            <div key={m.id} onClick={() => setActive(i)} style={{ position: 'relative', width: 64, height: 64, borderRadius: 14, overflow: 'hidden', flexShrink: 0, cursor: 'pointer', background: 'var(--surface-1)', boxShadow: i === active ? 'inset 0 0 0 2px var(--text-accent)' : 'none' }}>
              {m.src
                ? <img src={m.src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                : <image-slot id={m.slot} shape="rect" placeholder={String(i + 1)} style={{ width: '100%', height: '100%' }}></image-slot>}
              {m.kind === 'video' && <i className="ti ti-player-play" style={{ position: 'absolute', right: 4, bottom: 4, fontSize: 11, color: '#fff', background: 'rgba(26,26,26,.72)', borderRadius: '50%', padding: 3 }}></i>}
              {(tags[i] || []).length > 0 && <span style={{ position: 'absolute', left: 5, top: 5, width: 7, height: 7, borderRadius: '50%', background: 'var(--text-accent)', boxShadow: '0 0 0 1.5px #fff' }}></span>}
              {media.length > 1 && (
                <span onClick={(e) => { e.stopPropagation(); removeMedia(i); }} style={{ position: 'absolute', right: 3, top: 3, width: 20, height: 20, borderRadius: '50%', background: 'rgba(26,26,26,.72)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', zIndex: 2 }}><i className="ti ti-x" style={{ fontSize: 11, color: '#fff' }}></i></span>
              )}
            </div>
          ))}
          <div onClick={() => setAddOpen(v => !v)} style={{ width: 64, height: 64, borderRadius: 14, flexShrink: 0, border: '1.5px dashed ' + (addOpen ? 'var(--text-accent)' : 'var(--border-strong)'), display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2, cursor: 'pointer' }}>
            <i className="ti ti-plus" style={{ fontSize: 16, color: addOpen ? 'var(--text-accent)' : 'var(--text-muted)' }}></i>
            <span style={{ font: 'var(--text-micro)', color: addOpen ? 'var(--text-accent)' : 'var(--text-muted)' }}>추가</span>
          </div>
        </div>
        <span style={{ font: 'var(--text-small)', color: 'var(--text-muted)', display: 'block', marginBottom: 22 }}>사진 {photoCount}/5 · 동영상 {videoCount}/1{removedCount > 0 ? ' · 저장하면 ' + removedCount + '장이 삭제돼요' : ''}</span>
        <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 10 }}>언제 먹었나요?</span>
        <div style={{ display: 'flex', gap: 8, marginBottom: 24 }}>
          {['아침', '점심', '저녁', '야식'].map(m => <ChipFilter key={m} label={m} active={meal === m} onClick={() => setMeal(m)} />)}
        </div>
        <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 10 }}>어떤 점이 좋았나요?</span>
        <div style={{ background: 'var(--surface-1)', borderRadius: 'var(--radius-card)', padding: '16px 18px', boxShadow: 'var(--shadow-card)', marginBottom: 8 }}>
          <textarea value={caption} onChange={ev => setCaption(ev.target.value.slice(0, 300))} placeholder="맛, 분위기, 추천 메뉴를 자유롭게 적어주세요" rows={4} style={{ width: '100%', border: 'none', outline: 'none', background: 'transparent', resize: 'none', font: 'var(--text-body)', lineHeight: 1.6, color: 'var(--text-primary)', fontFamily: 'var(--font-family)' }}></textarea>
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}><span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>{caption.length}/300</span></div>
        </div>
        <span style={{ font: 'var(--text-body-strong)', display: 'block', margin: '22px 0 10px' }}>어떤 컬렉션에 담을까요?</span>
        <div onClick={() => setColOpen(true)} style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--surface-1)', border: '1px solid ' + (cols.length ? 'var(--border-accent)' : 'var(--border)'), borderRadius: 'var(--radius-chip)', padding: '14px 16px', cursor: 'pointer', boxShadow: 'var(--shadow-card)' }}>
          <i className={cols.length ? 'ti ti-bookmarks' : 'ti ti-bookmark'} style={{ fontSize: 16, color: cols.length ? 'var(--text-accent)' : 'var(--text-muted)', flexShrink: 0 }}></i>
          <span style={{ flex: 1, minWidth: 0, font: 'var(--text-caption)', color: cols.length ? 'var(--text-accent)' : 'var(--text-secondary)', fontWeight: cols.length ? 600 : 400, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{cols.length ? cols.join(', ') : '컬렉션 선택 (선택 사항)'}</span>
          <i className="ti ti-chevron-down" style={{ fontSize: 16, color: 'var(--text-muted)', flexShrink: 0 }}></i>
        </div>
        <span style={{ font: 'var(--text-body-strong)', display: 'block', margin: '22px 0 10px' }}>음식점 위치</span>
        <div onClick={() => setStep(2)} style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--surface-1)', border: '1px solid ' + (place ? 'var(--border)' : 'var(--border-accent)'), borderRadius: 'var(--radius-chip)', padding: '14px 16px', cursor: 'pointer', boxShadow: 'var(--shadow-card)' }}>
          <i className={place ? 'ti ti-map-pin' : 'ti ti-map-pin-off'} style={{ fontSize: 17, color: place ? 'var(--text-accent)' : 'var(--text-muted)', flexShrink: 0 }}></i>
          <div style={{ flex: 1, minWidth: 0 }}>
            <span style={{ font: 'var(--text-body)', color: 'var(--text-primary)', display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{place || '장소 미지정'}</span>
            <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>{place ? [placeAddr, placeDetail].filter(Boolean).join(' · ') : '음식점을 지정하면 이웃이 찾을 수 있어요'}</span>
          </div>
          <i className="ti ti-chevron-right" style={{ fontSize: 16, color: 'var(--text-muted)', flexShrink: 0 }}></i>
        </div>
        <span style={{ font: 'var(--text-body-strong)', display: 'block', margin: '22px 0 10px' }}>공개 범위</span>
        <VisibilityRow value={vis} account={acctVis} onClick={() => setVisOpen(true)} />
        <div style={{ marginTop: 10 }}><VisibilityNotice account={acctVis} item={vis} onOpenSettings={() => nav('settings')} /></div>
        <div style={{ marginTop: 24, marginBottom: 86 }}>
          <Button variant="primary" disabled={!dirty} onClick={() => dirty && setSaved(true)}>{dirty ? '수정 내용 저장' : '바뀐 내용이 없어요'}</Button>
          <p onClick={back} style={{ font: 'var(--text-caption)', color: 'var(--text-muted)', textAlign: 'center', margin: '12px 0 0', cursor: 'pointer' }}>취소</p>
        </div>
        </div>)}
        {step === 2 && (
        <div>
          <div style={{ background: 'var(--surface-1)', borderRadius: 'var(--radius-card)', padding: 16, boxShadow: 'var(--shadow-card)', marginBottom: 14 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
              <i className="ti ti-map-pin" style={{ fontSize: 18, color: 'var(--text-accent)' }}></i>
              <span style={{ font: 'var(--text-body-strong)' }}>사진의 촬영 위치</span>
            </div>
            <div style={{ height: 150, borderRadius: 'var(--radius-tile)', background: 'var(--surface-2)', position: 'relative', overflow: 'hidden', backgroundImage: 'linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px)', backgroundSize: '34px 34px' }}>
              <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-100%)' }}>
                <span style={{ width: 34, height: 34, background: 'var(--text-accent)', borderRadius: '50% 50% 50% 0', transform: 'rotate(-45deg)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--shadow-float)', marginBottom: 6 }}><i className="ti ti-tools-kitchen-2" style={{ fontSize: 15, color: '#fff', transform: 'rotate(45deg)' }}></i></span>
              </div>
              <span style={{ position: 'absolute', left: '50%', top: '50%', width: 12, height: 12, borderRadius: '50%', background: 'rgba(227,30,36,.18)', border: '1.5px solid rgba(227,30,36,.45)', boxSizing: 'border-box', transform: 'translate(-50%,-50%)' }}></span>
            </div>
            <span style={{ font: 'var(--text-small)', color: 'var(--text-secondary)', display: 'block', marginTop: 10 }}>{placeAddr} 주변</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--surface-1)', borderRadius: 'var(--radius-chip)', padding: '14px 18px', boxShadow: 'var(--shadow-card)', marginBottom: 18 }}>
            <i className="ti ti-search" style={{ fontSize: 17, color: 'var(--text-muted)', flexShrink: 0 }}></i>
            <input value={gq} onChange={ev => { setGq(ev.target.value); setGpsPick(null); }} placeholder="음식점 이름이나 주소로 찾기" style={{ flex: 1, minWidth: 0, border: 'none', outline: 'none', background: 'transparent', font: 'var(--text-body)', color: 'var(--text-primary)', fontFamily: 'var(--font-family)' }} />
            {gq && <i className="ti ti-x" onClick={() => { setGq(''); setGpsPick(null); }} style={{ fontSize: 16, color: 'var(--text-muted)', cursor: 'pointer', flexShrink: 0 }}></i>}
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 10 }}>
            <span style={{ font: 'var(--text-body-strong)' }}>{gq ? '검색 결과' : '이 중에 맞는 곳이 있나요?'}</span>
            {gq && <span style={{ font: 'var(--text-small)', color: 'var(--text-muted)' }}>{results.length}곳</span>}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 14 }}>
            {(gq ? results : near).map((r, i) => (
              <div key={r.name} style={{ position: 'relative' }}>
                <RestaurantCard {...r} imageId={'ep-p' + i} selected={gpsPick === r.name} onClick={() => setGpsPick(r.name)} />
                {place === r.name && gpsPick !== r.name && <span style={{ position: 'absolute', right: 14, top: 14, font: '600 10px/1 var(--font-family)', color: 'var(--text-secondary)', background: 'var(--surface-2)', borderRadius: 999, padding: '6px 9px', pointerEvents: 'none' }}>현재</span>}
              </div>
            ))}
            {gq && results.length === 0 && (
              <div style={{ textAlign: 'center', padding: '30px 0' }}>
                <i className="ti ti-search-off" style={{ fontSize: 30, color: 'var(--text-muted)' }}></i>
                <p style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)', margin: '10px 0 14px' }}>「{gq}」 검색 결과가 없어요</p>
                <Button variant="secondary" size="sm" onClick={() => setPinOpen(true)}><i className="ti ti-map-2" style={{ fontSize: 16 }}></i>지도에서 직접 핀 찍기</Button>
              </div>
            )}
          </div>
          {!gq && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <Button variant="secondary" size="sm" onClick={() => setPinOpen(true)}><i className="ti ti-map-2" style={{ fontSize: 16 }}></i>지도에서 직접 핀 찍기</Button>
              <Button variant="ghost" size="sm" onClick={() => { setPlace(null); setPlaceDetail(''); setGpsPick(null); setStep(1); }}>위치 없이 두고 이웃에게 물어보기</Button>
            </div>
          )}
          <div style={{ marginTop: 24, marginBottom: 86 }}>
            <Button variant="primary" disabled={!gpsPick || gpsPick === place} onClick={() => { if (!gpsPick || gpsPick === place) return; setPlace(gpsPick); setPlaceDetail(''); setGpsPick(null); setStep(1); }}>{!gpsPick ? '바꿀 음식점을 골라주세요' : gpsPick === place ? '현재 위치와 같아요' : '「' + gpsPick + '」' + josa(gpsPick) + ' 변경'}</Button>
            <p onClick={() => setStep(1)} style={{ font: 'var(--text-caption)', color: 'var(--text-muted)', textAlign: 'center', margin: '12px 0 0', cursor: 'pointer' }}>변경하지 않고 돌아가기</p>
          </div>
        </div>
        )}
      </div>
      {colOpen && (
        <BottomSheet title="컬렉션 선택" titleAside={<span style={{ font: 'var(--text-small)', color: 'var(--text-muted)' }}>{cols.length}개 선택</span>} onClose={() => setColOpen(false)}
          footer={<Button variant="primary" onClick={() => setColOpen(false)}>{cols.length ? cols.length + '개 컬렉션에 담기' : '컬렉션 없이 두기'}</Button>}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {myCollections.map(c => {
              const on = cols.includes(c.name);
              return (
                <div key={c.name} onClick={() => toggleCol(c.name)} style={{ display: 'flex', alignItems: 'center', gap: 12, background: on ? 'var(--bg-accent)' : 'var(--surface-2)', border: '1px solid ' + (on ? 'var(--border-accent)' : 'transparent'), borderRadius: 'var(--radius-tile)', padding: '14px 16px', cursor: 'pointer' }}>
                  <i className={'ti ti-' + c.icon} style={{ fontSize: 18, color: on ? 'var(--text-accent)' : 'var(--text-secondary)', flexShrink: 0 }}></i>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <span style={{ font: 'var(--text-body)', color: on ? 'var(--text-accent)' : 'var(--text-primary)', fontWeight: on ? 600 : 400, display: 'block' }}>{c.name}</span>
                    <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>사진 {c.count}장</span>
                  </div>
                  <i className={on ? 'ti ti-circle-check-filled' : 'ti ti-circle'} style={{ fontSize: 20, color: on ? 'var(--text-accent)' : 'var(--border-strong)', flexShrink: 0 }}></i>
                </div>
              );
            })}
          </div>
        </BottomSheet>
      )}
      {visOpen && <VisibilitySheet current={vis} account={acctVis} onClose={() => setVisOpen(false)} onPick={(v) => { setVis(v); setVisOpen(false); }} />}
      {pinOpen && <PinPickerSheet title="지도에서 직접 핀 찍기" cta="이 위치로 변경하기" onClose={() => setPinOpen(false)} onDone={(nm, info) => { setPlace(nm); setPlaceAddr((info && info.addr) || placeAddr); setPlaceDetail((info && info.detail) || ''); setPinOpen(false); setGq(''); setStep(1); }} />}
      {leaveOpen && <DiscardUploadConfirm photos={media.length} tagCount={tagCount} hasCaption={caption.trim().length > 0} cols={cols.length} step={1} onStay={() => setLeaveOpen(false)} onLeave={() => nav('feed')} />}
      {saved && (
        <div style={{ position: 'fixed', inset: 0, background: 'rgba(20,20,20,.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 26, zIndex: 95 }}>
          <div style={{ width: '100%', background: 'var(--surface-1)', borderRadius: 22, padding: '26px 22px 22px', boxShadow: 'var(--shadow-float)', boxSizing: 'border-box' }}>
            <div style={{ width: 54, height: 54, borderRadius: '50%', background: 'var(--bg-success)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 15px' }}><i className="ti ti-check" style={{ fontSize: 25, color: 'var(--text-success)' }}></i></div>
            <span style={{ font: 'var(--text-heading)', display: 'block', textAlign: 'center', marginBottom: 8 }}>수정했어요</span>
            <p style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)', textAlign: 'center', margin: '0 0 20px', lineHeight: 1.6, textWrap: 'pretty' }}>좋아요 {p.likes || 0}개와 댓글 {p.comments || 0}개는 그대로 남아 있어요</p>
            <span onClick={() => nav('feed')} style={{ display: 'block', textAlign: 'center', font: '600 15px/1 var(--font-family)', color: '#fff', background: 'var(--bg-ink)', borderRadius: 999, padding: '17px 0', cursor: 'pointer' }}>확인</span>
          </div>
        </div>
      )}
    </div>
  );
}
window.EditPost = EditPost;