function StatusBar({ light }) {
  return (
    <div className="statusbar" style={{ color: light ? '#fff' : 'var(--text-primary)' }}>
      <span>9:41</span>
      <span className="icons"><i className="ti ti-signal-4g"></i><i className="ti ti-wifi"></i><i className="ti ti-battery-2"></i></span>
    </div>
  );
}
window.StatusBar = StatusBar;

function ScreenHeader({ title, sub, onBack, right, nav }) {
  return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 20px 18px' }}>
        {onBack && <div onClick={onBack} style={{ width: 42, height: 42, borderRadius: '50%', background: 'var(--surface-1)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0, boxShadow: 'var(--shadow-card)' }}><i className="ti ti-chevron-left" style={{ fontSize: 19 }}></i></div>}
      <div style={{ flex: 1, minWidth: 0 }}>
        <span style={{ font: 'var(--text-title)', display: 'block' }}>{title}</span>
        {sub && <span style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)' }}>{sub}</span>}
      </div>
      {right}
    </div>
  );
}
window.ScreenHeader = ScreenHeader;

function SectionTitle({ children, action, onAction }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '0 20px', marginBottom: 12 }}>
      <span style={{ font: 'var(--text-heading)' }}>{children}</span>
      {action && <span onClick={onAction} style={{ font: 'var(--text-caption)', color: 'var(--text-primary)', borderBottom: '1px solid var(--text-primary)', cursor: 'pointer' }}>{action}</span>}
    </div>
  );
}
window.SectionTitle = SectionTitle;

function ProfilePhotoSheet({ onClose }) {
  const { BottomSheet, Button } = window.SpotureDesignSystem_f7ad96;
  const [step, setStep] = React.useState('menu');
  const [picked, setPicked] = React.useState(0);
  const colors = ['#E31E24', '#1A1A1A', '#E8A33D', '#1B8F5A', '#3B6FD9', '#8A5CD9', '#D95C8A'];
  const rows = [{ icon: 'photo', label: '앨범에서 선택' }, { icon: 'camera', label: '카메라로 촬영' }, { icon: 'mood-smile', label: '기본 이미지 선택', go: 'default' }];
  return (
    <BottomSheet title={step === 'menu' ? '프로필 사진' : '기본 이미지 선택'} footer={step === 'default' ? <Button variant="primary" onClick={onClose}>완료</Button> : null} onClose={onClose}>
      {step === 'menu' ? (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {rows.map(r => (
            <div key={r.label} onClick={() => r.go ? setStep(r.go) : onClose()} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 18px', background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', cursor: 'pointer' }}>
              <i className={'ti ti-' + r.icon} style={{ fontSize: 19, color: 'var(--text-primary)' }}></i>
              <span style={{ font: 'var(--text-body)' }}>{r.label}</span>
            </div>
          ))}
        </div>
      ) : (
        <div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 14, marginBottom: 20 }}>
            {colors.map((c, i) => (
              <div key={c} onClick={() => setPicked(i)} style={{ aspectRatio: '1', borderRadius: '50%', background: c, position: 'relative', cursor: 'pointer', boxShadow: picked === i ? '0 0 0 3px #fff, 0 0 0 5px var(--text-primary)' : 'none' }}>
                {picked === i && <i className="ti ti-check" style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 18 }}></i>}
              </div>
            ))}
          </div>
        </div>
      )}
    </BottomSheet>
  );
}
window.ProfilePhotoSheet = ProfilePhotoSheet;

function ShareProfileSheet({ onClose, name = '국밥러버92', handle = '@gukbap_lover92' }) {
  const { Avatar } = window.SpotureDesignSystem_f7ad96;
  const { BottomSheet, Button } = window.SpotureDesignSystem_f7ad96;
  const [copied, setCopied] = React.useState(false);
  const [view, setView] = React.useState(new URLSearchParams(location.search).get('share') || 'menu');
  const [theme, setTheme] = React.useState(0);
  const [saved, setSaved] = React.useState(false);
  const link = 'spoture.app/u/' + handle.replace('@', '');
  const themes = [{ bg: 'var(--bg-ink)', fg: '#fff', sub: 'rgba(255,255,255,.6)', label: '다크' }, { bg: 'var(--text-accent)', fg: '#fff', sub: 'rgba(255,255,255,.72)', label: '레드' }, { bg: 'var(--surface-1)', fg: 'var(--text-primary)', sub: 'var(--text-muted)', label: '라이트' }];
  const t = themes[theme];
  const qr = [];
  for (let i = 0; i < 361; i++) { const r = Math.floor(i / 19), c = i % 19; const corner = (r < 5 && c < 5) || (r < 5 && c > 13) || (r > 13 && c < 5); qr.push(corner ? null : ((r * 7 + c * 13 + ((r * c) % 5)) % 3 === 0)); }
  const apps = [
    { icon: 'brand-kako-talk', label: '카카오톡', bg: '#FEE500', fg: '#1A1A1A' },
    { icon: 'brand-instagram', label: '스토리', bg: '#E1306C', fg: '#fff' },
    { icon: 'message', label: '문자', bg: 'var(--surface-2)', fg: 'var(--text-primary)' },
    { icon: 'dots', label: '더보기', bg: 'var(--surface-2)', fg: 'var(--text-primary)' }
  ];
  const rows = [
    { icon: 'qrcode', label: 'QR 코드', sub: '오프라인에서 바로 보여주기' },
    { icon: 'download', label: '프로필 카드 저장', sub: '이미지로 내려받기' }
  ];
  if (view === 'qr') return (
    <BottomSheet title="QR 코드" onClose={onClose} footer={<Button variant="primary" onClick={() => setView('menu')}>공유 메뉴로 돌아가기</Button>}>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
        <span style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)', textAlign: 'center', lineHeight: 1.6 }}>이웃이 카메라로 비추면 바로 내 프로필이 열려요.</span>
        <div style={{ background: '#fff', borderRadius: 'var(--radius-card)', padding: 20, boxShadow: 'var(--shadow-card)' }}>
          <div style={{ position: 'relative', width: 190, height: 190 }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(19,1fr)', gridTemplateRows: 'repeat(19,1fr)', width: '100%', height: '100%' }}>
              {qr.map((on, i) => <div key={i} style={{ background: on ? '#1A1A1A' : 'transparent' }}></div>)}
            </div>
            {[{ top: 0, left: 0 }, { top: 0, right: 0 }, { bottom: 0, left: 0 }].map((pos, i) => (
              <div key={i} style={{ position: 'absolute', ...pos, width: 50, height: 50, border: '8px solid #1A1A1A', borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <div style={{ width: 16, height: 16, background: '#1A1A1A', borderRadius: 2 }}></div>
              </div>
            ))}
            <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)', width: 44, height: 44, borderRadius: '50%', background: 'var(--text-accent)', border: '4px solid #fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><span style={{ font: '800 17px/1 var(--font-family)', color: '#fff' }}>S</span></div>
          </div>
        </div>
        <div style={{ textAlign: 'center' }}>
          <div style={{ font: 'var(--text-body-strong)', marginBottom: 3 }}>{name}</div>
          <div style={{ font: 'var(--text-small)', color: 'var(--text-muted)' }}>{link}</div>
        </div>
        <div style={{ display: 'flex', gap: 8, width: '100%' }}>
          <span onClick={() => setSaved(true)} style={{ flex: 1, textAlign: 'center', font: '600 14px/1 var(--font-family)', color: 'var(--text-primary)', background: 'var(--surface-2)', borderRadius: 999, padding: '14px 0', cursor: 'pointer' }}>{saved ? '저장했어요' : 'QR 저장'}</span>
          <span onClick={() => setCopied(true)} style={{ flex: 1, textAlign: 'center', font: '600 14px/1 var(--font-family)', color: 'var(--text-primary)', background: 'var(--surface-2)', borderRadius: 999, padding: '14px 0', cursor: 'pointer' }}>{copied ? '링크 복사됨' : '링크 복사'}</span>
        </div>
      </div>
    </BottomSheet>
  );
  if (view === 'card') return (
    <BottomSheet title="프로필 카드 저장" onClose={onClose} footer={<Button variant="primary" onClick={() => setSaved(true)}>{saved ? '사진에 저장했어요' : '이미지로 저장하기'}</Button>}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div style={{ background: t.bg, border: theme === 2 ? '1px solid var(--border)' : 'none', borderRadius: 'var(--radius-card)', padding: 24, boxShadow: 'var(--shadow-card)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
            <Avatar user={name} size={60} />
            <div style={{ minWidth: 0 }}>
              <div style={{ font: '700 19px/1.25 var(--font-family)', color: t.fg, marginBottom: 4 }}>{name}</div>
              <div style={{ font: '400 13px/1 var(--font-family)', color: t.sub }}>{handle} · 역삼동</div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 18, marginBottom: 18 }}>
            {[['84', '게시물'], ['312', '팔로워'], ['6', '배지']].map(([n, l]) => (
              <div key={l}>
                <div style={{ font: '700 17px/1 var(--font-family)', color: t.fg, marginBottom: 4 }}>{n}</div>
                <div style={{ font: '400 11px/1 var(--font-family)', color: t.sub }}>{l}</div>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingTop: 16, borderTop: '1px solid ' + (theme === 2 ? 'var(--border)' : 'rgba(255,255,255,.18)') }}>
            <div style={{ width: 38, height: 38, borderRadius: 8, background: theme === 2 ? 'var(--surface-2)' : 'rgba(255,255,255,.16)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><i className="ti ti-qrcode" style={{ fontSize: 20, color: theme === 2 ? 'var(--text-primary)' : '#fff' }}></i></div>
            <span style={{ flex: 1, minWidth: 0, font: '400 12px/1.4 var(--font-family)', color: t.sub, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{link}</span>
            <span style={{ font: '800 13px/1 var(--font-family)', color: t.fg, flexShrink: 0 }}>Spoture</span>
          </div>
        </div>
        <div>
          <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 9 }}>카드 색상</span>
          <div style={{ display: 'flex', gap: 8 }}>
            {themes.map((th, i) => (
              <span key={th.label} onClick={() => { setTheme(i); setSaved(false); }} style={{ flex: 1, textAlign: 'center', font: theme === i ? '600 13px/1 var(--font-family)' : '400 13px/1 var(--font-family)', color: theme === i ? '#fff' : 'var(--text-primary)', background: theme === i ? 'var(--bg-ink)' : 'var(--surface-2)', borderRadius: 999, padding: '12px 0', cursor: 'pointer' }}>{th.label}</span>
            ))}
          </div>
        </div>
        <span onClick={() => setView('menu')} style={{ font: 'var(--text-small)', color: 'var(--text-muted)', textAlign: 'center', cursor: 'pointer' }}>공유 메뉴로 돌아가기</span>
      </div>
    </BottomSheet>
  );
  return (
    <BottomSheet title="프로필 공유" onClose={onClose}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 13, background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: 14 }}>
          <Avatar user={name} size={46} />
          <div style={{ minWidth: 0 }}>
            <div style={{ font: 'var(--text-body-strong)', marginBottom: 3 }}>{name}</div>
            <div style={{ font: 'var(--text-small)', color: 'var(--text-muted)' }}>{handle}</div>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 10 }}>
          {apps.map(a => (
            <div key={a.label} onClick={onClose} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
              <div style={{ width: 54, height: 54, borderRadius: '50%', background: a.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className={'ti ti-' + a.icon} style={{ fontSize: 23, color: a.fg }}></i></div>
              <span style={{ font: 'var(--text-micro)', color: 'var(--text-secondary)' }}>{a.label}</span>
            </div>
          ))}
        </div>
        <div>
          <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 9 }}>프로필 링크</span>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '13px 14px' }}>
            <i className="ti ti-link" style={{ fontSize: 17, color: 'var(--text-muted)', flexShrink: 0 }}></i>
            <span style={{ flex: 1, minWidth: 0, font: 'var(--text-small)', color: 'var(--text-secondary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{link}</span>
            <span onClick={() => setCopied(true)} style={{ flexShrink: 0, minWidth: 66, textAlign: 'center', boxSizing: 'border-box', font: '600 13px/1 var(--font-family)', color: copied ? 'var(--text-accent)' : '#fff', background: copied ? 'var(--bg-accent)' : 'var(--bg-ink)', borderRadius: 999, padding: '9px 14px', cursor: 'pointer' }}>{copied ? '복사됨' : '복사'}</span>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {rows.map(r => (
            <div key={r.label} onClick={() => setView(r.icon === 'qrcode' ? 'qr' : 'card')} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '15px 16px', background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', cursor: 'pointer' }}>
              <i className={'ti ti-' + r.icon} style={{ fontSize: 19, color: 'var(--text-primary)', flexShrink: 0 }}></i>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ font: 'var(--text-body)', marginBottom: 2 }}>{r.label}</div>
                <div style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>{r.sub}</div>
              </div>
              <i className="ti ti-chevron-right" style={{ fontSize: 15, color: 'var(--text-muted)', flexShrink: 0 }}></i>
            </div>
          ))}
        </div>
      </div>
    </BottomSheet>
  );
}
window.ShareProfileSheet = ShareProfileSheet;

function ShareCollectionSheet({ name = '역삼 국밥 지도', owner = '국밥러버92', icon = 'soup', count = 5, places = 4, onClose }) {
  const { BottomSheet, Button } = window.SpotureDesignSystem_f7ad96;
  const [copied, setCopied] = React.useState(false);
  const [view, setView] = React.useState('menu');
  const [saved, setSaved] = React.useState(false);
  const [theme, setTheme] = React.useState(0);
  const link = 'spoture.app/c/' + owner + '/yeoksam-gukbap';
  const themes = [{ bg: 'var(--bg-ink)', fg: '#fff', sub: 'rgba(255,255,255,.6)', label: '다크' }, { bg: 'var(--text-accent)', fg: '#fff', sub: 'rgba(255,255,255,.72)', label: '레드' }, { bg: 'var(--surface-1)', fg: 'var(--text-primary)', sub: 'var(--text-muted)', label: '라이트' }];
  const t = themes[theme];
  const qr = [];
  for (let i = 0; i < 361; i++) { const r = Math.floor(i / 19), c = i % 19; const corner = (r < 5 && c < 5) || (r < 5 && c > 13) || (r > 13 && c < 5); qr.push(corner ? null : ((r * 11 + c * 7 + ((r * c) % 4)) % 3 === 0)); }
  const apps = [
    { icon: 'brand-kako-talk', label: '카카오톡', bg: '#FEE500', fg: '#1A1A1A' },
    { icon: 'brand-instagram', label: '스토리', bg: '#E1306C', fg: '#fff' },
    { icon: 'message', label: '문자', bg: 'var(--surface-2)', fg: 'var(--text-primary)' },
    { icon: 'dots', label: '더보기', bg: 'var(--surface-2)', fg: 'var(--text-primary)' }
  ];
  const rows = [
    { icon: 'qrcode', label: 'QR 코드', sub: '오프라인에서 바로 보여주기', to: 'qr' },
    { icon: 'download', label: '컬렉션 카드 저장', sub: '이미지로 내려받기', to: 'card' }
  ];
  const head = (
    <div style={{ display: 'flex', alignItems: 'center', gap: 13, background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: 14 }}>
      <div style={{ width: 46, height: 46, borderRadius: 14, background: 'var(--bg-accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><i className={'ti ti-' + icon} style={{ fontSize: 22, color: 'var(--text-accent)' }}></i></div>
      <div style={{ minWidth: 0 }}>
        <div style={{ font: 'var(--text-body-strong)', marginBottom: 3 }}>{name}</div>
        <div style={{ font: 'var(--text-small)', color: 'var(--text-muted)' }}>@{owner} · 게시물 {count}개 · 장소 {places}곳</div>
      </div>
    </div>
  );
  if (view === 'qr') return (
    <BottomSheet title="QR 코드" onClose={onClose} footer={<Button variant="primary" onClick={() => setView('menu')}>공유 메뉴로 돌아가기</Button>}>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
        <span style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)', textAlign: 'center', lineHeight: 1.6 }}>카메라로 비추면 이 컬렉션 지도가 바로 열려요.</span>
        <div style={{ background: '#fff', borderRadius: 'var(--radius-card)', padding: 20, boxShadow: 'var(--shadow-card)' }}>
          <div style={{ position: 'relative', width: 190, height: 190 }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(19,1fr)', gridTemplateRows: 'repeat(19,1fr)', width: '100%', height: '100%' }}>
              {qr.map((on, i) => <div key={i} style={{ background: on ? '#1A1A1A' : 'transparent' }}></div>)}
            </div>
            {[{ top: 0, left: 0 }, { top: 0, right: 0 }, { bottom: 0, left: 0 }].map((pos, i) => (
              <div key={i} style={{ position: 'absolute', ...pos, width: 50, height: 50, border: '8px solid #1A1A1A', borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <div style={{ width: 16, height: 16, background: '#1A1A1A', borderRadius: 2 }}></div>
              </div>
            ))}
            <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)', width: 44, height: 44, borderRadius: '50%', background: 'var(--text-accent)', border: '4px solid #fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className={'ti ti-' + icon} style={{ fontSize: 20, color: '#fff' }}></i></div>
          </div>
        </div>
        <div style={{ textAlign: 'center' }}>
          <div style={{ font: 'var(--text-body-strong)', marginBottom: 3 }}>{name}</div>
          <div style={{ font: 'var(--text-small)', color: 'var(--text-muted)' }}>{link}</div>
        </div>
        <div style={{ display: 'flex', gap: 8, width: '100%' }}>
          <span onClick={() => setSaved(true)} style={{ flex: 1, textAlign: 'center', font: '600 14px/1 var(--font-family)', color: 'var(--text-primary)', background: 'var(--surface-2)', borderRadius: 999, padding: '14px 0', cursor: 'pointer' }}>{saved ? '저장했어요' : 'QR 저장'}</span>
          <span onClick={() => setCopied(true)} style={{ flex: 1, textAlign: 'center', font: '600 14px/1 var(--font-family)', color: 'var(--text-primary)', background: 'var(--surface-2)', borderRadius: 999, padding: '14px 0', cursor: 'pointer' }}>{copied ? '링크 복사됨' : '링크 복사'}</span>
        </div>
      </div>
    </BottomSheet>
  );
  if (view === 'card') return (
    <BottomSheet title="컬렉션 카드 저장" onClose={onClose} footer={<Button variant="primary" onClick={() => setSaved(true)}>{saved ? '사진에 저장했어요' : '이미지로 저장하기'}</Button>}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div style={{ background: t.bg, border: theme === 2 ? '1px solid var(--border)' : 'none', borderRadius: 'var(--radius-card)', padding: 24, boxShadow: 'var(--shadow-card)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
            <div style={{ width: 54, height: 54, borderRadius: 16, background: theme === 2 ? 'var(--bg-accent)' : 'rgba(255,255,255,.16)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><i className={'ti ti-' + icon} style={{ fontSize: 26, color: theme === 2 ? 'var(--text-accent)' : '#fff' }}></i></div>
            <div style={{ minWidth: 0 }}>
              <div style={{ font: '700 19px/1.25 var(--font-family)', color: t.fg, marginBottom: 4 }}>{name}</div>
              <div style={{ font: '400 13px/1 var(--font-family)', color: t.sub }}>@{owner} · 역삼동</div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 18, marginBottom: 18 }}>
            {[[String(count), '게시물'], [String(places), '장소'], ['공개', '범위']].map(([n, l]) => (
              <div key={l}>
                <div style={{ font: '700 17px/1 var(--font-family)', color: t.fg, marginBottom: 4 }}>{n}</div>
                <div style={{ font: '400 11px/1 var(--font-family)', color: t.sub }}>{l}</div>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingTop: 16, borderTop: '1px solid ' + (theme === 2 ? 'var(--border)' : 'rgba(255,255,255,.18)') }}>
            <div style={{ width: 38, height: 38, borderRadius: 8, background: theme === 2 ? 'var(--surface-2)' : 'rgba(255,255,255,.16)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><i className="ti ti-qrcode" style={{ fontSize: 20, color: theme === 2 ? 'var(--text-primary)' : '#fff' }}></i></div>
            <span style={{ flex: 1, minWidth: 0, font: '400 12px/1.4 var(--font-family)', color: t.sub, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{link}</span>
            <span style={{ font: '800 13px/1 var(--font-family)', color: t.fg, flexShrink: 0 }}>Spoture</span>
          </div>
        </div>
        <div>
          <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 9 }}>카드 색상</span>
          <div style={{ display: 'flex', gap: 8 }}>
            {themes.map((th, i) => (
              <span key={th.label} onClick={() => { setTheme(i); setSaved(false); }} style={{ flex: 1, textAlign: 'center', font: theme === i ? '600 13px/1 var(--font-family)' : '400 13px/1 var(--font-family)', color: theme === i ? '#fff' : 'var(--text-primary)', background: theme === i ? 'var(--bg-ink)' : 'var(--surface-2)', borderRadius: 999, padding: '12px 0', cursor: 'pointer' }}>{th.label}</span>
            ))}
          </div>
        </div>
        <span onClick={() => setView('menu')} style={{ font: 'var(--text-small)', color: 'var(--text-muted)', textAlign: 'center', cursor: 'pointer' }}>공유 메뉴로 돌아가기</span>
      </div>
    </BottomSheet>
  );
  return (
    <BottomSheet title="컬렉션 공유" onClose={onClose}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
        {head}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 10 }}>
          {apps.map(a => (
            <div key={a.label} onClick={onClose} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
              <div style={{ width: 54, height: 54, borderRadius: '50%', background: a.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className={'ti ti-' + a.icon} style={{ fontSize: 23, color: a.fg }}></i></div>
              <span style={{ font: 'var(--text-micro)', color: 'var(--text-secondary)' }}>{a.label}</span>
            </div>
          ))}
        </div>
        <div>
          <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 9 }}>컬렉션 링크</span>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '13px 14px' }}>
            <i className="ti ti-link" style={{ fontSize: 17, color: 'var(--text-muted)', flexShrink: 0 }}></i>
            <span style={{ flex: 1, minWidth: 0, font: 'var(--text-small)', color: 'var(--text-secondary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{link}</span>
            <span onClick={() => setCopied(true)} style={{ flexShrink: 0, minWidth: 66, textAlign: 'center', boxSizing: 'border-box', font: '600 13px/1 var(--font-family)', color: copied ? 'var(--text-accent)' : '#fff', background: copied ? 'var(--bg-accent)' : 'var(--bg-ink)', borderRadius: 999, padding: '9px 14px', cursor: 'pointer' }}>{copied ? '복사됨' : '복사'}</span>
          </div>
          <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', display: 'block', marginTop: 8, paddingLeft: 4 }}>공개 컬렉션이라 링크를 받은 누구나 볼 수 있어요</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {rows.map(r => (
            <div key={r.label} onClick={() => setView(r.to)} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '15px 16px', background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', cursor: 'pointer' }}>
              <i className={'ti ti-' + r.icon} style={{ fontSize: 19, color: 'var(--text-primary)', flexShrink: 0 }}></i>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ font: 'var(--text-body)', marginBottom: 2 }}>{r.label}</div>
                <div style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>{r.sub}</div>
              </div>
              <i className="ti ti-chevron-right" style={{ fontSize: 15, color: 'var(--text-muted)', flexShrink: 0 }}></i>
            </div>
          ))}
        </div>
      </div>
    </BottomSheet>
  );
}
window.ShareCollectionSheet = ShareCollectionSheet;

function NewCollectionSheet({ onClose, onDone }) {
  const { BottomSheet, Button } = window.SpotureDesignSystem_f7ad96;
  const [name, setName] = React.useState('');
  const [desc, setDesc] = React.useState('');
  const [icon, setIcon] = React.useState('soup');
  const [cvis, setCvis] = React.useState('public');
  const cAcc = accountVis();
  const [sel, setSel] = React.useState([0, 2]);
  const icons = ['soup', 'bowl-chopsticks', 'coffee', 'moon-stars', 'heart', 'map-pin', 'building-store', 'pizza'];
  const myPosts = [
    { menu: '순대국', place: '할매순대국 강남점' }, { menu: '내장탕', place: '역삼동 국밥집' },
    { menu: '수육', place: '장소 미지정' }, { menu: '마제소바', place: '멘야하나비 역삼' },
    { menu: '로제떡볶이', place: '장소 미지정' }, { menu: '핸드드립', place: '로스트림 로스터스' }
  ];
  const toggle = i => setSel(p => p.includes(i) ? p.filter(x => x !== i) : [...p, i]);
  const valid = name.trim().length > 0;
  return (
    <BottomSheet title="새 컬렉션 만들기" footer={<Button variant="primary" disabled={!valid} onClick={() => onDone ? onDone(name.trim()) : onClose()}>{valid ? '컬렉션 만들기' + (sel.length ? ' (' + sel.length + '개)' : '') : '이름을 입력해주세요'}</Button>} onClose={onClose}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
        <div>
          <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 9 }}>컬렉션 이름</span>
          <input value={name} onChange={e => setName(e.target.value)} maxLength={20} placeholder="예) 역삼 국밥 지도" style={{ width: '100%', boxSizing: 'border-box', padding: '15px 16px', font: 'var(--text-body)', color: 'var(--text-primary)', background: 'var(--surface-2)', border: '1px solid ' + (name ? 'var(--text-accent)' : 'transparent'), borderRadius: 'var(--radius-tile)', outline: 'none' }} />
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 6 }}><span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>{name.length}/20</span></div>
        </div>
        <div>
          <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 9 }}>한 줄 설명 <span style={{ font: 'var(--text-small)', color: 'var(--text-muted)', fontWeight: 400 }}>선택</span></span>
          <input value={desc} onChange={e => setDesc(e.target.value)} maxLength={30} placeholder="예) 해장 성공한 곳만" style={{ width: '100%', boxSizing: 'border-box', padding: '15px 16px', font: 'var(--text-body)', color: 'var(--text-primary)', background: 'var(--surface-2)', border: '1px solid transparent', borderRadius: 'var(--radius-tile)', outline: 'none' }} />
        </div>
        <div>
          <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 10 }}>아이콘</span>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 10 }}>
            {icons.map(ic => (
              <div key={ic} onClick={() => setIcon(ic)} style={{ aspectRatio: '1', borderRadius: 'var(--radius-tile)', background: icon === ic ? 'var(--bg-accent)' : 'var(--surface-2)', border: '1.5px solid ' + (icon === ic ? 'var(--text-accent)' : 'transparent'), display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
                <i className={'ti ti-' + ic} style={{ fontSize: 21, color: icon === ic ? 'var(--text-accent)' : 'var(--text-secondary)' }}></i>
              </div>
            ))}
          </div>
        </div>
        <div>
          <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 10 }}>공개 범위</span>
          <VisibilityOptions value={cvis} onChange={setCvis} account={cAcc} scopeWord="컬렉션" />
          <div style={{ marginTop: 10 }}><VisibilityNotice account={cAcc} item={cvis} word="컬렉션" /></div>
        </div>
        <div>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 10 }}>
            <span style={{ font: 'var(--text-body-strong)' }}>게시물 담기</span>
            <span style={{ font: 'var(--text-small)', color: 'var(--text-secondary)' }}>{sel.length}개 선택</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8 }}>
            {myPosts.map((p, i) => {
              const on = sel.includes(i);
              return (
                <div key={i} onClick={() => toggle(i)} style={{ cursor: 'pointer' }}>
                  <div style={{ width: '100%', aspectRatio: '1', borderRadius: 'var(--radius-tile)', background: 'var(--surface-2)', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', boxShadow: on ? '0 0 0 2px var(--text-accent)' : 'none' }}>
                    <i className="ti ti-photo" style={{ fontSize: 20, color: 'var(--text-muted)' }}></i>
                    <span style={{ position: 'absolute', left: 6, bottom: 6, font: 'var(--text-micro)', color: '#fff', background: 'rgba(26,26,26,.68)', borderRadius: 999, padding: '3px 7px' }}>#{p.menu}</span>
                    <div style={{ position: 'absolute', right: 6, top: 6, width: 20, height: 20, borderRadius: '50%', background: on ? 'var(--text-accent)' : 'rgba(255,255,255,.85)', border: on ? 'none' : '1.5px solid var(--border-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      {on && <i className="ti ti-check" style={{ fontSize: 12, color: '#fff' }}></i>}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
          <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', display: 'block', marginTop: 9 }}>나중에 게시물에서 바로 컬렉션에 담을 수도 있어요.</span>
        </div>
      </div>
    </BottomSheet>
  );
}
window.NewCollectionSheet = NewCollectionSheet;