function ManualPlaceSheet({ region, initialName, onClose, onChangeRegion, onDone }) {
  const { BottomSheet, Button } = window.SpotureDesignSystem_f7ad96;
  const r = window.SPOTURE_REGION(region);
  const [name, setName] = React.useState(initialName || '');
  const [cat, setCat] = React.useState(null);
  const [addr, setAddr] = React.useState('');
  const valid = name.trim().length > 0 && !!cat;
  const ro = (w) => { const c = (w || '').charCodeAt((w || '').length - 1) - 44032; return (c >= 0 && c < 11172 && c % 28 !== 0) ? '으로' : '로'; };
  return (
    <BottomSheet title="장소 직접 등록" titleAside={<span style={{ font: 'var(--text-small)', color: 'var(--text-muted)' }}>{r.city}</span>} onClose={onClose}
      footer={
        <div>
          <Button variant="primary" disabled={!valid} onClick={() => valid && onDone && onDone({ name: name.trim(), category: cat, area: addr.trim() || r.city, region: r.key, manual: true })}>{name.trim() ? (cat ? '「' + name.trim() + '」' + ro(name.trim()) + ' 등록하기' : '카테고리를 골라주세요') : '상호명을 입력해주세요'}</Button>
          <p style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', textAlign: 'center', margin: '10px 0 0', lineHeight: 1.6 }}>직접 등록한 장소는 확인 전까지 '미확인'으로 표시돼요</p>
        </div>
      }>
      <div style={{ display: 'flex', gap: 12, background: 'var(--bg-warning)', border: '1px solid var(--border)', borderRadius: 'var(--radius-card)', padding: 14, marginBottom: 16 }}>
        <i className="ti ti-writing" style={{ fontSize: 18, color: 'var(--text-warning)', flexShrink: 0, marginTop: 1 }}></i>
        <p style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)', margin: 0, lineHeight: 1.6 }}>해외 가게는 아직 등록되지 않은 곳이 많아요. 직접 적어주면 그 도시의 지도에 새로 추가돼요.</p>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div onClick={onChangeRegion} style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '13px 14px', cursor: 'pointer' }}>
          <div style={{ width: 36, height: 36, borderRadius: 12, flexShrink: 0, background: 'var(--surface-1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className={r.domestic ? 'ti ti-map-pin' : 'ti ti-world'} style={{ fontSize: 17, color: 'var(--text-secondary)' }}></i></div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <span style={{ font: 'var(--text-small)', color: 'var(--text-muted)', display: 'block', marginBottom: 2 }}>도시 · 국가</span>
            <span style={{ font: 'var(--text-body-strong)' }}>{r.city} · {r.country}</span>
          </div>
          <span style={{ font: 'var(--text-small)', color: 'var(--text-accent)', flexShrink: 0 }}>변경</span>
        </div>
        <div>
          <span style={{ font: 'var(--text-small)', color: 'var(--text-secondary)', display: 'block', marginBottom: 6 }}>상호명 <span style={{ color: 'var(--text-accent)' }}>· 필수</span></span>
          <input value={name} onChange={ev => setName(ev.target.value.slice(0, 40))} placeholder="현지 표기나 한글 표기 모두 괜찮아요" style={{ width: '100%', boxSizing: 'border-box', background: 'var(--surface-1)', border: '1px solid ' + (name.trim() ? 'var(--border-accent)' : 'var(--border)'), borderRadius: 'var(--radius-chip)', padding: '14px 16px', outline: 'none', font: 'var(--text-body)', color: 'var(--text-primary)', fontFamily: 'var(--font-family)' }} />
        </div>
        <div>
          <span style={{ font: 'var(--text-small)', color: 'var(--text-secondary)', display: 'block', marginBottom: 8 }}>카테고리 <span style={{ color: 'var(--text-accent)' }}>· 필수</span></span>
          <CategoryPicker value={cat} onChange={setCat} />
        </div>
        <div>
          <span style={{ font: 'var(--text-small)', color: 'var(--text-secondary)', display: 'block', marginBottom: 6 }}>동네 · 주소 <span style={{ color: 'var(--text-muted)' }}>· 선택</span></span>
          <input value={addr} onChange={ev => setAddr(ev.target.value.slice(0, 60))} placeholder="예: 시부야 · 도톤보리 · 11구" style={{ width: '100%', boxSizing: 'border-box', background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 'var(--radius-chip)', padding: '14px 16px', outline: 'none', font: 'var(--text-body)', color: 'var(--text-primary)', fontFamily: 'var(--font-family)' }} />
          <p style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', margin: '7px 0 0', lineHeight: 1.6 }}>비워두면 도시 이름만 표시돼요. 지도 위치는 나중에 게시물에서 핀으로 보정할 수 있어요.</p>
        </div>
      </div>
    </BottomSheet>
  );
}
window.ManualPlaceSheet = ManualPlaceSheet;