{children}

); } // ───────────────────────────────────────────────────────────── // Preview tile (matches CollectionTile look) // ───────────────────────────────────────────────────────────── function CollectionPreviewTile({ name, color, cover, sampleCard, slotId }) { const isEmpty = !sampleCard; const c = cover || { kind: 'auto' }; const onColor = '#FFF'; const onColorSoft = 'rgba(255,255,255,0.74)'; return (

{/* Photo bg layer */} {c.kind === 'photo' && (

)} {/* Decorative quote for auto mode */} {c.kind === 'auto' && !isEmpty && (

)} {/* Top: count badge */}

{isEmpty ? 0 : 1} 개

{/* Middle hero */} {c.kind === 'icon' && (

)} {c.kind === 'auto' && (

{isEmpty ? (

표현을
담아보세요

) : (

{sampleCard.foreign}

)}

)} {c.kind === 'photo' && (

)} {/* Bottom: divider + title + meta */}

{name || '주머니 이름'}

비어있음

); } // ───────────────────────────────────────────────────────────── // CoverEditor — segmented selector + per-kind picker // ───────────────────────────────────────────────────────────── function CoverEditor({ cover, color, onChange, slotId }) { const kind = cover?.kind || 'auto'; return (

{[ { value: 'auto', label: '자동' }, { value: 'icon', label: '아이콘' }, { value: 'photo', label: '사진' }, ].map(o => { const on = kind === o.value; return ( ); })}

{kind === 'auto' && (

주머니 안의 츠드가 쌓여있는 모습으로 표지가 만들어져요.

)} {kind === 'icon' && (

{COVER_ICONS_LIST.map(n => { const on = cover?.icon === n; return ( ); })}

)} {kind === 'photo' && (

)}

); } // ───────────────────────────────────────────────────────────── // Color picker grid // ───────────────────────────────────────────────────────────── function ColorPickerGrid({ value, onChange }) { return (

{COLLECTION_COLORS.map(c => { const on = c.value === value; return ( ); })}

); } // ───────────────────────────────────────────────────────────── // NewCollectionSheet — create from scratch // ───────────────────────────────────────────────────────────── function NewCollectionSheet({ accent, suggestedNames = [], existingNames = [], onClose, onCreate }) { const [name, setName] = React.useState(''); const [color, setColor] = React.useState(COLLECTION_COLORS[0].value); const [cover, setCover] = React.useState({ kind: 'auto' }); const inputRef = React.useRef(null); const slotId = React.useMemo(() => 'new_collcover_' + Date.now(), []); React.useEffect(() => { if (inputRef.current) { const t = setTimeout(() => inputRef.current.focus(), 280); return () => clearTimeout(t); } }, []); const trimmed = name.trim(); const dup = trimmed && existingNames.includes(trimmed); const canCreate = trimmed.length > 0 && !dup; const submit = () => { if (!canCreate) return; onCreate({ name: trimmed, color, cover, slotId }); }; return (

새 주머니

표현들을 폴더처럼 묶어 보관해요. 여행 단위로 만들면 다시 찾기 쉬워요.

{/* Preview */}

{/* Name */}

이름

setName(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') submit(); }} placeholder="예: 다음 주 도쿄 여행, 엄마와의 통화" maxLength={30} style={{ width: '100%', height: 48, borderRadius: 12, background: CT.surface2, border: `1px solid ${dup ? CT.danger : CT.hairlineStrong}`, padding: '0 14px', fontFamily: 'inherit', fontSize: 16, color: CT.ink, outline: 'none', letterSpacing: '-0.01em', boxSizing: 'border-box', }} /> {dup && (

같은 이름의 주머니가 이미 있어요

)} {!dup && suggestedNames.length > 0 && !trimmed && (

이런 주머니는 어때요

{suggestedNames.map(s => ( ))}

)}

{/* Color */}

색상

{/* Cover */}

표지

{/* Action bar */}

); } // ───────────────────────────────────────────────────────────── // EditCollectionSheet — rename + recolor // ───────────────────────────────────────────────────────────── function EditCollectionSheet({ collection, accent, existingNames = [], onClose, onSave }) { const [name, setName] = React.useState(collection.name); const [color, setColor] = React.useState(collection.color); const [cover, setCover] = React.useState(collection.cover || { kind: 'auto' }); const inputRef = React.useRef(null); const slotId = slotIdFor(collection.name); React.useEffect(() => { if (inputRef.current) { const t = setTimeout(() => { inputRef.current.focus(); inputRef.current.select(); }, 280); return () => clearTimeout(t); } }, []); const trimmed = name.trim(); const dup = trimmed && trimmed !== collection.name && existingNames.includes(trimmed); const canSave = trimmed.length > 0 && !dup; const sampleCard = collection.cards && collection.cards[0]; return (

주머니 편집

이름

setName(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter' && canSave) onSave({ name: trimmed, color, cover }); }} maxLength={30} style={{ width: '100%', height: 48, borderRadius: 12, background: CT.surface2, border: `1px solid ${dup ? CT.danger : CT.hairlineStrong}`, padding: '0 14px', fontFamily: 'inherit', fontSize: 16, color: CT.ink, outline: 'none', letterSpacing: '-0.01em', boxSizing: 'border-box', }} /> {dup && (

같은 이름의 주머니가 이미 있어요

)}

색상

표지

); } // ───────────────────────────────────────────────────────────── // CollectionActionsSheet — ⋯ menu // ───────────────────────────────────────────────────────────── function CollectionActionsSheet({ collection, pinned, onClose, onEdit, onManageCards, onCleanup, onShare, onTogglePin, onDelete }) { return (

{collection.name}

{collection.count}개

} label="이름·색상·표지 편집" onClick={onEdit} /> } label="씨앗 추가·제거" onClick={onManageCards} /> } label="씨앗 정리 모드" onClick={onCleanup} /> } label={pinned ? '핀 해제' : '홈에 고정'} onClick={onTogglePin} /> } label="공유" onClick={onShare} />

} label="주머니 삭제" danger onClick={onDelete} />

); } function CleanupGlyph() { return ( ); } function ActionRow({ icon, label, onClick, danger, disabled }) { return ( ); } // ───────────────────────────────────────────────────────────── // DeleteConfirmSheet // ───────────────────────────────────────────────────────────── function DeleteConfirmSheet({ collection, onClose, onConfirm }) { return (

"{collection.name}"
주머니를 삭제할까요?

{collection.count > 0 ? <>안에 있는 {collection.count}개의 씨앗은 그대로 두고 주머니만 사라져요.
전체 씨앗 화면에서 다시 찾을 수 있어요. : '되돌릴 수 없어요.'}

); } // ───────────────────────────────────────────────────────────── // Glyphs // ───────────────────────────────────────────────────────────── function EditGlyph() { return ( ); } function MoveGlyph() { return ( ); } function ShareGlyph() { return ( ); } function TrashGlyph({ color = CT.ink, size = 15 }) { return ( ); } // ───────────────────────────────────────────────────────────── // "Add Collection" tile (used in home grid) // ───────────────────────────────────────────────────────────── function AddCollectionTile({ onClick, accent }) { return ( ); } // ───────────────────────────────────────────────────────────── // Empty state for a collection with no cards // ───────────────────────────────────────────────────────────── function EmptyCollectionBody({ accent, color, onAddCard }) { return (

{window.PouchWithSeeds ? : }

아직 씨앗이 없어요

새 표현을 담아 이 주머니를 시작해보세요

); } // ───────────────────────────────────────────────────────────── // CardPickerSheet — pick existing cards to add to a collection // ───────────────────────────────────────────────────────────── function CardPickerSheet({ collection, allCards, accent, onClose, onConfirm }) { const [q, setQ] = React.useState(''); const [picked, setPicked] = React.useState(new Set()); const inputRef = React.useRef(null); React.useEffect(() => { const t = setTimeout(() => inputRef.current && inputRef.current.focus(), 280); return () => clearTimeout(t); }, []); const inThis = new Set((collection.cards || []).map(c => c.id)); const candidates = React.useMemo(() => { const query = q.trim().toLowerCase(); return allCards.filter(c => { if (inThis.has(c.id)) return false; if (!query) return true; return c.foreign.toLowerCase().includes(query) || c.korean.toLowerCase().includes(query) || c.pronunciation.toLowerCase().includes(query) || (c.group || '').toLowerCase().includes(query); }); }, [allCards, q, collection]); // Group candidates by source collection const grouped = React.useMemo(() => { const map = new Map(); for (const c of candidates) { const key = c.group || '미분류'; if (!map.has(key)) map.set(key, []); map.get(key).push(c); } return [...map.entries()]; }, [candidates]); const toggle = (id) => { const next = new Set(picked); if (next.has(id)) next.delete(id); else next.add(id); setPicked(next); }; return (

"{collection.name}"에 추가

다른 주머니가나 미분류 씨앗에서 골라보세요.
선택한 씨앗은 이 주머니로 옮겨져요.

setQ(e.target.value)} placeholder="씨앗 검색" style={{ flex: 1, height: '100%', background: 'transparent', border: 'none', outline: 'none', fontFamily: 'inherit', fontSize: 15, color: CT.ink, letterSpacing: '-0.01em', }} />

{grouped.length === 0 ? (

{q ? `"${q}"에 대한 결과가 없어요` : '추가할 수 있는 씨앗이 없어요'}

) : grouped.map(([groupName, list]) => (

{groupName} · {list.length}개

{list.map(c => { const on = picked.has(c.id); return ( ); })}

))}

); } // ───────────────────────────────────────────────────────────── // ShareCollectionSheet — mock share UI // ───────────────────────────────────────────────────────────── function shareCodeFor(name) { // Deterministic short code from name (just for demo) let h = 0; for (let i = 0; i < name.length; i++) h = ((h << 5) - h) + name.charCodeAt(i) | 0; return Math.abs(h).toString(36).slice(0, 6); } function MockQR({ size = 132, code, color = '#1F1812' }) { // Render a 13x13 QR-looking grid deterministically from code chars const cells = 13; const cell = size / cells; const seed = (code || 'abc').split('').reduce((s, c, i) => s + (c.charCodeAt(0) * (i+1)), 0); const rng = (n) => { const x = Math.sin(seed + n) * 10000; return x - Math.floor(x); }; const dots = []; for (let r = 0; r < cells; r++) { for (let c = 0; c < cells; c++) { // Skip finder pattern corners if ((r < 4 && c < 4) || (r < 4 && c >= cells - 4) || (r >= cells - 4 && c < 4)) continue; if (rng(r * cells + c) > 0.55) { dots.push(); } } } const finder = (cx, cy) => ( ); return ( ); } // ───────────────────────────────────────────────────────────── // CardStackPreview — fanned mini-card stack used in share sheet // ───────────────────────────────────────────────────────────── function CardStackPreview({ collection, accent }) { const cards = (collection.cards || []).slice(0, 3); // Pad with placeholders if collection has < 3 cards const items = cards.length >= 3 ? cards : cards.length === 2 ? [...cards, null] : cards.length === 1 ? [...cards, null, null] : [null, null, null]; // Card stack: 3 cards with subtle rotation/offset, front card is most prominent. // Position: layered, front is centered, others peek to the sides. return (

{items.slice().reverse().map((c, idx) => { // idx 0 = back, 2 = front const isFront = idx === items.length - 1; const depth = items.length - 1 - idx; // 0..2 const angle = depth === 0 ? 0 : (depth === 1 ? -5 : 5); const xOff = depth === 0 ? 0 : (depth === 1 ? -22 : 22); const yOff = depth === 0 ? 0 : 10; const scale = 1 - depth * 0.04; const opacity = 1; const z = 10 - depth; return (

); })}

); } function MiniShareCard({ card, accent, dim, collectionColor }) { const T = { surface: '#FBF7F0', surface2: '#FFFFFF', hairline: 'rgba(60, 42, 20, 0.09)', ink: '#1F1812', ink2: '#6B5D4A', ink3: '#A8997F', }; const langFont = card?.lang === 'ja' ? '"Noto Sans JP", Pretendard' : card?.lang === 'zh' ? '"Noto Sans SC", Pretendard' : 'Noto Sans, Pretendard'; if (!card) { // placeholder return (

); } return (

{/* Lang chip */}

{collLangFlag(card.lang)} {card.langLabel}

{/* Foreign text */}

{card.foreign}

{/* Pronunciation */}

{card.pronunciation}

{/* Korean (footer) */}

{card.korean}

); } function ShareCollectionSheet({ collection, accent, onClose, onSent }) { const friends = window.SAMPLE_FRIENDS || []; const [editable, setEditable] = React.useState(false); const [copied, setCopied] = React.useState(false); const [picked, setPicked] = React.useState(new Set()); const [message, setMessage] = React.useState(''); const code = shareCodeFor(collection.name + (editable ? '_e' : '')); const url = `cheekpouch.app/c/${code}`; const sampleCard = collection.cards && collection.cards[0]; const togglePick = (id) => { const next = new Set(picked); if (next.has(id)) next.delete(id); else next.add(id); setPicked(next); }; const sendToFriends = () => { if (picked.size === 0) return; const names = [...picked].map(id => friends.find(f => f.id === id)?.name).filter(Boolean); const target = names.length === 1 ? names[0] : `${names[0]} 외 ${names.length - 1}명`; onSent && onSent({ kind: 'friends', target, title: `${target}님에게 주머니를 보냈어요`, message: message.trim() || `"${collection.name}" · ${collection.count}개`, }); }; const sendExternal = (channel) => { if (channel === 'copy') { setCopied(true); setTimeout(() => setCopied(false), 1600); onSent && onSent({ kind: 'external', target: channel, title: '공유 링크가 복사됐어요', message: '원하는 곳에 붙여넣어 보세요', }); } else { onSent && onSent({ kind: 'external', target: channel, title: `${channel}으로 주머니를 공유했어요`, message: `"${collection.name}" · ${collection.count}개`, }); } }; const copyLink = () => { setCopied(true); setTimeout(() => setCopied(false), 1600); onSent && onSent({ kind: 'external', target: 'copy', title: '공유 링크가 복사됐어요', message: '원하는 곳에 붙여넣어 보세요', }); }; return (

주머니 공유

받는 사람이 씨앗을 듣고 자기 주머니에 담을 수 있어요.

{/* Card stack preview */} {/* Meta row */}

{window.CoverIcon && }

{collection.name}

{collection.isMultiLang ? '🌐' : collLangFlag(collection.primaryLang)} {collection.isMultiLang ? '여러 언어' : collection.primaryLangLabel} · {collection.count}개

{/* In-app friends */}

앱 내 친구

{friends.length === 0 ? (

아직 친구가 없어요

) : friends.map(f => { const on = picked.has(f.id); return ( ); })}

{/* Message field — appears once a friend is picked, slides in naturally */} {picked.size > 0 && (

함께 보낼 메시지 · 선택

setMessage(e.target.value)}
                placeholder="예: 다음 주 도쿄 갈 때 같이 외워보자!"
                rows={2}
                maxLength={120}
                style={{
                  width: '100%',
                  background: 'transparent',
                  border: 'none', outline: 'none',
                  resize: 'none', padding: 0,
                  fontFamily: 'inherit',
                  fontSize: 14, color: CT.ink,
                  letterSpacing: '-0.01em', lineHeight: 1.5,
                }}
              />
              {message.length > 0 && (
                <div style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  marginTop: 4,
                }}>
                  <button onClick={() => setMessage('')} style={{
                    background: 'transparent', border: 'none', padding: 0,
                    fontSize: 11, color: CT.ink3, letterSpacing: '-0.01em',
                    cursor: 'pointer', fontFamily: 'inherit',
                  }}>지우기</button>
                  <span style={{
                    fontSize: 10.5, color: CT.ink3,
                    fontVariantNumeric: 'tabular-nums',
                  }}>{message.length} / 120</span>
                </div>
              )}
            </div>
          )}
        </div>

{/* Editable toggle */}
        <div style={{
          margin: '14px 22px 0',
          padding: '12px 14px',
          background: CT.surface2,
          border: `0.5px solid ${CT.hairline}`,
          borderRadius: 14,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontSize: 14, fontWeight: 600, color: CT.ink,
              letterSpacing: '-0.01em',
            }}>받은 사람도 편집 가능</div>
            <div style={{
              marginTop: 2,
              fontSize: 11.5, color: CT.ink3,
              letterSpacing: '-0.01em', lineHeight: 1.4,
            }}>꺼두면 씨앗을 듣고 자기 주머니로 복사만 할 수 있어요</div>
          </div>
          <button onClick={() => setEditable(e => !e)} style={{
            width: 42, height: 26, borderRadius: 999,
            background: editable ? (collection.color || accent) : 'rgba(60,42,20,0.18)',
            border: 'none', padding: 0,
            position: 'relative',
            cursor: 'pointer', flexShrink: 0,
            transition: 'background 0.2s ease',
            WebkitTapHighlightColor: 'transparent',
          }}>
            <span style={{
              position: 'absolute', top: 2, left: editable ? 18 : 2,
              width: 22, height: 22, borderRadius: 22,
              background: '#FFF',
              boxShadow: '0 1.5px 3px rgba(0,0,0,0.18)',
              transition: 'left 0.2s ease',
            }} />
          </button>
        </div>

{/* External channels */}
        <div style={{ padding: '18px 22px 0' }}>
          <div style={{
            padding: '0 4px 10px',
            fontSize: 11, fontWeight: 700, color: CT.ink3,
            letterSpacing: '0.08em', textTransform: 'uppercase',
          }}>다른 앱으로 보내기</div>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8,
          }}>
            <ShareDestButton label="카톡" bg="#FEE500"
                             icon={<KakaoMini />}
                             onClick={() => sendExternal('카카오톡')} />
            <ShareDestButton label="메시지" bg="#34C759"
                             icon={<MsgMini />}
                             onClick={() => sendExternal('메시지')} />
            <ShareDestButton label="메일" bg="#0A84FF"
                             icon={<MailMini />}
                             onClick={() => sendExternal('메일')} />
            <ShareDestButton label={copied ? '복사됨' : '링크'}
                             bg="rgba(60,42,20,0.10)" inkColor={CT.ink}
                             icon={copied
                                ? <CheckMini color={CT.ink} />
                                : <LinkMini color={CT.ink} />}
                             onClick={copyLink} />
          </div>
        </div>

{/* QR (smaller, at bottom — useful in person) */}
        <div style={{
          margin: '20px 22px 0',
          padding: '14px 16px',
          background: CT.surface2,
          border: `0.5px solid ${CT.hairline}`,
          borderRadius: 14,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{
            padding: 6,
            background: '#FFF',
            border: `0.5px solid ${CT.hairlineStrong}`,
            borderRadius: 10,
            flexShrink: 0,
          }}>
            <MockQR size={58} code={code} color={collection.color} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontSize: 12.5, fontWeight: 600, color: CT.ink,
              letterSpacing: '-0.01em',
            }}>QR로 바로 받기</div>
            <div style={{
              marginTop: 2,
              fontFamily: 'ui-monospace, SFMono-Regular, monospace',
              fontSize: 11, color: CT.ink3,
              letterSpacing: '-0.01em',
              overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
            }}>{url}</div>
          </div>
        </div>
      </div>

{/* Send action */}
      <div style={{ padding: '12px 22px 0', flexShrink: 0 }}>
        {picked.size > 0 ? (
          <button onClick={sendToFriends} style={{
            width: '100%', height: 50, borderRadius: 14,
            background: accent, color: '#FFF', border: 'none',
            fontFamily: 'inherit', fontSize: 15, fontWeight: 700,
            letterSpacing: '-0.01em',
            cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            WebkitTapHighlightColor: 'transparent',
          }}>
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
              <path d="M2 8L14 2L11 14L8 9L2 8Z" fill="#FFF"/>
            </svg>
            {picked.size === 1
              ? `${friends.find(f => f.id === [...picked][0])?.name}님에게 보내기`
              : `${picked.size}명에게 보내기`}
          </button>
        ) : (
          <button onClick={onClose} style={{
            width: '100%', height: 48, borderRadius: 14,
            background: 'transparent', color: CT.ink,
            border: `1px solid ${CT.hairlineStrong}`,
            fontFamily: 'inherit', fontSize: 15, fontWeight: 500,
            letterSpacing: '-0.01em',
            cursor: 'pointer',
            WebkitTapHighlightColor: 'transparent',
          }}>닫기</button>
        )}
      </div>
    </CSheet>
  );
}

function ShareDestButton({ label, bg, inkColor, icon, onClick }) {
  return (
    <button onClick={onClick} style={{
      padding: '10px 6px 8px',
      background: 'transparent',
      border: 'none',
      cursor: 'pointer', fontFamily: 'inherit',
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
      WebkitTapHighlightColor: 'transparent',
    }}>
      <span style={{
        width: 46, height: 46, borderRadius: 14,
        background: bg,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>{icon}</span>
      <span style={{
        fontSize: 11, color: CT.ink2,
        letterSpacing: '-0.01em', whiteSpace: 'nowrap',
      }}>{label}</span>
    </button>
  );
}

// ─────────────────────────────────────────────────────────────
// PinGlyph
// ─────────────────────────────────────────────────────────────
function PinGlyph({ size = 12, color = '#FFF' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M5 1.5h4l-.6 3.5 2.5 2-1 1H8v3.5l-1 1.5-1-1.5V8H4l-1-1 2.5-2L5 1.5z"
            fill={color} stroke={color} strokeWidth="0.6" strokeLinejoin="round"/>
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// CollectionTileCard — flat colored "note" style
// ─────────────────────────────────────────────────────────────
function CollectionTileCard({ group, accent, pinned, onClick }) {
  const previewCard = group.cards && group.cards[0];
  const dot = group.color || '#8B6F47';
  const isEmpty = !previewCard;
  const cover = group.cover || { kind: 'auto' };
  const slotId = slotIdFor(group.name);

const onColor = '#FFF';
  const onColorSoft = 'rgba(255,255,255,0.74)';

return (
    <button onClick={onClick} style={{
      position: 'relative',
      padding: 0,
      borderRadius: 16,
      cursor: 'pointer',
      fontFamily: 'inherit',
      textAlign: 'left',
      WebkitTapHighlightColor: 'transparent',
      overflow: 'hidden',
      border: 'none',
      background: cover.kind === 'photo' ? '#000' : `linear-gradient(155deg, ${dot} 0%, ${shade(dot, -18)} 100%)`,
      minHeight: 184,
      display: 'flex', flexDirection: 'column',
      boxShadow: '0 1px 0 rgba(255,255,255,0.16) inset',
    }}>
      {/* Photo bg layer */}
      {cover.kind === 'photo' && (
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
          <image-slot
            id={slotId}
            shape="rect"
            placeholder=""
            style={{ display: 'block', width: '100%', height: '100%', pointerEvents: 'none' }}
          />
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.60) 100%)',
          }} />
        </div>
      )}

{/* Decorative pouch watermark for auto mode (fills negative space) */}
      {cover.kind === 'auto' && window.PouchShape && (
        <div style={{
          position: 'absolute',
          top: -10, right: -18,
          opacity: isEmpty ? 0.22 : 0.16,
          pointerEvents: 'none', userSelect: 'none',
          transform: 'rotate(8deg)',
        }}>
          <window.PouchShape size={110} fill="#FFFFFF" cord="rgba(255,255,255,0.6)"
                             shade="rgba(255,255,255,0.4)" highlight="rgba(255,255,255,0.9)"
                             seeds={isEmpty ? 0 : 3}
                             seedFill="rgba(255,255,255,0.85)" />
        </div>
      )}
      {/* Scattered seed dust along bottom for auto mode (only when has cards) */}
      {cover.kind === 'auto' && !isEmpty && window.SeedCluster && (
        <div style={{
          position: 'absolute', left: -6, right: -6, bottom: -2, height: 38,
          opacity: 0.32, pointerEvents: 'none',
        }}>
          <window.SeedCluster count={7} width={220} height={38}
                              color="#FFFFFF" layout="scatter" />
        </div>
      )}

{/* Top row: count + pin */}
      <div style={{
        position: 'relative', zIndex: 1,
        padding: '12px 14px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div style={{
          height: 22, padding: '0 10px 0 7px', borderRadius: 999,
          background: 'rgba(0,0,0,0.22)',
          display: 'inline-flex', alignItems: 'center', gap: 5,
          fontSize: 11.5, fontWeight: 600, color: onColor,
          letterSpacing: '-0.01em',
          backdropFilter: 'blur(8px)',
        }}>
          {window.SeedShape && (
            <window.SeedShape size={9} fill="#FFFFFF"
                              highlight="rgba(255,255,255,0.45)" />
          )}
          <span style={{ fontVariantNumeric: 'tabular-nums' }}>{group.count}</span>
          <span style={{ opacity: 0.7, fontSize: 10 }}>개</span>
        </div>
        {pinned && (
          <span style={{
            width: 22, height: 22, borderRadius: 22,
            background: 'rgba(255,255,255,0.22)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <PinGlyph size={11} color={onColor} />
          </span>
        )}
      </div>

{/* Cover area (icon mode — fills middle) */}
      {cover.kind === 'icon' && (
        <div style={{
          position: 'relative', zIndex: 1,
          flex: 1,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <CoverIcon name={cover.icon || 'star'} size={48} color={onColor} />
        </div>
      )}

{/* Hero area for auto mode — quote takes the empty space */}
      {cover.kind === 'auto' && (
        <div style={{
          position: 'relative', zIndex: 1,
          flex: 1,
          padding: '4px 14px 6px',
          display: 'flex', alignItems: 'center',
        }}>
          {isEmpty ? (
            <div style={{
              fontSize: 13, color: onColorSoft,
              letterSpacing: '-0.01em', fontStyle: 'italic',
              textAlign: 'left', lineHeight: 1.4,
            }}>씨앗을<br/>담아보세요</div>
          ) : (
            <div style={{
              fontFamily: previewCard?.lang === 'ja' ? '"Noto Sans JP", Pretendard' : 'Noto Sans, Pretendard',
              fontSize: 15, fontWeight: 500, color: onColor,
              letterSpacing: '-0.01em', lineHeight: 1.35,
              display: '-webkit-box',
              WebkitLineClamp: 3, WebkitBoxOrient: 'vertical',
              overflow: 'hidden',
              textWrap: 'balance',
            }}>{previewCard.foreign}</div>
          )}
        </div>
      )}

{/* Photo mode: empty middle so photo shows through */}
      {cover.kind === 'photo' && (
        <div style={{ flex: 1 }} />
      )}

{/* Bottom: thin divider + title + meta */}
      <div style={{
        position: 'relative', zIndex: 1,
        padding: '0 14px 14px',
      }}>
        <div style={{
          width: 18, height: 1.5, borderRadius: 1,
          background: 'rgba(255,255,255,0.45)',
          marginBottom: 8,
        }} />
        <div style={{
          fontSize: 16, fontWeight: 700, color: onColor,
          letterSpacing: '-0.02em', lineHeight: 1.2,
          display: '-webkit-box',
          WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
          overflow: 'hidden',
        }}>{group.name}</div>
        <div style={{
          marginTop: 4,
          fontSize: 11, color: onColorSoft, letterSpacing: '-0.01em',
          display: 'inline-flex', alignItems: 'center', gap: 5,
        }}>
          {!isEmpty && (
            <span style={{ fontSize: 13, lineHeight: 1, filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.15))' }}>
              {group.isMultiLang ? '🌐' : collLangFlag(group.primaryLang)}
            </span>
          )}
          <span>
            {isEmpty ? '비어있음' :
              (group.isMultiLang ? '여러 언어' : group.primaryLangLabel)}
          </span>
        </div>
      </div>
    </button>
  );
}

// ─────────────────────────────────────────────────────────────
// CollectionListRow — compact horizontal row for list mode
// ─────────────────────────────────────────────────────────────
function CollectionListRow({ group, accent, pinned, onClick }) {
  const dot = group.color || '#8B6F47';
  const previewCard = group.cards && group.cards[0];
  const isEmpty = !previewCard;
  const cover = group.cover || { kind: 'auto' };
  const slotId = slotIdFor(group.name);

return (
    <button onClick={onClick} style={{
      width: '100%',
      background: CT.surface,
      border: `0.5px solid ${CT.hairline}`,
      borderRadius: 14,
      padding: 6,
      cursor: 'pointer',
      fontFamily: 'inherit',
      textAlign: 'left',
      display: 'flex', alignItems: 'stretch', gap: 12,
      WebkitTapHighlightColor: 'transparent',
      overflow: 'hidden',
    }}>
      {/* Cover block — matches Card tile aesthetic */}
      <div style={{
        position: 'relative',
        width: 64, height: 64, borderRadius: 10,
        overflow: 'hidden', flexShrink: 0,
        background: cover.kind === 'photo' ? '#000'
                  : `linear-gradient(155deg, ${dot} 0%, ${shade(dot, -18)} 100%)`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        {cover.kind === 'photo' ? (
          <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
            <image-slot id={slotId} shape="rect" placeholder=""
                        style={{ display: 'block', width: '100%', height: '100%', pointerEvents: 'none' }} />
          </div>
        ) : cover.kind === 'icon' ? (
          <CoverIcon name={cover.icon || 'star'} size={28} color="#FFF" />
        ) : (
          // auto mode: pouch silhouette with seed count
          <div style={{
            position: 'relative', width: '100%', height: '100%',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            {window.PouchShape && (
              <div style={{ position: 'absolute', inset: 0,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                opacity: 0.35,
              }}>
                <window.PouchShape size={56} fill="#FFFFFF"
                                   cord="rgba(255,255,255,0.7)"
                                   shade="rgba(255,255,255,0.4)"
                                   highlight="rgba(255,255,255,0.95)"
                                   seeds={isEmpty ? 0 : 0} />
              </div>
            )}
            <div style={{
              position: 'relative',
              display: 'flex', flexDirection: 'column', alignItems: 'center',
              color: '#FFF', lineHeight: 1,
            }}>
              <span style={{
                fontSize: 22, fontWeight: 700, letterSpacing: '-0.04em',
                fontVariantNumeric: 'tabular-nums',
                textShadow: '0 1px 2px rgba(0,0,0,0.18)',
              }}>{isEmpty ? '·' : group.count}</span>
              <span style={{
                marginTop: 3,
                fontSize: 9, fontWeight: 600, letterSpacing: '0.08em',
                opacity: 0.82,
              }}>개</span>
            </div>
          </div>
        )}
        {/* Tiny seed nestled at corner for auto-mode non-empty */}
        {cover.kind === 'auto' && !isEmpty && window.SeedShape && (
          <div style={{
            position: 'absolute', top: 4, right: 5,
            opacity: 0.7,
            transform: 'rotate(18deg)',
            pointerEvents: 'none',
          }}>
            <window.SeedShape size={8} fill="rgba(255,255,255,0.85)"
                              highlight="rgba(255,255,255,0.3)" />
          </div>
        )}
      </div>

{/* Content */}
      <div style={{ flex: 1, minWidth: 0,
        display: 'flex', flexDirection: 'column', justifyContent: 'center',
        paddingTop: 2, paddingBottom: 2, paddingRight: 4,
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6,
          minWidth: 0,
        }}>
          <span style={{
            fontSize: 15.5, fontWeight: 700, color: CT.ink,
            letterSpacing: '-0.02em',
            overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
            flex: 1, minWidth: 0,
          }}>{group.name}</span>
          {pinned && (
            <span style={{ flexShrink: 0, display: 'inline-flex' }}>
              <PinGlyph size={11} color={dot} />
            </span>
          )}
        </div>

{/* Quote / preview line — fades out gracefully if empty */}
        {!isEmpty && cover.kind !== 'photo' && (
          <div style={{
            marginTop: 4,
            fontFamily: previewCard.lang === 'ja' ? '"Noto Sans JP", Pretendard' : 'Noto Sans, Pretendard',
            fontSize: 12.5, color: CT.ink2,
            letterSpacing: '-0.01em', lineHeight: 1.35,
            overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
          }}>{previewCard.foreign}</div>
        )}

<div style={{
          marginTop: 5,
          display: 'flex', alignItems: 'center', gap: 6,
          fontSize: 11, color: CT.ink3, letterSpacing: '-0.01em',
        }}>
          {isEmpty ? (
            <>
              <span style={{ width: 4, height: 4, borderRadius: 4, background: dot, flexShrink: 0 }} />
              <span style={{ fontStyle: 'italic' }}>비어있음</span>
            </>
          ) : (
            <>
              <span style={{ fontSize: 12, lineHeight: 1, flexShrink: 0 }}>
                {group.isMultiLang ? '🌐' : collLangFlag(group.primaryLang)}
              </span>
              <span style={{
                overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
              }}>{group.isMultiLang ? '여러 언어' : group.primaryLangLabel}</span>
              <span>·</span>
              <span style={{ fontWeight: 600, color: CT.ink2 }}>{group.count}개</span>
              {group.latestDays != null && group.latestDays <= 7 && (
                <>
                  <span>·</span>
                  <span style={{ color: dot, fontWeight: 600 }}>
                    {group.latestDays === 0 ? '오늘' :
                     group.latestDays === 1 ? '어제' :
                     `${group.latestDays}일 전`}
                  </span>
                </>
              )}
            </>
          )}
        </div>
      </div>

{/* Chevron */}
      <div style={{
        flexShrink: 0,
        display: 'inline-flex', alignItems: 'center', paddingRight: 6,
      }}>
        <svg width="8" height="14" viewBox="0 0 8 14" fill="none">
          <path d="M1.5 1.5L6.5 7L1.5 12.5" stroke={CT.ink3} strokeWidth="1.6"
                strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </div>
    </button>
  );
}

// ─────────────────────────────────────────────────────────────
// AllCardsTile — companion tile in the collection grid
// ─────────────────────────────────────────────────────────────
function AllCardsTile({ total, onClick }) {
  return (
    <button onClick={onClick} style={{
      position: 'relative',
      padding: 0,
      borderRadius: 16,
      cursor: 'pointer',
      fontFamily: 'inherit',
      textAlign: 'left',
      WebkitTapHighlightColor: 'transparent',
      overflow: 'hidden',
      border: 'none',
      background: 'linear-gradient(155deg, #2A2620 0%, #1F1812 100%)',
      minHeight: 184,
      display: 'flex', flexDirection: 'column',
      boxShadow: '0 1px 0 rgba(255,255,255,0.08) inset',
    }}>
      {/* Top: count badge */}
      <div style={{
        position: 'relative', zIndex: 1,
        padding: '12px 14px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div style={{
          height: 22, padding: '0 10px 0 7px', borderRadius: 999,
          background: 'rgba(255,255,255,0.10)',
          display: 'inline-flex', alignItems: 'center', gap: 5,
          fontSize: 11.5, fontWeight: 600, color: '#FFF',
          letterSpacing: '-0.01em',
        }}>
          {window.SeedShape && (
            <window.SeedShape size={9} fill="#FFFFFF"
                              highlight="rgba(255,255,255,0.45)" />
          )}
          <span style={{ fontVariantNumeric: 'tabular-nums' }}>{total}</span>
          <span style={{ opacity: 0.7, fontSize: 10 }}>개</span>
        </div>
      </div>

{/* Hero — heap of seeds (a "hamster's stash") */}
      <div style={{
        position: 'relative', zIndex: 1,
        flex: 1,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        overflow: 'hidden',
      }}>
        {window.SeedCluster && (
          <div style={{
            position: 'absolute', inset: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <window.SeedCluster count={22} width={180} height={92}
                                color="#FFFFFF" opacity={0.85}
                                layout="pile" seed={11} />
          </div>
        )}
        {/* Soft warm light gradient on top */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(60% 80% at 50% 30%, rgba(201,168,106,0.18) 0%, transparent 70%)',
          pointerEvents: 'none',
        }} />
      </div>

{/* Bottom: title + meta */}
      <div style={{
        position: 'relative', zIndex: 1,
        padding: '0 14px 14px',
      }}>
        <div style={{
          width: 18, height: 1.5, borderRadius: 1,
          background: 'rgba(255,255,255,0.45)',
          marginBottom: 8,
        }} />
        <div style={{
          fontSize: 16, fontWeight: 700, color: '#FFF',
          letterSpacing: '-0.02em', lineHeight: 1.2,
        }}>전체 씨앗</div>
        <div style={{
          marginTop: 4,
          fontSize: 11, color: 'rgba(255,255,255,0.66)',
          letterSpacing: '-0.01em',
        }}>언어·카테고리로 둘러보기</div>
      </div>
    </button>
  );
}

// ─────────────────────────────────────────────────────────────
// UpgradeQuotaSheet — quota top-up options
// ─────────────────────────────────────────────────────────────
function UpgradeQuotaSheet({ accent, used, total, dailyCap, dailyCapMax, todayBoost, onWatchAd, onInviteFriend, onClose }) {
  const remaining = Math.max(0, total - used);
  const inviteAtMax = dailyCap >= dailyCapMax;
  const [adState, setAdState] = React.useState('idle'); // idle | playing | done
  const [inviteState, setInviteState] = React.useState('idle'); // idle | sharing | done | max
  const [justAdded, setJustAdded] = React.useState(null); // {n, label}

const flashAdded = (n, label) => {
    setJustAdded({ n, label });
    setTimeout(() => setJustAdded(null), 1700);
  };

const handleWatchAd = () => {
    if (adState !== 'idle') return;
    setAdState('playing');
    setTimeout(() => {
      onWatchAd && onWatchAd();
      setAdState('done');
      flashAdded(1, '오늘만');
      setTimeout(() => setAdState('idle'), 1500);
    }, 1500);
  };

return (
    <CSheet onClose={onClose} maxHeight="92%">
      <div style={{ padding: '0 24px 4px', position: 'relative' }}>
        <div style={{
          fontSize: 20, fontWeight: 700, color: CT.ink,
          letterSpacing: '-0.02em', lineHeight: 1.2,
          textWrap: 'balance',
        }}>오늘 볼주머니가<br/>꽉 찼나요?</div>
        <div style={{
          marginTop: 8,
          fontSize: 13.5, color: CT.ink2, letterSpacing: '-0.01em', lineHeight: 1.5,
        }}>오늘은 <strong style={{ color: CT.ink, fontWeight: 700 }}>{total}개</strong>까지 담을 수 있고,
        매일 자정에 다시 비워져요. 한 자리 더 만들 수 있는 방법이 있어요.</div>

{justAdded && (
          <div key={`${justAdded.label}-${total}`} style={{
            position: 'absolute', top: -2, right: 18,
            display: 'inline-flex', alignItems: 'center', gap: 5,
            height: 26, padding: '0 11px', borderRadius: 999,
            background: accent, color: '#FFF',
            fontSize: 12, fontWeight: 700, letterSpacing: '-0.01em',
            boxShadow: `0 6px 18px ${accent}55`,
            animation: 'cp-toast-in 240ms cubic-bezier(.2,.7,.2,1) both',
          }}>
            <svg width="11" height="11" viewBox="0 0 16 16" fill="none">
              <path d="M8 1.5L9 6.5L14 7.5L9 8.5L8 13.5L7 8.5L2 7.5L7 6.5L8 1.5Z" fill="#FFF"/>
            </svg>
            {justAdded.label} +{justAdded.n}자리
          </div>
        )}
      </div>

<div style={{ overflowY: 'auto', padding: '20px 22px 8px' }}>
        {/* Visual: sunflower seeds in the cheek pouch */}
        <SeedPouchVisual used={used} dailyCap={dailyCap} todayBoost={todayBoost} accent={accent} />

{/* Hidden — Pro card removed */}
        {false && <button style={{
          width: '100%',
          padding: '20px 20px',
          borderRadius: 18,
          background: `linear-gradient(135deg, ${accent} 0%, ${shade(accent, -22)} 100%)`,
          border: 'none',
          color: '#FFF',
          textAlign: 'left',
          cursor: 'pointer',
          fontFamily: 'inherit',
          position: 'relative',
          overflow: 'hidden',
          WebkitTapHighlightColor: 'transparent',
        }}>
          <div style={{
            position: 'absolute', top: -20, right: -20,
            fontSize: 100, lineHeight: 1,
            fontFamily: 'Georgia, serif', fontWeight: 700,
            color: 'rgba(255,255,255,0.12)',
            pointerEvents: 'none',
          }}>∞</div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            height: 22, padding: '0 9px', borderRadius: 999,
            background: 'rgba(255,255,255,0.18)',
            fontSize: 10.5, fontWeight: 700, letterSpacing: '0.06em',
          }}>
            <SparkleSmall />
            CHEEKPOUCH PRO
          </div>
          <div style={{
            marginTop: 12,
            fontSize: 24, fontWeight: 700,
            letterSpacing: '-0.03em', lineHeight: 1.15,
            textWrap: 'balance',
          }}>한도 없이 마음껏 담아요</div>
          <div style={{
            marginTop: 8,
            fontSize: 13, color: 'rgba(255,255,255,0.86)',
            letterSpacing: '-0.01em', lineHeight: 1.5,
          }}>모든 주머니·언어 무제한 · 스크린샷 자동 분류 · iCloud 동기화 · 더 많은 음성</div>
          <div style={{
            marginTop: 14,
            display: 'flex', alignItems: 'flex-end', gap: 8,
          }}>
            <span style={{
              fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em',
            }}>₩4,900</span>
            <span style={{
              fontSize: 12, color: 'rgba(255,255,255,0.7)',
              marginBottom: 4, letterSpacing: '-0.01em',
            }}>/ 월</span>
            <span style={{
              marginLeft: 'auto', marginBottom: 2,
              height: 28, padding: '0 12px', borderRadius: 999,
              background: '#FFF',
              color: shade(accent, -8),
              display: 'inline-flex', alignItems: 'center', gap: 4,
              fontSize: 12, fontWeight: 700,
              letterSpacing: '-0.01em',
            }}>
              7일 무료 체험
              <svg width="7" height="11" viewBox="0 0 8 14" fill="none">
                <path d="M1.5 1.5L6.5 7L1.5 12.5"
                      stroke={shade(accent, -8)} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </span>
          </div>
        </button>}

{/* Free options */}
        <div style={{
          fontSize: 11, fontWeight: 600, color: CT.ink3,
          letterSpacing: '0.08em', textTransform: 'uppercase',
          padding: '20px 4px 10px',
        }}>볼주머니 늘리는 방법</div>

<div style={{
          background: CT.surface2,
          borderRadius: 14,
          border: `0.5px solid ${CT.hairline}`,
          overflow: 'hidden',
        }}>
          <QuotaOption icon={<PlayCircleGlyph />} title="광고 1편 보기"
                       sub={adState === 'playing' ? '광고 재생 중…' :
                            adState === 'done'    ? '오늘만 +1자리 늘었어요!' :
                                                    '오늘만 씨앗 한 개 더 (자정에 사라져요)'}
                       reward="+1 오늘만" accent={accent} first
                       state={adState}
                       onClick={handleWatchAd} />
          <QuotaOption icon={<FriendsGlyph />}    title="친구 초대하기"
                       sub={inviteState === 'sharing' ? '초대 링크를 공유하는 중…' :
                            inviteState === 'done'    ? '매일 +1자리! 친구가 가입하면 둘 다 받아요' :
                            inviteState === 'max'     ? `최대 ${dailyCapMax}개까지 늘릴 수 있어요` :
                            inviteAtMax              ? `볼주머니가 최대치(${dailyCapMax}개)예요` :
                                                       '가입하면 매일 받는 씨앗이 영구 +1개'}
                       reward={inviteAtMax ? '최대치' : '+1 매일'} accent={accent}
                       state={inviteState === 'max' ? 'done' : inviteState}
                       dim={inviteAtMax && inviteState === 'idle'}
                       trailing={
                         <div style={{
                           display: 'inline-flex', alignItems: 'center', gap: 4,
                           fontSize: 10.5, color: CT.ink3,
                           fontVariantNumeric: 'tabular-nums',
                           letterSpacing: '-0.01em',
                         }}>
                           <span style={{
                             fontWeight: 700,
                             color: inviteAtMax ? CT.ink3 : accent,
                           }}>{dailyCap}</span>
                           <span>/ {dailyCapMax}</span>
                         </div>
                       }
                       onClick={handleInvite} />
        </div>

<div style={{
          marginTop: 14,
          padding: '11px 14px',
          background: 'rgba(60,42,20,0.05)',
          borderRadius: 12,
          fontSize: 12, color: CT.ink2,
          letterSpacing: '-0.01em', lineHeight: 1.5,
          display: 'flex', gap: 8, alignItems: 'flex-start',
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0, marginTop: 1 }}>
            <circle cx="7" cy="7" r="6" stroke={CT.ink3} strokeWidth="1.3"/>
            <path d="M7 4.5v3M7 9.5h.01" stroke={CT.ink3} strokeWidth="1.5" strokeLinecap="round"/>
          </svg>
          <div>
            햄스터는 매일 자정에 집에 가서 볼주머니를 비워요. 담아둔 씨앗은 주머니에 그대로 모여 있으니 걱정 마세요.
          </div>
        </div>
      </div>

<div style={{ padding: '12px 22px 0', flexShrink: 0 }}>
        <button onClick={onClose} style={{
          width: '100%', height: 48, borderRadius: 14,
          background: 'transparent', color: CT.ink,
          border: `1px solid ${CT.hairlineStrong}`,
          fontFamily: 'inherit', fontSize: 15, fontWeight: 500,
          cursor: 'pointer',
          WebkitTapHighlightColor: 'transparent',
        }}>나중에</button>
      </div>
    </CSheet>
  );
}

// ─────────────────────────────────────────────────────────────
// SeedPouchVisual — sunflower-seed visualization of today's pouch
// Each seed slot = one card. Filled = stored, empty = available.
// Boost seeds (today-only) sit at the end with a sparkle accent.
// ─────────────────────────────────────────────────────────────
function SeedPouchVisual({ used, dailyCap, todayBoost, accent }) {
  const total = dailyCap + todayBoost;
  const remaining = Math.max(0, total - used);
  const seeds = [];
  for (let i = 0; i < dailyCap; i++) {
    seeds.push({ type: 'daily', filled: i < used });
  }
  for (let i = 0; i < todayBoost; i++) {
    seeds.push({ type: 'boost', filled: (dailyCap + i) < used });
  }
  const full = used >= total;
  return (
    <div style={{
      padding: '16px 16px 14px',
      background: `linear-gradient(180deg, ${accent}0A 0%, ${accent}05 100%)`,
      border: `0.5px solid ${accent}28`,
      borderRadius: 16,
    }}>
      <div style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
        marginBottom: 11,
      }}>
        <div style={{
          fontSize: 12.5, fontWeight: 600, color: CT.ink,
          letterSpacing: '-0.01em',
          display: 'inline-flex', alignItems: 'center', gap: 5,
        }}>
          <SunflowerGlyph color={accent} />
          오늘 모은 씨앗
        </div>
        <div style={{
          fontSize: 12, color: CT.ink2, letterSpacing: '-0.01em',
          fontVariantNumeric: 'tabular-nums',
        }}>
          <strong style={{ color: full ? accent : CT.ink, fontWeight: 700, fontSize: 13 }}>{used}</strong>
          <span style={{ color: CT.ink3 }}> / {total}개</span>
        </div>
      </div>
      <div style={{
        display: 'flex', flexWrap: 'wrap', gap: 5,
        padding: '2px 0',
      }}>
        {seeds.map((s, i) => <Seed key={i} {...s} accent={accent} />)}
      </div>
      <div style={{
        marginTop: 11,
        fontSize: 11.5, color: CT.ink3, letterSpacing: '-0.01em',
        display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap',
      }}>
        {full ? (
          <span style={{ color: accent, fontWeight: 600 }}>
            볼주머니가 가득 찼어요 — 내일 다시 비워져요
          </span>
        ) : (
          <span>오늘 <strong style={{ color: CT.ink, fontWeight: 700 }}>{remaining}개</strong> 더 담을 수 있어요</span>
        )}
        {todayBoost > 0 && (
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 3,
            color: accent, fontWeight: 600,
          }}>
            <Seed type="boost" filled={false} accent={accent} mini />
            오늘만 +{todayBoost}
          </span>
        )}
      </div>
    </div>
  );
}

function SunflowerGlyph({ color = '#8B6F47' }) {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
      {[0, 45, 90, 135, 180, 225, 270, 315].map(a => (
        <ellipse key={a} cx="7" cy="2.5" rx="1.5" ry="2.4"
                 fill={color} opacity="0.7"
                 transform={`rotate(${a} 7 7)`}/>
      ))}
      <circle cx="7" cy="7" r="2.2" fill={shade(color, -20)}/>
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// Expose
// ─────────────────────────────────────────────────────────────
Object.assign(window, {
  NewCollectionSheet,
  EditCollectionSheet,
  CollectionActionsSheet,
  DeleteConfirmSheet,
  AddCollectionTile,
  EmptyCollectionBody,
  CoverArt,
  CoverIcon,
  CardPickerSheet,
  ShareCollectionSheet,
  COLLECTION_COLORS,
  slotIdFor,
  CollectionTileCard,
  CollectionListRow,
  PinGlyph,
  AllCardsTile,
  UpgradeQuotaSheet,
  Seed,
  SunflowerGlyph,
});