{\rtf1\ansi\ansicpg949\cocoartf2706
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
{\*\expandedcolortbl;;}
\paperw11900\paperh16840\margl1440\margr1440\vieww11520\viewh8400\viewkind0
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0

\f0\fs24 \cf0 import React, \{ useState, useEffect, useCallback \} from 'react';\
import \{ Play, RotateCcw, Pause, CheckCircle2, FlaskConical, Mountain, Settings2, Edit3, Shuffle, ListOrdered, CheckSquare, ArrowRight, AlertCircle, X, Check, XCircle, RefreshCw, Hand, Map, Activity, Split, MousePointerClick, Home, ArrowLeft, Atom \} from 'lucide-react';\
\
// =================================================================================================\
// [APP 1] \uc0\u50896 \u49548  \u44592 \u54840  \u47560 \u49828 \u53552  (ElementFlashcards)\
// =================================================================================================\
const ElementFlashcards = (\{ onGoHome \}) => \{\
  const elements1to20 = [\
    \{ num: 1, sym: 'H', name: '\uc0\u49688 \u49548 ', p: 1, g: 1 \}, \{ num: 2, sym: 'He', name: '\u54764 \u47464 ', p: 1, g: 18 \},\
    \{ num: 3, sym: 'Li', name: '\uc0\u47532 \u53932 ', p: 2, g: 1 \}, \{ num: 4, sym: 'Be', name: '\u48288 \u47540 \u47464 ', p: 2, g: 2 \},\
    \{ num: 5, sym: 'B', name: '\uc0\u48533 \u49548 ', p: 2, g: 13 \}, \{ num: 6, sym: 'C', name: '\u53444 \u49548 ', p: 2, g: 14 \},\
    \{ num: 7, sym: 'N', name: '\uc0\u51656 \u49548 ', p: 2, g: 15 \}, \{ num: 8, sym: 'O', name: '\u49328 \u49548 ', p: 2, g: 16 \},\
    \{ num: 9, sym: 'F', name: '\uc0\u54540 \u47336 \u50724 \u47536 ', p: 2, g: 17 \}, \{ num: 10, sym: 'Ne', name: '\u45348 \u50728 ', p: 2, g: 18 \},\
    \{ num: 11, sym: 'Na', name: '\uc0\u45208 \u53944 \u47464 ', p: 3, g: 1 \}, \{ num: 12, sym: 'Mg', name: '\u47560 \u44536 \u45348 \u49816 ', p: 3, g: 2 \},\
    \{ num: 13, sym: 'Al', name: '\uc0\u50508 \u47336 \u48120 \u45700 ', p: 3, g: 13 \}, \{ num: 14, sym: 'Si', name: '\u44508 \u49548 ', p: 3, g: 14 \},\
    \{ num: 15, sym: 'P', name: '\uc0\u51064 ', p: 3, g: 15 \}, \{ num: 16, sym: 'S', name: '\u54889 ', p: 3, g: 16 \},\
    \{ num: 17, sym: 'Cl', name: '\uc0\u50684 \u49548 ', p: 3, g: 17 \}, \{ num: 18, sym: 'Ar', name: '\u50500 \u47476 \u44260 ', p: 3, g: 18 \},\
    \{ num: 19, sym: 'K', name: '\uc0\u52860 \u47464 ', p: 4, g: 1 \}, \{ num: 20, sym: 'Ca', name: '\u52860 \u49816 ', p: 4, g: 2 \},\
  ];\
  const extraElements = [\
    \{ sym: 'Mn', name: '\uc0\u47581 \u44032 \u45768 \u51592 ' \}, \{ sym: 'Pb', name: '\u45225 ' \}, \{ sym: 'Ag', name: '\u51008 ' \},\
    \{ sym: 'Au', name: '\uc0\u44552 ' \}, \{ sym: 'Pt', name: '\u48177 \u44552 ' \}, \{ sym: 'Cu', name: '\u44396 \u47532 ' \},\
    \{ sym: 'Fe', name: '\uc0\u52384 ' \}, \{ sym: 'Zn', name: '\u50500 \u50672 ' \}, \{ sym: 'Hg', name: '\u49688 \u51008 ' \},\
    \{ sym: 'Ba', name: '\uc0\u48148 \u47464 ' \}, \{ sym: 'Sr', name: '\u49828 \u53944 \u47200 \u53932 ' \}, \{ sym: 'Br', name: '\u48652 \u47196 \u48124 ' \},\
    \{ sym: 'I', name: '\uc0\u50500 \u51060 \u50724 \u46360 ' \},\
  ];\
  const allElements = [...elements1to20, ...extraElements];\
\
  const [gameState, setGameState] = useState('start');\
  const [cards, setCards] = useState([]);\
  const [currentIndex, setCurrentIndex] = useState(0);\
  const [isFlipped, setIsFlipped] = useState(false);\
  const [isPaused, setIsPaused] = useState(false);\
  const [isTransitioning, setIsTransitioning] = useState(false);\
  const [targetCount, setTargetCount] = useState(20);\
  const [isCustomMode, setIsCustomMode] = useState(false);\
  const [customInput, setCustomInput] = useState('');\
  const [orderMode, setOrderMode] = useState('mix');\
  const [selectedCategories, setSelectedCategories] = useState(['A', 'B', 'C']);\
  const [isReviewMode, setIsReviewMode] = useState(false);\
  const [wrongCards, setWrongCards] = useState([]);\
  const [currentMarkedWrong, setCurrentMarkedWrong] = useState(false);\
\
  // Helper\
  const generatePoolByType = useCallback((type) => \{\
    let pool = [];\
    const id = () => Math.random().toString(36).substr(2, 9);\
    switch (type) \{\
      case 1: elements1to20.forEach(e => pool.push(\{ id: id(), type: 1, q: `$\{e.num\}\uc0\u48264 `, a: `$\{e.sym\}($\{e.name\})`, color: 'bg-blue-100 text-blue-800' \})); break;\
      case 2: allElements.forEach(e => pool.push(\{ id: id(), type: 2, q: `$\{e.sym\} \uc0\u51060 \u47492 \u51008 ?`, a: e.name, color: 'bg-green-100 text-green-800' \})); break;\
      case 3: allElements.forEach(e => pool.push(\{ id: id(), type: 3, q: `$\{e.name\} \uc0\u44592 \u54840 \u45716 ?`, a: e.sym, color: 'bg-yellow-100 text-yellow-800' \})); break;\
      case 4: elements1to20.forEach(e => pool.push(\{ id: id(), type: 4, q: `$\{e.p\}\uc0\u51452 \u44592  $\{e.g\}\u51313 `, a: `$\{e.sym\}($\{e.name\})`, color: 'bg-purple-100 text-purple-800' \})); break;\
      case 5: elements1to20.forEach(e => pool.push(\{ id: id(), type: 5, q: `$\{e.sym\} \uc0\u48264 \u54840 \u45716 ?`, a: `$\{e.num\}\u48264 `, color: 'bg-red-100 text-red-800' \})); break;\
      case 6: elements1to20.forEach(e => pool.push(\{ id: id(), type: 6, q: `$\{e.sym\} \uc0\u51452 \u44592 /\u51313 `, a: `$\{e.p\}\u51452 \u44592  $\{e.g\}\u51313 `, color: 'bg-indigo-100 text-indigo-800' \})); break;\
      default: break;\
    \}\
    return pool;\
  \}, []);\
\
  const generateQuestions = useCallback((count, categories, mode) => \{\
    const categoryMap = \{ 'A': [1, 5], 'B': [2, 3], 'C': [4, 6] \};\
    const numCats = categories.length;\
    if (numCats === 0) return [];\
    const baseCount = Math.floor(count / numCats);\
    let remainder = count % numCats;\
    let final = [];\
\
    categories.forEach((catCode) => \{\
      let catCount = baseCount + (remainder > 0 ? 1 : 0);\
      if (remainder > 0) remainder--;\
      if (catCount === 0) return;\
\
      const types = categoryMap[catCode];\
      let catQuestions = [];\
      const typeBaseCount = Math.floor(catCount / types.length);\
      let typeRemainder = catCount % types.length;\
\
      types.forEach(typeId => \{\
        let typeCount = typeBaseCount + (typeRemainder > 0 ? 1 : 0);\
        if (typeRemainder > 0) typeRemainder--;\
        const pool = generatePoolByType(typeId).sort(() => 0.5 - Math.random());\
        let selected = [];\
        while (selected.length < typeCount) selected = selected.concat(pool);\
        catQuestions = catQuestions.concat(selected.slice(0, typeCount));\
      \});\
      catQuestions.sort(() => 0.5 - Math.random());\
      final = final.concat(catQuestions);\
    \});\
\
    if (mode === 'mix') final.sort(() => 0.5 - Math.random());\
    return final;\
  \}, [generatePoolByType]);\
\
  const handleStart = () => \{\
    if (selectedCategories.length === 0) return alert('\uc0\u50976 \u54805 \u51012  \u49440 \u53469 \u54644 \u51452 \u49464 \u50836 .');\
    let cnt = targetCount;\
    if (isCustomMode) \{\
      cnt = parseInt(customInput, 10);\
      if (isNaN(cnt) || cnt < 1 || cnt > 100) return alert('1~100 \uc0\u49324 \u51060  \u49707 \u51088  \u51077 \u47141 ');\
    \}\
    const newCards = generateQuestions(cnt, selectedCategories, orderMode);\
    setCards(newCards);\
    setWrongCards([]);\
    setCurrentIndex(0);\
    setIsFlipped(false);\
    setIsPaused(false);\
    setCurrentMarkedWrong(false);\
    setGameState('playing');\
  \};\
\
  const handleRetry = () => \{\
    const pool = [...wrongCards];\
    const target = Math.ceil(pool.length * 1.5);\
    let retry = [...pool];\
    while (retry.length < target) retry.push(\{ ...pool[Math.floor(Math.random() * pool.length)], id: Math.random().toString() \});\
    retry.sort(() => 0.5 - Math.random());\
    setCards(retry);\
    setWrongCards([]);\
    setCurrentIndex(0);\
    setIsFlipped(false);\
    setIsPaused(false);\
    setCurrentMarkedWrong(false);\
    setGameState('playing');\
  \};\
\
  const nextCard = () => \{\
    if (currentIndex < cards.length - 1) \{\
      setIsTransitioning(true);\
      setIsFlipped(false);\
      setTimeout(() => \{\
        setCurrentIndex(p => p + 1);\
        setCurrentMarkedWrong(false);\
        setIsTransitioning(false);\
      \}, 500);\
    \} else \{\
      setGameState('finished');\
    \}\
  \};\
\
  const handleCardClick = () => \{\
    if (isPaused || isTransitioning) return;\
    if (!isFlipped) setIsFlipped(true);\
    else nextCard();\
  \};\
\
  const toggleWrong = (e) => \{\
    e.stopPropagation();\
    const card = cards[currentIndex];\
    if (currentMarkedWrong) \{\
      setWrongCards(p => p.filter(c => c.id !== card.id));\
      setCurrentMarkedWrong(false);\
    \} else \{\
      setWrongCards(p => [...p, card]);\
      setCurrentMarkedWrong(true);\
    \}\
  \};\
\
  if (gameState === 'start') \{\
    const presetCounts = [15, 20, 25, 30, 40, 50];\
    const cats = [\
      \{ id: 'A', label: '\uc0\u48264 \u54840  \u54984 \u47144 ', sub: '\u50896 \u51088 \u48264 \u54840  \u8596  \u50896 \u49548 ', color: 'bg-blue-50 border-blue-200 text-blue-700' \},\
      \{ id: 'B', label: '\uc0\u44592 \u54840  \u54984 \u47144 ', sub: '\u50896 \u49548 \u47749  \u8596  \u44592 \u54840 ', color: 'bg-green-50 border-green-200 text-green-700' \},\
      \{ id: 'C', label: '\uc0\u51452 \u44592 /\u51313  \u54984 \u47144 ', sub: '\u51452 \u44592 /\u51313  \u8596  \u50896 \u49548 ', color: 'bg-purple-50 border-purple-200 text-purple-700' \},\
    ];\
    return (\
      <div className="flex flex-col items-center justify-center h-full p-6 font-sans overflow-y-auto bg-slate-50">\
        <div className="bg-white p-6 rounded-3xl shadow-xl max-w-md w-full border border-slate-200">\
          <div className="flex justify-between items-center mb-4">\
             <button onClick=\{onGoHome\} className="p-2 bg-slate-100 rounded-lg hover:bg-slate-200 text-slate-600"><ArrowLeft size=\{20\}/></button>\
             <div className="bg-blue-600 p-3 rounded-full text-white shadow-lg"><FlaskConical size=\{32\}/></div>\
             <div className="w-10"></div>\
          </div>\
          <h1 className="text-2xl font-black text-slate-800 mb-6 text-center">\uc0\u54868 \u54617  \u50896 \u49548  \u47560 \u49828 \u53552 </h1>\
          \
          <div className="space-y-4 mb-6">\
            <div className="bg-red-50 p-4 rounded-2xl border border-red-100 flex justify-between items-center cursor-pointer" onClick=\{() => setIsReviewMode(!isReviewMode)\}>\
              <div className="flex items-center gap-2 text-red-700 font-bold text-sm"><XCircle size=\{18\}/><span>\uc0\u50724 \u45813 \u45432 \u53944  \u47784 \u46300 </span></div>\
              <div className=\{`w-10 h-5 rounded-full p-0.5 transition-colors $\{isReviewMode ? 'bg-red-500' : 'bg-slate-300'\}`\}><div className=\{`bg-white w-4 h-4 rounded-full shadow transition-transform $\{isReviewMode ? 'translate-x-5' : ''\}`\}/></div>\
            </div>\
            <div className="bg-slate-50 p-4 rounded-2xl border border-slate-100">\
              <div className="flex items-center gap-2 mb-2 text-slate-700 font-bold text-sm"><Settings2 size=\{16\}/><span>\uc0\u47928 \u54637  \u49688 </span></div>\
              <div className="grid grid-cols-3 gap-2">\
                \{presetCounts.map(c => <button key=\{c\} onClick=\{() => \{ setTargetCount(c); setIsCustomMode(false); \}\} className=\{`py-2 rounded-lg text-xs font-bold border $\{!isCustomMode && targetCount === c ? 'bg-blue-600 text-white' : 'bg-white text-slate-600'\}`\}>\{c\}</button>)\}\
              </div>\
              <button onClick=\{() => setIsCustomMode(true)\} className=\{`w-full mt-2 py-2 rounded-lg text-xs font-bold border flex justify-center gap-1 $\{isCustomMode ? 'bg-blue-600 text-white' : 'bg-white'\}`\}><Edit3 size=\{12\}/> \uc0\u51649 \u51217  \u51077 \u47141 </button>\
              \{isCustomMode && <input type="number" value=\{customInput\} onChange=\{e => setCustomInput(e.target.value)\} className="mt-2 w-full px-3 py-2 text-sm rounded-lg border-2 border-blue-200 text-center font-bold" placeholder="1~100"/>\}\
            </div>\
            <div className="bg-slate-50 p-4 rounded-2xl border border-slate-100">\
                <div className="flex justify-between items-center mb-2"><div className="flex items-center gap-2 text-slate-700 font-bold text-sm"><Shuffle size=\{16\}/><span>\uc0\u49692 \u49436 </span></div></div>\
                <div className="grid grid-cols-2 gap-2">\
                    <button onClick=\{() => setOrderMode('mix')\} className=\{`py-2 rounded-lg text-xs font-bold border $\{orderMode === 'mix' ? 'bg-indigo-600 text-white' : 'bg-white text-slate-500'\}`\}>Mix</button>\
                    <button onClick=\{() => \{ setOrderMode('sequential'); setSelectedCategories([]); \}\} className=\{`py-2 rounded-lg text-xs font-bold border $\{orderMode === 'sequential' ? 'bg-indigo-600 text-white' : 'bg-white text-slate-500'\}`\}>\uc0\u49692 \u49436 \u45824 \u47196 </button>\
                </div>\
            </div>\
            <div className="bg-slate-50 p-4 rounded-2xl border border-slate-100">\
               <div className="flex items-center gap-2 mb-2 text-slate-700 font-bold text-sm"><CheckSquare size=\{16\}/><span>\uc0\u50976 \u54805 </span></div>\
               <div className="space-y-2">\
                 \{cats.map(c => (\
                   <button key=\{c.id\} onClick=\{() => setSelectedCategories(p => p.includes(c.id) ? p.filter(x => x !== c.id) : [...p, c.id])\} className=\{`w-full flex justify-between items-center p-3 rounded-xl border-2 $\{selectedCategories.includes(c.id) ? `$\{c.color\} bg-opacity-10` : 'bg-white border-slate-100 text-slate-400'\}`\}>\
                     <div className="flex flex-col items-start"><span className="font-bold text-xs">\{c.label\}</span><span className="text-[10px] opacity-70">\{c.sub\}</span></div>\
                     \{selectedCategories.includes(c.id) ? (orderMode === 'sequential' ? <span className="bg-current text-white w-5 h-5 rounded-full flex items-center justify-center text-xs">\{selectedCategories.indexOf(c.id) + 1\}</span> : <CheckCircle2 size=\{18\}/>) : <div className="w-5 h-5 rounded-full border-2 border-slate-200"/>\}\
                   </button>\
                 ))\}\
               </div>\
            </div>\
          </div>\
          <button onClick=\{handleStart\} className="w-full bg-slate-800 text-white text-lg font-bold py-4 rounded-xl shadow-lg flex justify-center gap-2 hover:bg-slate-900"><Play size=\{20\}/> \uc0\u49884 \u51089 \u54616 \u44592 </button>\
        </div>\
      </div>\
    );\
  \}\
\
  if (gameState === 'finished') \{\
    const wrongCnt = wrongCards.length;\
    const accuracy = Math.round(((cards.length - wrongCnt) / cards.length) * 100);\
    return (\
      <div className="flex flex-col items-center justify-center h-full p-6 bg-slate-50 overflow-y-auto">\
        <div className="bg-white p-8 rounded-3xl shadow-xl max-w-md w-full border border-slate-200 text-center">\
          <div className="flex justify-center mb-6">\
            \{isReviewMode ? <div className="w-24 h-24 rounded-full border-8 border-slate-100 flex items-center justify-center"><div className="text-center"><span className=\{`block text-3xl font-black $\{accuracy >= 80 ? 'text-green-500' : 'text-red-500'\}`\}>\{accuracy\}%</span></div></div> : <CheckCircle2 size=\{64\} className="text-green-500"/>\}\
          </div>\
          <h2 className="text-2xl font-bold text-slate-800 mb-2">\uc0\u54617 \u49845  \u50756 \u47308 !</h2>\
          \{isReviewMode && wrongCnt > 0 && (\
             <div className="mb-6 bg-red-50 p-4 rounded-xl border border-red-100 text-left max-h-48 overflow-y-auto">\
                <div className="font-bold text-red-800 text-sm mb-2">\uc0\u53952 \u47536  \u47928 \u51228  (\{wrongCnt\})</div>\
                <div className="space-y-2">\{wrongCards.map((c, i) => <div key=\{i\} className="bg-white p-2 rounded border border-red-100 text-xs"><div className="font-bold text-slate-500">Q. \{c.q\}</div><div className="text-red-600 font-bold">A. \{c.a\}</div></div>)\}</div>\
             </div>\
          )\}\
          <div className="space-y-2">\
            \{isReviewMode && wrongCnt > 0 && <button onClick=\{handleRetry\} className="w-full bg-red-500 text-white font-bold py-3 rounded-xl flex justify-center gap-2"><RefreshCw size=\{20\}/> \uc0\u50724 \u45813  \u51116 \u46020 \u51204  (1.5\u48176 )</button>\}\
            <button onClick=\{() => setGameState('start')\} className="w-full bg-slate-800 text-white font-bold py-3 rounded-xl flex justify-center gap-2"><RotateCcw size=\{20\}/> \uc0\u45796 \u49884  \u54616 \u44592 </button>\
            <button onClick=\{onGoHome\} className="w-full bg-slate-100 text-slate-600 font-bold py-3 rounded-xl flex justify-center gap-2"><Home size=\{20\}/> \uc0\u54856 \u51004 \u47196 </button>\
          </div>\
        </div>\
      </div>\
    );\
  \}\
\
  const currentCard = cards[currentIndex];\
  return (\
    <div className="flex flex-col h-full bg-slate-50 font-sans">\
      <div className="bg-white px-4 py-3 shadow-sm flex justify-between items-center z-10">\
        <div className="flex items-center gap-2 cursor-pointer" onClick=\{() => setGameState('start')\}><FlaskConical className="text-blue-600" size=\{24\}/><span className="font-bold text-slate-800 hidden sm:block">\uc0\u50896 \u49548  \u47560 \u49828 \u53552 </span></div>\
        <div className="flex items-center gap-2">\
          \{isReviewMode && <div className="px-2 py-1 bg-red-100 text-red-600 rounded text-xs font-bold flex gap-1"><AlertCircle size=\{12\}/> <span className="hidden sm:inline">\uc0\u50724 \u45813 \u45432 \u53944 </span></div>\}\
          <span className="bg-slate-100 px-2 py-1 rounded text-slate-600 font-mono font-bold text-xs">\{currentIndex + 1\}/\{cards.length\}</span>\
          <button onClick=\{onGoHome\} className="p-2 bg-slate-100 rounded text-slate-600"><Home size=\{18\}/></button>\
          <button onClick=\{() => setIsPaused(!isPaused)\} className="p-2 bg-slate-100 rounded text-slate-600">\{isPaused ? <Play size=\{18\}/> : <Pause size=\{18\}/>\}</button>\
        </div>\
      </div>\
      <div className="w-full h-1.5 bg-slate-200"><div className="h-full bg-blue-600 transition-all duration-300" style=\{\{ width: `$\{((currentIndex + 1) / cards.length) * 100\}%` \}\}></div></div>\
      \
      <div className="flex-1 flex flex-col items-center justify-center p-6 relative">\
        \{isPaused && <div className="absolute inset-0 bg-slate-50/80 z-20 flex items-center justify-center"><div className="bg-white p-6 rounded-xl shadow-lg border border-slate-200 text-center"><p className="font-bold">\uc0\u51068 \u49884  \u51221 \u51648 </p></div></div>\}\
        \
        <div onClick=\{handleCardClick\} className="relative w-full max-w-lg aspect-[4/3] cursor-pointer group perspective-1000">\
          <div className=\{`w-full h-full relative transition-all duration-500 preserve-3d $\{isFlipped ? '[transform:rotateY(180deg)]' : ''\}`\}>\
            \{/* Front */\}\
            <div className="absolute inset-0 backface-hidden rounded-3xl shadow-lg flex flex-col items-center justify-center p-8 bg-white border-2 border-slate-100 hover:border-blue-300">\
              <div className=\{`absolute top-6 left-6 px-3 py-1 rounded-full text-xs font-bold $\{currentCard.color\}`\}>Question</div>\
              <p className="text-slate-400 text-sm mb-4 font-medium">\uc0\u52852 \u46300 \u47484  \u53552 \u52824 \u54616 \u50668  \u51221 \u45813  \u54869 \u51064 </p>\
              <h3 className="text-4xl md:text-5xl font-black text-slate-800 text-center break-keep">\{currentCard.q\}</h3>\
            </div>\
            \{/* Back */\}\
            <div className="absolute inset-0 backface-hidden rounded-3xl shadow-lg flex flex-col items-center justify-center p-8 bg-blue-600 text-white [transform:rotateY(180deg)]">\
              <div className="absolute top-6 left-6 px-3 py-1 rounded-full text-xs font-bold bg-white/20">Answer</div>\
              <h3 className="text-4xl md:text-5xl font-black text-center break-keep">\{currentCard.a\}</h3>\
              <div className="absolute bottom-16 flex items-center gap-2 bg-white/10 px-4 py-2 rounded-full"><Hand size=\{16\}/><span className="text-xs">\uc0\u53552 \u52824 \u54616 \u50668  \u45796 \u51020  \u47928 \u51228 </span></div>\
              \{isReviewMode && (\
                <div className="absolute bottom-0 left-0 right-0 p-4">\
                   <button onClick=\{toggleWrong\} className=\{`w-full py-3 rounded-xl font-bold flex justify-center gap-2 transition-all $\{currentMarkedWrong ? 'bg-red-500 text-white' : 'bg-white/20 text-white'\}`\}>\
                     \{currentMarkedWrong ? <Check size=\{20\}/> : <X size=\{20\}/>\} \{currentMarkedWrong ? '\uc0\u50724 \u45813  \u52404 \u53356 \u46120 ' : '\u50724 \u45813  \u52404 \u53356  (\u49688 \u46041 )'\}\
                   </button>\
                </div>\
              )\}\
            </div>\
          </div>\
        </div>\
      </div>\
      <style>\{`.perspective-1000 \{ perspective: 1000px; \} .preserve-3d \{ transform-style: preserve-3d; \} .backface-hidden \{ backface-visibility: hidden; \}`\}</style>\
    </div>\
  );\
\};\
\
// =================================================================================================\
// [APP 2] \uc0\u54032 \u51032  \u44221 \u44228  \u47560 \u49828 \u53552  (PlateBoundaryFlashcards)\
// =================================================================================================\
const PlateBoundaryFlashcards = (\{ onGoHome \}) => \{\
  const boundaryOptions = ['\uc0\u45824 \u47449 -\u45824 \u47449  \u49688 \u47156 ', '\u45824 \u47449 -\u54644 \u50577  \u49688 \u47156 ', '\u54644 \u50577 -\u54644 \u50577  \u49688 \u47156 ', '\u54644 \u50577 -\u54644 \u50577  \u48156 \u49328 ', '\u45824 \u47449 -\u45824 \u47449  \u48156 \u49328 ', '\u48372 \u51316 \u54805  \u44221 \u44228 '];\
  const boundaryData = [\
    \{ q: '\uc0\u55176 \u47568 \u46972 \u50556  \u49328 \u47589 ', a: '\u45824 \u47449 -\u45824 \u47449  \u49688 \u47156 \u54805  (\u52649 \u46028 \u45824 )', correct: ['\u45824 \u47449 -\u45824 \u47449  \u49688 \u47156 '] \},\
    \{ q: '\uc0\u50504 \u45936 \u49828  \u49328 \u47589 ', a: '\u45824 \u47449 -\u54644 \u50577  \u49688 \u47156 \u54805  (\u49453 \u51077 \u45824 )', correct: ['\u45824 \u47449 -\u54644 \u50577  \u49688 \u47156 '] \},\
    \{ q: '\uc0\u47560 \u47532 \u50500 \u45208  \u54644 \u44396 ', a: '\u54644 \u50577 -\u54644 \u50577  \u49688 \u47156 \u54805  (\u49453 \u51077 \u45824 )', correct: ['\u54644 \u50577 -\u54644 \u50577  \u49688 \u47156 '] \},\
    \{ q: '\uc0\u51068 \u48376  \u54644 \u44396 ', a: '\u54644 \u50577 -\u54644 \u50577  \u49688 \u47156 \u54805  (\u49453 \u51077 \u45824 )', correct: ['\u54644 \u50577 -\u54644 \u50577  \u49688 \u47156 '] \},\
    \{ q: '\uc0\u54168 \u47336 -\u52832 \u47112  \u54644 \u44396 ', a: '\u45824 \u47449 -\u54644 \u50577  \u49688 \u47156 \u54805  (\u49453 \u51077 \u45824 )', correct: ['\u45824 \u47449 -\u54644 \u50577  \u49688 \u47156 '] \},\
    \{ q: '\uc0\u49328 \u50504 \u46300 \u47112 \u50500 \u49828  \u45800 \u52789 ', a: '\u48372 \u51316 \u54805  \u44221 \u44228  (\u48320 \u54872  \u45800 \u52789 )', correct: ['\u48372 \u51316 \u54805  \u44221 \u44228 '] \},\
    \{ q: '\uc0\u45824 \u49436 \u50577  \u51473 \u50521  \u54644 \u47161 ', a: '\u54644 \u50577 -\u54644 \u50577  \u48156 \u49328 \u54805 ', correct: ['\u54644 \u50577 -\u54644 \u50577  \u48156 \u49328 '] \},\
    \{ q: '\uc0\u46041 \u53468 \u54217 \u50577  \u54644 \u47161 ', a: '\u54644 \u50577 -\u54644 \u50577  \u48156 \u49328 \u54805 ', correct: ['\u54644 \u50577 -\u54644 \u50577  \u48156 \u49328 '] \},\
    \{ q: '\uc0\u46041 \u50500 \u54532 \u47532 \u52852  \u50676 \u44257 \u45824 ', a: '\u45824 \u47449 -\u45824 \u47449  \u48156 \u49328 \u54805 ', correct: ['\u45824 \u47449 -\u45824 \u47449  \u48156 \u49328 '] \},\
    \{ q: '\uc0\u50500 \u51060 \u49836 \u46976 \u46300  \u50676 \u44257 \u45824 ', a: '\u54644 \u50577 -\u54644 \u50577  \u48156 \u49328 \u54805  (\u50977 \u51648 \u51032  \u54644 \u47161 )', correct: ['\u54644 \u50577 -\u54644 \u50577  \u48156 \u49328 '] \},\
    \{ q: '\uc0\u50508 \u47448 \u49328  \u50676 \u46020 ', a: '\u54644 \u50577 -\u54644 \u50577  \u49688 \u47156 \u54805  (\u49453 \u51077 \u45824 )', correct: ['\u54644 \u50577 -\u54644 \u50577  \u49688 \u47156 '] \},\
  ];\
  const commonLandformOptions = ['\uc0\u54644 \u47161 ', '\u50676 \u44257 ', '\u50676 \u44257 \u45824 ', '\u54644 \u44396 ', '\u54840 \u49345  \u50676 \u46020 ', '\u49845 \u44257  \u49328 \u47589 ', '\u48320 \u54872  \u45800 \u52789 '];\
  const landformData = [\
    \{ q: '\uc0\u54644 \u50577 \u54032 -\u54644 \u50577 \u54032  \u48156 \u49328 \u54805  \u44221 \u44228 ', a: '\u54644 \u47161 , \u50676 \u44257 ', correct: ['\u54644 \u47161 ', '\u50676 \u44257 '] \},\
    \{ q: '\uc0\u45824 \u47449 \u54032 -\u45824 \u47449 \u54032  \u48156 \u49328 \u54805  \u44221 \u44228 ', a: '\u50676 \u44257 \u45824 ', correct: ['\u50676 \u44257 \u45824 '] \},\
    \{ q: '\uc0\u54644 \u50577 \u54032 -\u45824 \u47449 \u54032  \u49688 \u47156 \u54805  \u44221 \u44228 ', a: '\u54644 \u44396 , \u49845 \u44257  \u49328 \u47589 , \u54840 \u49345  \u50676 \u46020 (\u9651  \u54617 \u44368 \u49688 \u50629  \u52280 \u44256 )', correct: ['\u54644 \u44396 ', '\u49845 \u44257  \u49328 \u47589 ', '\u54840 \u49345  \u50676 \u46020 '] \},\
    \{ q: '\uc0\u54644 \u50577 \u54032 -\u54644 \u50577 \u54032  \u49688 \u47156 \u54805  \u44221 \u44228 ', a: '\u54644 \u44396 , \u54840 \u49345  \u50676 \u46020 ', correct: ['\u54644 \u44396 ', '\u54840 \u49345  \u50676 \u46020 '] \},\
    \{ q: '\uc0\u45824 \u47449 \u54032 -\u45824 \u47449 \u54032  \u49688 \u47156 \u54805  \u44221 \u44228 ', a: '\u49845 \u44257  \u49328 \u47589 ', correct: ['\u49845 \u44257  \u49328 \u47589 '] \},\
    \{ q: '\uc0\u48372 \u51316 \u54805  \u44221 \u44228  (\u54032 \u51032  \u50612 \u44555 \u45224 )', a: '\u48320 \u54872  \u45800 \u52789 ', correct: ['\u48320 \u54872  \u45800 \u52789 '] \},\
  ];\
  const nameData = [\
    \{ q: '\uc0\u46041 \u50500 \u54532 \u47532 \u52852 ', a: '\u50676 \u44257 \u45824 ', correct: ['\u50676 \u44257 \u45824 '] \}, \{ q: '\u47560 \u47532 \u50500 \u45208 ', a: '\u54644 \u44396 ', correct: ['\u54644 \u44396 '] \},\
    \{ q: '\uc0\u46041 \u53468 \u54217 \u50577 ', a: '\u54644 \u47161 ', correct: ['\u54644 \u47161 '] \}, \{ q: '\u45824 \u49436 \u50577  \u51473 \u50521 ', a: '\u54644 \u47161 ', correct: ['\u54644 \u47161 '] \},\
    \{ q: '\uc0\u49328 \u50504 \u46300 \u47112 \u50500 \u49828 ', a: '\u48320 \u54872  \u45800 \u52789 ', correct: ['\u48320 \u54872  \u45800 \u52789 '] \}, \{ q: '\u55176 \u47568 \u46972 \u50556 ', a: '\u49845 \u44257  \u49328 \u47589 ', correct: ['\u49845 \u44257  \u49328 \u47589 '] \},\
    \{ q: '\uc0\u50504 \u45936 \u49828 ', a: '\u49845 \u44257  \u49328 \u47589 ', correct: ['\u49845 \u44257  \u49328 \u47589 '] \}, \{ q: '\u51068 \u48376 ', a: '\u54644 \u44396 ', correct: ['\u54644 \u44396 '] \},\
  ];\
  const featureOptionsOX = ['O', 'X'];\
  const featureOptionsDepth = ['\uc0\u52380 \u48156 ', '\u52380 \u48156 ~\u51473 \u48156 ', '\u52380 \u48156 ~\u49900 \u48156 '];\
  const featureData = [\
    \{ q: '\uc0\u54644 \u47161 \u50640 \u49436 \u51032  \u54868 \u49328  \u54876 \u46041  \u50976 \u47924 ?', a: 'O (\u51080 \u51020 )', correct: ['O'], options: featureOptionsOX \},\
    \{ q: '\uc0\u48320 \u54872  \u45800 \u52789 \u50640 \u49436 \u51032  \u54868 \u49328  \u54876 \u46041  \u50976 \u47924 ?', a: 'X (\u50630 \u51020 )', correct: ['X'], options: featureOptionsOX \},\
    \{ q: '\uc0\u55176 \u47568 \u46972 \u50556  \u49328 \u47589 (\u52649 \u46028 \u45824 )\u50640 \u49436 \u51032  \u54868 \u49328  \u54876 \u46041  \u50976 \u47924 ?', a: 'X (\u50630 \u51020 )', correct: ['X'], options: featureOptionsOX \},\
    \{ q: '\uc0\u50504 \u45936 \u49828  \u49328 \u47589 (\u49453 \u51077 \u45824 )\u50640 \u49436 \u51032  \u54868 \u49328  \u54876 \u46041  \u50976 \u47924 ?', a: 'O (\u51080 \u51020 )', correct: ['O'], options: featureOptionsOX \},\
    \{ q: '\uc0\u54644 \u47161 \u50640 \u49436  \u48156 \u49373 \u54616 \u45716  \u51648 \u51652 \u51032  \u44618 \u51060 \u45716 ?', a: '\u52380 \u48156  \u51648 \u51652 ', correct: ['\u52380 \u48156 '], options: featureOptionsDepth \},\
    \{ q: '\uc0\u48320 \u54872  \u45800 \u52789 \u50640 \u49436  \u48156 \u49373 \u54616 \u45716  \u51648 \u51652 \u51032  \u44618 \u51060 \u45716 ?', a: '\u52380 \u48156  \u51648 \u51652 ', correct: ['\u52380 \u48156 '], options: featureOptionsDepth \},\
    \{ q: '\uc0\u54644 \u44396 (\u49453 \u51077 \u45824 )\u50640 \u49436  \u48156 \u49373 \u54616 \u45716  \u51648 \u51652 \u51032  \u44618 \u51060 \u45716 ?', a: '\u52380 \u48156 ~\u49900 \u48156  \u51648 \u51652  (\u47784 \u46160  \u48156 \u49373 )', correct: ['\u52380 \u48156 ~\u49900 \u48156 '], options: featureOptionsDepth \},\
    \{ q: '\uc0\u55176 \u47568 \u46972 \u50556  \u49328 \u47589 (\u52649 \u46028 \u45824 )\u50640 \u49436  \u48156 \u49373 \u54616 \u45716  \u51648 \u51652 \u51032  \u44618 \u51060 \u45716 ?', a: '\u52380 \u48156 ~\u51473 \u48156  \u51648 \u51652 ', correct: ['\u52380 \u48156 ~\u51473 \u48156 '], options: featureOptionsDepth \},\
  ];\
  const convergenceOptions = ['\uc0\u49453 \u51077 \u54805 ', '\u52649 \u46028 \u54805 '];\
  const convergenceData = [\
    \{ q: '\uc0\u55176 \u47568 \u46972 \u50556  \u49328 \u47589 \u51008  \u49453 \u51077 \u54805 \u51064 \u44032  \u52649 \u46028 \u54805 \u51064 \u44032 ?', a: '\u52649 \u46028 \u54805  (\u45824 \u47449 -\u45824 \u47449 )', correct: ['\u52649 \u46028 \u54805 '] \},\
    \{ q: '\uc0\u50504 \u45936 \u49828  \u49328 \u47589 \u51008  \u49453 \u51077 \u54805 \u51064 \u44032  \u52649 \u46028 \u54805 \u51064 \u44032 ?', a: '\u49453 \u51077 \u54805  (\u45824 \u47449 -\u54644 \u50577 )', correct: ['\u49453 \u51077 \u54805 '] \},\
    \{ q: '\uc0\u51068 \u48376  \u54644 \u44396 \u45716  \u49453 \u51077 \u54805 \u51064 \u44032  \u52649 \u46028 \u54805 \u51064 \u44032 ?', a: '\u49453 \u51077 \u54805  (\u54644 \u50577 -\u54644 \u50577 )', correct: ['\u49453 \u51077 \u54805 '] \},\
    \{ q: '\uc0\u47560 \u47532 \u50500 \u45208  \u54644 \u44396 \u45716  \u49453 \u51077 \u54805 \u51064 \u44032  \u52649 \u46028 \u54805 \u51064 \u44032 ?', a: '\u49453 \u51077 \u54805  (\u54644 \u50577 -\u54644 \u50577 )', correct: ['\u49453 \u51077 \u54805 '] \},\
    \{ q: '\uc0\u50508 \u54532 \u49828  \u49328 \u47589 \u51008  \u49453 \u51077 \u54805 \u51064 \u44032  \u52649 \u46028 \u54805 \u51064 \u44032 ?', a: '\u52649 \u46028 \u54805  (\u45824 \u47449 -\u45824 \u47449 )', correct: ['\u52649 \u46028 \u54805 '] \},\
    \{ q: '\uc0\u54168 \u47336 -\u52832 \u47112  \u54644 \u44396 \u45716  \u49453 \u51077 \u54805 \u51064 \u44032  \u52649 \u46028 \u54805 \u51064 \u44032 ?', a: '\u49453 \u51077 \u54805  (\u45824 \u47449 -\u54644 \u50577 )', correct: ['\u49453 \u51077 \u54805 '] \},\
  ];\
\
  const getRandomOptions = (correctAnswers, allOptions, maxCount = 4) => \{\
    let options = [...correctAnswers];\
    const distractors = allOptions.filter(opt => !correctAnswers.includes(opt));\
    distractors.sort(() => 0.5 - Math.random());\
    const needed = maxCount - options.length;\
    if (needed > 0) options = options.concat(distractors.slice(0, needed));\
    return options.sort(() => 0.5 - Math.random());\
  \};\
\
  const [gameState, setGameState] = useState('start');\
  const [cards, setCards] = useState([]);\
  const [currentIndex, setCurrentIndex] = useState(0);\
  const [isFlipped, setIsFlipped] = useState(false);\
  const [isPaused, setIsPaused] = useState(false);\
  const [isTransitioning, setIsTransitioning] = useState(false);\
  const [selectedOptions, setSelectedOptions] = useState([]);\
  const [quizResult, setQuizResult] = useState(null);\
  const [targetCount, setTargetCount] = useState(20);\
  const [isCustomMode, setIsCustomMode] = useState(false);\
  const [customInput, setCustomInput] = useState('');\
  const [selectedCategories, setSelectedCategories] = useState(['A', 'B', 'C', 'D', 'E']);\
  const [isReviewMode, setIsReviewMode] = useState(false);\
  const [wrongCards, setWrongCards] = useState([]);\
\
  const generateQuestions = useCallback((count, categories) => \{\
    let pool = [];\
    const id = () => Math.random().toString(36).substr(2, 9);\
    if (categories.includes('A')) boundaryData.forEach(i => pool.push(\{ id: id(), type: '\uc0\u44221 \u44228  \u52286 \u44592 ', q: i.q, a: i.a, correct: i.correct, options: getRandomOptions(i.correct, boundaryOptions, 4), color: 'bg-indigo-100 text-indigo-800', icon: <Map size=\{24\}/> \}));\
    if (categories.includes('B')) landformData.forEach(i => pool.push(\{ id: id(), type: '\uc0\u51648 \u54805  \u52286 \u44592 ', q: i.q, a: i.a, correct: i.correct, options: getRandomOptions(i.correct, commonLandformOptions, 4), color: 'bg-emerald-100 text-emerald-800', icon: <Mountain size=\{24\}/> \}));\
    if (categories.includes('C')) nameData.forEach(i => pool.push(\{ id: id(), type: '\uc0\u51060 \u47492  \u50756 \u49457 ', q: i.q, a: i.a, correct: i.correct, options: getRandomOptions(i.correct, commonLandformOptions, 3), color: 'bg-amber-100 text-amber-800', icon: <Edit3 size=\{24\}/> \}));\
    if (categories.includes('D')) featureData.forEach(i => pool.push(\{ id: id(), type: '\uc0\u51648 \u44033  \u48320 \u46041 ', q: i.q, a: i.a, correct: i.correct, options: i.options, color: 'bg-rose-100 text-rose-800', icon: <Activity size=\{24\}/> \}));\
    if (categories.includes('E')) convergenceData.forEach(i => pool.push(\{ id: id(), type: '\uc0\u49453 \u51077  vs \u52649 \u46028 ', q: i.q, a: i.a, correct: i.correct, options: convergenceOptions, color: 'bg-cyan-100 text-cyan-800', icon: <Split size=\{24\}/> \}));\
    if (pool.length === 0) return [];\
    const shuffled = pool.sort(() => 0.5 - Math.random());\
    let selected = [];\
    while (selected.length < count) \{\
        if (shuffled.length >= count) \{ selected = shuffled.slice(0, count); break; \}\
        selected = selected.concat(shuffled);\
    \}\
    return selected.slice(0, count);\
  \}, []);\
\
  const handleStart = () => \{\
    if (selectedCategories.length === 0) return alert('\uc0\u50976 \u54805  \u49440 \u53469  \u54596 \u50836 ');\
    let cnt = targetCount;\
    if (isCustomMode) cnt = parseInt(customInput, 10);\
    const newCards = generateQuestions(cnt, selectedCategories);\
    setCards(newCards);\
    setWrongCards([]);\
    setCurrentIndex(0);\
    setIsFlipped(false);\
    setIsPaused(false);\
    setSelectedOptions([]);\
    setQuizResult(null);\
    setGameState('playing');\
  \};\
\
  const handleRetry = () => \{\
    const pool = [...wrongCards];\
    const target = Math.ceil(pool.length * 1.5);\
    let retry = [...pool];\
    while (retry.length < target) retry.push(\{ ...pool[Math.floor(Math.random() * pool.length)], id: Math.random().toString() \});\
    retry.sort(() => 0.5 - Math.random());\
    setCards(retry);\
    setWrongCards([]);\
    setCurrentIndex(0);\
    setIsFlipped(false);\
    setIsPaused(false);\
    setSelectedOptions([]);\
    setQuizResult(null);\
    setGameState('playing');\
  \};\
\
  const nextCard = () => \{\
    if (currentIndex < cards.length - 1) \{\
      setIsTransitioning(true);\
      setIsFlipped(false);\
      setTimeout(() => \{\
        setCurrentIndex(p => p + 1);\
        setSelectedOptions([]);\
        setQuizResult(null);\
        setIsTransitioning(false);\
      \}, 300);\
    \} else \{\
      setGameState('finished');\
    \}\
  \};\
\
  const toggleOption = (opt) => \{\
    if (isFlipped) return;\
    setSelectedOptions(prev => \{\
      const card = cards[currentIndex];\
      if (card.type === '\uc0\u51648 \u54805  \u52286 \u44592 ') return prev.includes(opt) ? prev.filter(o => o !== opt) : [...prev, opt];\
      else return prev.includes(opt) ? [] : [opt];\
    \});\
  \};\
\
  const checkAnswer = () => \{\
    const card = cards[currentIndex];\
    const isCorrect = selectedOptions.length === card.correct.length && selectedOptions.every(o => card.correct.includes(o));\
    setQuizResult(isCorrect ? 'correct' : 'wrong');\
    setIsFlipped(true);\
    if (isReviewMode && !isCorrect) setWrongCards(p => \{ if (p.some(c => c.id === card.id)) return p; return [...p, card]; \});\
  \};\
\
  const formatAnswer = (text) => \{\
    const parts = text.split('(');\
    if (parts.length > 1) \{\
        return <><span className="block">\{parts[0].trim()\}</span><span className="block text-xl font-light opacity-70 mt-2">(\{parts.slice(1).join('(')\}</span></>;\
    \}\
    return text;\
  \};\
\
  if (gameState === 'start') \{\
    return (\
      <div className="flex flex-col items-center justify-center h-full p-6 bg-stone-50 overflow-y-auto">\
        <div className="bg-white p-6 rounded-3xl shadow-xl max-w-md w-full border border-stone-200">\
          <div className="flex justify-between items-center mb-4">\
             <button onClick=\{onGoHome\} className="p-2 bg-stone-100 rounded-lg hover:bg-stone-200 text-stone-600"><ArrowLeft size=\{20\}/></button>\
             <div className="bg-teal-600 p-3 rounded-full text-white shadow-lg"><Mountain size=\{32\}/></div>\
             <div className="w-10"></div>\
          </div>\
          <h1 className="text-2xl font-black text-stone-800 mb-6 text-center">\uc0\u54032 \u51032  \u44221 \u44228  \u47560 \u49828 \u53552 </h1>\
          <div className="space-y-4 mb-6">\
             <div className="bg-red-50 p-4 rounded-2xl border border-red-100 flex justify-between items-center cursor-pointer" onClick=\{() => setIsReviewMode(!isReviewMode)\}>\
                <div className="flex items-center gap-2 text-red-700 font-bold text-sm"><XCircle size=\{18\}/><span>\uc0\u50724 \u45813 \u45432 \u53944  \u47784 \u46300 </span></div>\
                <div className=\{`w-10 h-5 rounded-full p-0.5 transition-colors $\{isReviewMode ? 'bg-red-500' : 'bg-stone-300'\}`\}><div className=\{`bg-white w-4 h-4 rounded-full shadow transition-transform $\{isReviewMode ? 'translate-x-5' : ''\}`\}/></div>\
             </div>\
             <div className="bg-stone-50 p-4 rounded-2xl border border-stone-100">\
               <div className="flex items-center gap-2 mb-2 text-stone-700 font-bold text-sm"><Settings2 size=\{16\}/><span>\uc0\u47928 \u54637  \u49688 </span></div>\
               <div className="grid grid-cols-3 gap-2">\
                 \{[10, 15, 20, 25, 30, 40].map(c => <button key=\{c\} onClick=\{() => \{ setTargetCount(c); setIsCustomMode(false); \}\} className=\{`py-2 rounded-lg text-xs font-bold border $\{!isCustomMode && targetCount === c ? 'bg-teal-600 text-white' : 'bg-white text-stone-600'\}`\}>\{c\}</button>)\}\
               </div>\
               <button onClick=\{() => setIsCustomMode(true)\} className=\{`w-full mt-2 py-2 rounded-lg text-xs font-bold border flex justify-center gap-1 $\{isCustomMode ? 'bg-teal-600 text-white' : 'bg-white'\}`\}><Edit3 size=\{12\}/> \uc0\u51649 \u51217  \u51077 \u47141 </button>\
               \{isCustomMode && <input type="number" value=\{customInput\} onChange=\{e => setCustomInput(e.target.value)\} className="mt-2 w-full px-3 py-2 text-sm rounded-lg border-2 border-teal-200 text-center font-bold" placeholder="1~100"/>\}\
             </div>\
             <div className="bg-stone-50 p-4 rounded-2xl border border-stone-100">\
               <div className="flex items-center gap-2 mb-2 text-stone-700 font-bold text-sm"><CheckSquare size=\{16\}/><span>\uc0\u50976 \u54805  (\u47004 \u45924 )</span></div>\
               <div className="space-y-2">\
                 \{[\{ id: 'A', label: '\uc0\u44221 \u44228  \u52286 \u44592 ', icon: <Map size=\{18\}/> \}, \{ id: 'B', label: '\u51648 \u54805  \u52286 \u44592 ', icon: <MousePointerClick size=\{18\}/> \}, \{ id: 'C', label: '\u51060 \u47492  \u50756 \u49457 ', icon: <Edit3 size=\{18\}/> \}, \{ id: 'D', label: '\u51648 \u44033  \u48320 \u46041 ', icon: <Activity size=\{18\}/> \}, \{ id: 'E', label: '\u49453 \u51077  vs \u52649 \u46028 ', icon: <Split size=\{18\}/> \}].map(c => (\
                   <button key=\{c.id\} onClick=\{() => setSelectedCategories(p => p.includes(c.id) ? p.filter(x => x !== c.id) : [...p, c.id])\} className=\{`w-full flex justify-between items-center p-3 rounded-xl border-2 $\{selectedCategories.includes(c.id) ? 'bg-teal-50 border-teal-200 text-teal-700' : 'bg-white border-stone-100 text-stone-400'\}`\}>\
                     <div className="flex items-center gap-3">\{c.icon\}<span className="font-bold text-sm">\{c.label\}</span></div>\
                     \{selectedCategories.includes(c.id) ? <CheckCircle2 size=\{18\}/> : <div className="w-5 h-5 rounded-full border-2 border-stone-200"/>\}\
                   </button>\
                 ))\}\
               </div>\
             </div>\
          </div>\
          <button onClick=\{handleStart\} className="w-full bg-stone-800 text-white text-lg font-bold py-4 rounded-xl shadow-lg flex justify-center gap-2 hover:bg-stone-900"><Play size=\{20\}/> \uc0\u49884 \u51089 \u54616 \u44592 </button>\
        </div>\
      </div>\
    );\
  \}\
\
  if (gameState === 'finished') \{\
    const wrongCnt = wrongCards.length;\
    const accuracy = Math.round(((cards.length - wrongCnt) / cards.length) * 100);\
    const retryCnt = Math.ceil(wrongCnt * 1.5);\
    return (\
      <div className="flex flex-col items-center justify-center h-full p-6 bg-stone-50 overflow-y-auto">\
        <div className="bg-white p-8 rounded-3xl shadow-xl max-w-md w-full border border-stone-200 text-center">\
          <div className="flex justify-center mb-6">\
            \{isReviewMode ? <div className="w-24 h-24 rounded-full border-8 border-stone-100 flex items-center justify-center"><div className="text-center"><span className=\{`block text-3xl font-black $\{accuracy >= 80 ? 'text-teal-500' : 'text-red-500'\}`\}>\{accuracy\}%</span></div></div> : <CheckCircle2 size=\{64\} className="text-teal-500"/>\}\
          </div>\
          <h2 className="text-2xl font-bold text-stone-800 mb-2">\uc0\u54617 \u49845  \u50756 \u47308 !</h2>\
          \{isReviewMode && wrongCnt > 0 && (\
             <div className="mb-6 bg-rose-50 p-4 rounded-xl border border-rose-100 text-left max-h-48 overflow-y-auto">\
                <div className="font-bold text-rose-800 text-sm mb-2">\uc0\u53952 \u47536  \u47928 \u51228  (\{wrongCnt\})</div>\
                <div className="space-y-2">\{Array.from(new Set(wrongCards.map(c => c.q))).map((q, i) => \{ const card = wrongCards.find(c => c.q === q); return <div key=\{i\} className="bg-white p-2 rounded border border-rose-100 text-xs"><div className="font-bold text-stone-500">Q. \{card.q\}</div><div className="text-rose-600 font-bold">A. \{card.a\}</div></div>; \})\}</div>\
             </div>\
          )\}\
          <div className="space-y-2">\
            \{isReviewMode && wrongCnt > 0 && <button onClick=\{handleRetry\} className="w-full bg-rose-500 text-white font-bold py-3 rounded-xl flex justify-center gap-2"><RefreshCw size=\{20\}/> \uc0\u50724 \u45813  \u51116 \u46020 \u51204  (1.5\u48176 )</button>\}\
            <button onClick=\{() => setGameState('start')\} className="w-full bg-stone-800 text-white font-bold py-3 rounded-xl flex justify-center gap-2"><RotateCcw size=\{20\}/> \uc0\u45796 \u49884  \u54616 \u44592 </button>\
            <button onClick=\{onGoHome\} className="w-full bg-stone-100 text-stone-600 font-bold py-3 rounded-xl flex justify-center gap-2"><Home size=\{20\}/> \uc0\u54856 \u51004 \u47196 </button>\
          </div>\
        </div>\
      </div>\
    );\
  \}\
\
  const currentCard = cards[currentIndex];\
  const isQuiz = true;\
\
  return (\
    <div className="flex flex-col h-full bg-stone-50 font-sans">\
      <div className="bg-white px-4 py-3 shadow-sm flex justify-between items-center z-10">\
        <div className="flex items-center gap-2 cursor-pointer" onClick=\{() => setGameState('start')\}><Mountain className="text-teal-600" size=\{24\}/><span className="font-bold text-stone-800 hidden sm:block">\uc0\u54032 \u51032  \u44221 \u44228  \u47560 \u49828 \u53552 </span></div>\
        <div className="flex items-center gap-2">\
          \{isReviewMode && <div className="px-2 py-1 bg-red-100 text-red-600 rounded text-xs font-bold flex gap-1"><AlertCircle size=\{12\}/> <span className="hidden sm:inline">\uc0\u50724 \u45813 \u45432 \u53944 </span></div>\}\
          <span className="bg-stone-100 px-2 py-1 rounded text-stone-600 font-mono font-bold text-xs">\{currentIndex + 1\}/\{cards.length\}</span>\
          <button onClick=\{onGoHome\} className="p-2 bg-stone-100 rounded text-stone-600"><Home size=\{18\}/></button>\
          <button onClick=\{() => setIsPaused(!isPaused)\} className="p-2 bg-stone-100 rounded text-stone-600">\{isPaused ? <Play size=\{18\}/> : <Pause size=\{18\}/>\}</button>\
        </div>\
      </div>\
      <div className="w-full h-1.5 bg-stone-200"><div className="h-full bg-teal-600 transition-all duration-300" style=\{\{ width: `$\{((currentIndex + 1) / cards.length) * 100\}%` \}\}></div></div>\
      \
      <div className="flex-1 flex flex-col items-center justify-center p-6 relative">\
        \{isPaused && <div className="absolute inset-0 bg-stone-50/80 z-20 flex items-center justify-center"><div className="bg-white p-6 rounded-xl shadow-lg border border-stone-200 text-center"><p className="font-bold">\uc0\u51068 \u49884  \u51221 \u51648 </p></div></div>\}\
        \
        <div className="relative w-full max-w-lg h-auto cursor-pointer group perspective-1000">\
          <div className=\{`relative w-full h-full transition-all duration-500 preserve-3d $\{isFlipped ? '[transform:rotateY(180deg)]' : ''\}`\}>\
            \{/* Front */\}\
            <div className="backface-hidden rounded-3xl shadow-lg bg-white border-2 border-stone-100 p-6 flex flex-col relative min-h-[400px]">\
               <div className=\{`absolute top-6 left-6 px-3 py-1 rounded-full text-xs font-bold flex items-center gap-2 $\{currentCard.color\}`\}>\{currentCard.icon\}\{currentCard.type\}</div>\
               <div className="flex-1 flex items-center justify-center w-full px-4 mt-12 mb-4">\
                 <h3 className="font-black text-stone-800 text-center text-2xl md:text-3xl break-keep">\
                    \{currentCard.type === '\uc0\u51060 \u47492  \u50756 \u49457 ' ? <span className="flex flex-wrap items-center justify-center gap-2">\{currentCard.q\}<span className="w-16 h-10 border-2 border-stone-300 rounded bg-stone-100 shadow-inner"/></span> : currentCard.q\}\
                 </h3>\
               </div>\
               <div className="w-full flex flex-col gap-2 pb-2">\
                 <p className="text-stone-400 text-xs font-medium text-center mb-1">\{currentCard.type === '\uc0\u51648 \u54805  \u52286 \u44592 ' ? "\u54644 \u45817 \u46104 \u45716  \u51648 \u54805 \u51012  \u47784 \u46160  \u44256 \u47476 \u49464 \u50836 " : "\u50508 \u47582 \u51008  \u45813 \u51012  \u49440 \u53469 \u54616 \u49464 \u50836 "\}</p>\
                 <div className="grid grid-cols-2 gap-2">\
                   \{currentCard.options.map(opt => (\
                     <button key=\{opt\} onClick=\{(e) => \{ e.stopPropagation(); toggleOption(opt); \}\} className=\{`py-3 px-2 rounded-xl text-sm font-bold border-2 transition-all $\{selectedOptions.includes(opt) ? 'bg-teal-600 text-white border-teal-600 shadow' : 'bg-stone-50 text-stone-600 border-stone-200'\}`\}>\{opt\}</button>\
                   ))\}\
                 </div>\
                 <button onClick=\{(e) => \{ e.stopPropagation(); checkAnswer(); \}\} disabled=\{selectedOptions.length === 0\} className=\{`w-full py-4 mt-2 rounded-xl text-lg font-black shadow-lg flex justify-center gap-2 $\{selectedOptions.length > 0 ? 'bg-stone-800 text-white hover:bg-stone-900' : 'bg-stone-200 text-stone-400'\}`\}>\uc0\u51221 \u45813  \u54869 \u51064 \u54616 \u44592 </button>\
               </div>\
            </div>\
            \{/* Back */\}\
            <div className="absolute inset-0 backface-hidden rounded-3xl shadow-lg flex flex-col items-center p-6 bg-teal-700 text-white [transform:rotateY(180deg)]">\
               <div className="w-full flex justify-between items-start mb-4">\
                 <div className="px-3 py-1 rounded-full text-xs font-bold bg-white/20">Answer</div>\
                 <button onClick=\{(e) => \{ e.stopPropagation(); setIsFlipped(false); \}\} className="px-3 py-1 bg-white/20 hover:bg-white/30 rounded-full text-xs font-bold flex items-center gap-1"><RotateCcw size=\{14\}/> \uc0\u46028 \u50500 \u44032 \u44592 </button>\
               </div>\
               <div className="flex-1 flex flex-col items-center justify-center w-full">\
                 \{quizResult && (\
                   <div className="mb-4 flex flex-col items-center animate-in zoom-in">\
                     <div className=\{`p-3 rounded-full mb-2 $\{quizResult === 'correct' ? 'bg-white/20' : 'bg-rose-500'\}`\}>\{quizResult === 'correct' ? <Check size=\{40\}/> : <X size=\{40\}/>\}</div>\
                     <span className="font-bold text-lg">\{quizResult === 'correct' ? '\uc0\u51221 \u45813 \u51077 \u45768 \u45796 !' : '\u50500 \u49789 \u45348 \u50836 !'\}</span>\
                   </div>\
                 )\}\
                 <h3 className="text-3xl md:text-4xl font-black text-center break-keep">\{formatAnswer(currentCard.a)\}</h3>\
               </div>\
               <div onClick=\{(e) => \{ e.stopPropagation(); nextCard(); \}\} className="mt-4 flex items-center gap-2 bg-white/10 px-6 py-3 rounded-full cursor-pointer hover:bg-white/20"><Hand size=\{20\}/><span className="text-sm font-bold">\uc0\u53552 \u52824 \u54616 \u50668  \u45796 \u51020  \u47928 \u51228 \u47196 </span></div>\
            </div>\
          </div>\
        </div>\
      </div>\
      <style>\{`.perspective-1000 \{ perspective: 1000px; \} .preserve-3d \{ transform-style: preserve-3d; \} .backface-hidden \{ backface-visibility: hidden; \}`\}</style>\
    </div>\
  );\
\};\
\
// =================================================================================================\
// [APP 3] \uc0\u47932 \u51656 \u51032  \u48516 \u47448  \u47560 \u49828 \u53552  (SubstanceFlashcards)\
// =================================================================================================\
const SubstanceFlashcards = (\{ onGoHome \}) => \{\
  // Elements: \uc0\u49688 \u49548 , \u54764 \u47464 , \u44396 \u47532 , \u44552 , \u52384 , \u45796 \u51060 \u50500 \u47788 \u46300 , \u50724 \u51316 , \u51656 \u49548 \
  // Compounds: \uc0\u47932 , \u51060 \u49328 \u54868 \u53444 \u49548 , \u47700 \u53580 \u51064 , \u50516 \u47784 \u45768 \u50500 , \u50684 \u54868 \u45208 \u53944 \u47464 , \u54252 \u46020 \u45817 , \u49328 \u54868 \u52384 , \u50640 \u53444 \u50732 \
  const data = [\
    \{ q: '\uc0\u49688 \u49548  (H\u8322 )', a: '\u50896 \u49548 ', desc: '\u54620  \u44032 \u51648  \u50896 \u49548 (H)\u47196 \u47564  \u51060 \u47336 \u50612 \u51652  \u47932 \u51656 ' \},\
    \{ q: '\uc0\u54764 \u47464  (He)', a: '\u50896 \u49548 ', desc: '\u54620  \u44032 \u51648  \u50896 \u49548 (He)\u47196 \u47564  \u51060 \u47336 \u50612 \u51652  \u47932 \u51656 ' \},\
    \{ q: '\uc0\u44396 \u47532  (Cu)', a: '\u50896 \u49548 ', desc: '\u54620  \u44032 \u51648  \u50896 \u49548 (Cu)\u47196 \u47564  \u51060 \u47336 \u50612 \u51652  \u47932 \u51656 ' \},\
    \{ q: '\uc0\u44552  (Au)', a: '\u50896 \u49548 ', desc: '\u54620  \u44032 \u51648  \u50896 \u49548 (Au)\u47196 \u47564  \u51060 \u47336 \u50612 \u51652  \u47932 \u51656 ' \},\
    \{ q: '\uc0\u52384  (Fe)', a: '\u50896 \u49548 ', desc: '\u54620  \u44032 \u51648  \u50896 \u49548 (Fe)\u47196 \u47564  \u51060 \u47336 \u50612 \u51652  \u47932 \u51656 ' \},\
    \{ q: '\uc0\u45796 \u51060 \u50500 \u47788 \u46300  (C)', a: '\u50896 \u49548 ', desc: '\u54620  \u44032 \u51648  \u50896 \u49548 (C)\u47196 \u47564  \u51060 \u47336 \u50612 \u51652  \u47932 \u51656 ' \},\
    \{ q: '\uc0\u50724 \u51316  (O\u8323 )', a: '\u50896 \u49548 ', desc: '\u54620  \u44032 \u51648  \u50896 \u49548 (O)\u47196 \u47564  \u51060 \u47336 \u50612 \u51652  \u47932 \u51656 ' \},\
    \{ q: '\uc0\u51656 \u49548  (N\u8322 )', a: '\u50896 \u49548 ', desc: '\u54620  \u44032 \u51648  \u50896 \u49548 (N)\u47196 \u47564  \u51060 \u47336 \u50612 \u51652  \u47932 \u51656 ' \},\
    \{ q: '\uc0\u47932  (H\u8322 O)', a: '\u54868 \u54633 \u47932 ', desc: '\u49688 \u49548 (H)\u50752  \u49328 \u49548 (O) \u46160  \u44032 \u51648  \u50896 \u49548 \u47196  \u51060 \u47336 \u50612 \u51664 ' \},\
    \{ q: '\uc0\u51060 \u49328 \u54868 \u53444 \u49548  (CO\u8322 )', a: '\u54868 \u54633 \u47932 ', desc: '\u53444 \u49548 (C)\u50752  \u49328 \u49548 (O) \u46160  \u44032 \u51648  \u50896 \u49548 \u47196  \u51060 \u47336 \u50612 \u51664 ' \},\
    \{ q: '\uc0\u47700 \u53580 \u51064  (CH\u8324 )', a: '\u54868 \u54633 \u47932 ', desc: '\u53444 \u49548 (C)\u50752  \u49688 \u49548 (H) \u46160  \u44032 \u51648  \u50896 \u49548 \u47196  \u51060 \u47336 \u50612 \u51664 ' \},\
    \{ q: '\uc0\u50516 \u47784 \u45768 \u50500  (NH\u8323 )', a: '\u54868 \u54633 \u47932 ', desc: '\u51656 \u49548 (N)\u50752  \u49688 \u49548 (H) \u46160  \u44032 \u51648  \u50896 \u49548 \u47196  \u51060 \u47336 \u50612 \u51664 ' \},\
    \{ q: '\uc0\u50684 \u54868 \u45208 \u53944 \u47464  (NaCl)', a: '\u54868 \u54633 \u47932 ', desc: '\u45208 \u53944 \u47464 (Na)\u44284  \u50684 \u49548 (Cl) \u46160  \u44032 \u51648  \u50896 \u49548 \u47196  \u51060 \u47336 \u50612 \u51664 ' \},\
    \{ q: '\uc0\u54252 \u46020 \u45817  (C\u8326 H\u8321 \u8322 O\u8326 )', a: '\u54868 \u54633 \u47932 ', desc: '\u53444 \u49548 (C), \u49688 \u49548 (H), \u49328 \u49548 (O) \u49464  \u44032 \u51648  \u50896 \u49548 \u47196  \u51060 \u47336 \u50612 \u51664 ' \},\
    \{ q: '\uc0\u49328 \u54868 \u52384  (Fe\u8322 O\u8323 )', a: '\u54868 \u54633 \u47932 ', desc: '\u52384 (Fe)\u44284  \u49328 \u49548 (O) \u46160  \u44032 \u51648  \u50896 \u49548 \u47196  \u51060 \u47336 \u50612 \u51664 ' \},\
    \{ q: '\uc0\u50640 \u53444 \u50732  (C\u8322 H\u8325 OH)', a: '\u54868 \u54633 \u47932 ', desc: '\u53444 \u49548 (C), \u49688 \u49548 (H), \u49328 \u49548 (O) \u49464  \u44032 \u51648  \u50896 \u49548 \u47196  \u51060 \u47336 \u50612 \u51664 ' \},\
  ];\
\
  const [gameState, setGameState] = useState('start');\
  const [cards, setCards] = useState([]);\
  const [currentIndex, setCurrentIndex] = useState(0);\
  const [isFlipped, setIsFlipped] = useState(false);\
  const [isPaused, setIsPaused] = useState(false);\
  const [isTransitioning, setIsTransitioning] = useState(false);\
  const [selectedOption, setSelectedOption] = useState(null);\
  const [quizResult, setQuizResult] = useState(null);\
  const [targetCount, setTargetCount] = useState(10);\
  const [isCustomMode, setIsCustomMode] = useState(false);\
  const [customInput, setCustomInput] = useState('');\
  const [isReviewMode, setIsReviewMode] = useState(false);\
  const [wrongCards, setWrongCards] = useState([]);\
\
  const generateQuestions = (count) => \{\
    let pool = data.map(item => (\{ ...item, id: Math.random().toString(36).substr(2, 9) \}));\
    const shuffled = pool.sort(() => 0.5 - Math.random());\
    let selected = [];\
    while (selected.length < count) \{\
        if (shuffled.length >= count) \{ selected = shuffled.slice(0, count); break; \}\
        selected = selected.concat(shuffled);\
    \}\
    return selected.slice(0, count);\
  \};\
\
  const handleStart = () => \{\
    let cnt = targetCount;\
    if (isCustomMode) cnt = parseInt(customInput, 10);\
    const newCards = generateQuestions(cnt);\
    setCards(newCards);\
    setWrongCards([]);\
    setCurrentIndex(0);\
    setIsFlipped(false);\
    setIsPaused(false);\
    setSelectedOption(null);\
    setQuizResult(null);\
    setGameState('playing');\
  \};\
\
  const handleRetry = () => \{\
    const pool = [...wrongCards];\
    const target = Math.ceil(pool.length * 1.5);\
    let retry = [...pool];\
    while (retry.length < target) retry.push(\{ ...pool[Math.floor(Math.random() * pool.length)], id: Math.random().toString() \});\
    retry.sort(() => 0.5 - Math.random());\
    setCards(retry);\
    setWrongCards([]);\
    setCurrentIndex(0);\
    setIsFlipped(false);\
    setIsPaused(false);\
    setSelectedOption(null);\
    setQuizResult(null);\
    setGameState('playing');\
  \};\
\
  const nextCard = () => \{\
    if (currentIndex < cards.length - 1) \{\
      setIsTransitioning(true);\
      setIsFlipped(false);\
      setTimeout(() => \{\
        setCurrentIndex(p => p + 1);\
        setSelectedOption(null);\
        setQuizResult(null);\
        setIsTransitioning(false);\
      \}, 300);\
    \} else \{\
      setGameState('finished');\
    \}\
  \};\
\
  const checkAnswer = (answer) => \{\
    if (isFlipped) return;\
    setSelectedOption(answer);\
    const card = cards[currentIndex];\
    const isCorrect = card.a === answer;\
    setQuizResult(isCorrect ? 'correct' : 'wrong');\
    setIsFlipped(true);\
    if (isReviewMode && !isCorrect) setWrongCards(p => \{ if (p.some(c => c.id === card.id)) return p; return [...p, card]; \});\
  \};\
\
  if (gameState === 'start') \{\
    return (\
      <div className="flex flex-col items-center justify-center h-full p-6 bg-amber-50 overflow-y-auto">\
        <div className="bg-white p-6 rounded-3xl shadow-xl max-w-md w-full border border-amber-200">\
          <div className="flex justify-between items-center mb-4">\
             <button onClick=\{onGoHome\} className="p-2 bg-amber-100 rounded-lg hover:bg-amber-200 text-amber-700"><ArrowLeft size=\{20\}/></button>\
             <div className="bg-amber-500 p-3 rounded-full text-white shadow-lg"><Atom size=\{32\}/></div>\
             <div className="w-10"></div>\
          </div>\
          <h1 className="text-2xl font-black text-amber-800 mb-6 text-center">\uc0\u47932 \u51656 \u51032  \u48516 \u47448  \u47560 \u49828 \u53552 </h1>\
          <div className="space-y-4 mb-6">\
             <div className="bg-red-50 p-4 rounded-2xl border border-red-100 flex justify-between items-center cursor-pointer" onClick=\{() => setIsReviewMode(!isReviewMode)\}>\
                <div className="flex items-center gap-2 text-red-700 font-bold text-sm"><XCircle size=\{18\}/><span>\uc0\u50724 \u45813 \u45432 \u53944  \u47784 \u46300 </span></div>\
                <div className=\{`w-10 h-5 rounded-full p-0.5 transition-colors $\{isReviewMode ? 'bg-red-500' : 'bg-slate-300'\}`\}><div className=\{`bg-white w-4 h-4 rounded-full shadow transition-transform $\{isReviewMode ? 'translate-x-5' : ''\}`\}/></div>\
             </div>\
             <div className="bg-amber-50 p-4 rounded-2xl border border-amber-100">\
               <div className="flex items-center gap-2 mb-2 text-amber-800 font-bold text-sm"><Settings2 size=\{16\}/><span>\uc0\u47928 \u54637  \u49688 </span></div>\
               <div className="grid grid-cols-3 gap-2">\
                 \{[10, 15, 20, 25, 30, 40].map(c => <button key=\{c\} onClick=\{() => \{ setTargetCount(c); setIsCustomMode(false); \}\} className=\{`py-2 rounded-lg text-xs font-bold border $\{!isCustomMode && targetCount === c ? 'bg-amber-500 text-white' : 'bg-white text-amber-700'\}`\}>\{c\}</button>)\}\
               </div>\
               <button onClick=\{() => setIsCustomMode(true)\} className=\{`w-full mt-2 py-2 rounded-lg text-xs font-bold border flex justify-center gap-1 $\{isCustomMode ? 'bg-amber-500 text-white' : 'bg-white text-amber-700'\}`\}><Edit3 size=\{12\}/> \uc0\u51649 \u51217  \u51077 \u47141 </button>\
               \{isCustomMode && <input type="number" value=\{customInput\} onChange=\{e => setCustomInput(e.target.value)\} className="mt-2 w-full px-3 py-2 text-sm rounded-lg border-2 border-amber-200 text-center font-bold" placeholder="1~100"/>\}\
             </div>\
          </div>\
          <button onClick=\{handleStart\} className="w-full bg-amber-800 text-white text-lg font-bold py-4 rounded-xl shadow-lg flex justify-center gap-2 hover:bg-amber-900"><Play size=\{20\}/> \uc0\u49884 \u51089 \u54616 \u44592 </button>\
        </div>\
      </div>\
    );\
  \}\
\
  if (gameState === 'finished') \{\
    const wrongCnt = wrongCards.length;\
    const accuracy = Math.round(((cards.length - wrongCnt) / cards.length) * 100);\
    return (\
      <div className="flex flex-col items-center justify-center h-full p-6 bg-amber-50 overflow-y-auto">\
        <div className="bg-white p-8 rounded-3xl shadow-xl max-w-md w-full border border-amber-200 text-center">\
          <div className="flex justify-center mb-6">\
            \{isReviewMode ? <div className="w-24 h-24 rounded-full border-8 border-amber-100 flex items-center justify-center"><div className="text-center"><span className=\{`block text-3xl font-black $\{accuracy >= 80 ? 'text-green-500' : 'text-red-500'\}`\}>\{accuracy\}%</span></div></div> : <CheckCircle2 size=\{64\} className="text-green-500"/>\}\
          </div>\
          <h2 className="text-2xl font-bold text-amber-800 mb-2">\uc0\u54617 \u49845  \u50756 \u47308 !</h2>\
          \{isReviewMode && wrongCnt > 0 && (\
             <div className="mb-6 bg-red-50 p-4 rounded-xl border border-red-100 text-left max-h-48 overflow-y-auto">\
                <div className="font-bold text-red-800 text-sm mb-2">\uc0\u53952 \u47536  \u47928 \u51228  (\{wrongCnt\})</div>\
                <div className="space-y-2">\{Array.from(new Set(wrongCards.map(c => c.q))).map((q, i) => \{ const card = wrongCards.find(c => c.q === q); return <div key=\{i\} className="bg-white p-2 rounded border border-red-100 text-xs"><div className="font-bold text-slate-500">Q. \{card.q\}</div><div className="text-red-600 font-bold">A. \{card.a\}</div></div>; \})\}</div>\
             </div>\
          )\}\
          <div className="space-y-2">\
            \{isReviewMode && wrongCnt > 0 && <button onClick=\{handleRetry\} className="w-full bg-red-500 text-white font-bold py-3 rounded-xl flex justify-center gap-2"><RefreshCw size=\{20\}/> \uc0\u50724 \u45813  \u51116 \u46020 \u51204  (1.5\u48176 )</button>\}\
            <button onClick=\{() => setGameState('start')\} className="w-full bg-amber-800 text-white font-bold py-3 rounded-xl flex justify-center gap-2"><RotateCcw size=\{20\}/> \uc0\u45796 \u49884  \u54616 \u44592 </button>\
            <button onClick=\{onGoHome\} className="w-full bg-amber-100 text-amber-700 font-bold py-3 rounded-xl flex justify-center gap-2"><Home size=\{20\}/> \uc0\u54856 \u51004 \u47196 </button>\
          </div>\
        </div>\
      </div>\
    );\
  \}\
\
  const currentCard = cards[currentIndex];\
  return (\
    <div className="flex flex-col h-full bg-amber-50 font-sans">\
      <div className="bg-white px-4 py-3 shadow-sm flex justify-between items-center z-10">\
        <div className="flex items-center gap-2 cursor-pointer" onClick=\{() => setGameState('start')\}><Atom className="text-amber-600" size=\{24\}/><span className="font-bold text-amber-800 hidden sm:block">\uc0\u47932 \u51656  \u48516 \u47448 </span></div>\
        <div className="flex items-center gap-2">\
          \{isReviewMode && <div className="px-2 py-1 bg-red-100 text-red-600 rounded text-xs font-bold flex gap-1"><AlertCircle size=\{12\}/> <span className="hidden sm:inline">\uc0\u50724 \u45813 \u45432 \u53944 </span></div>\}\
          <span className="bg-amber-100 px-2 py-1 rounded text-amber-700 font-mono font-bold text-xs">\{currentIndex + 1\}/\{cards.length\}</span>\
          <button onClick=\{onGoHome\} className="p-2 bg-amber-100 rounded text-amber-700"><Home size=\{18\}/></button>\
          <button onClick=\{() => setIsPaused(!isPaused)\} className="p-2 bg-amber-100 rounded text-amber-700">\{isPaused ? <Play size=\{18\}/> : <Pause size=\{18\}/>\}</button>\
        </div>\
      </div>\
      <div className="w-full h-1.5 bg-amber-200"><div className="h-full bg-amber-600 transition-all duration-300" style=\{\{ width: `$\{((currentIndex + 1) / cards.length) * 100\}%` \}\}></div></div>\
      \
      <div className="flex-1 flex flex-col items-center justify-center p-6 relative">\
        \{isPaused && <div className="absolute inset-0 bg-slate-50/80 z-20 flex items-center justify-center"><div className="bg-white p-6 rounded-xl shadow-lg border border-slate-200 text-center"><p className="font-bold">\uc0\u51068 \u49884  \u51221 \u51648 </p></div></div>\}\
        \
        <div className="relative w-full max-w-lg min-h-[400px] cursor-pointer group perspective-1000">\
          <div className=\{`relative w-full h-full transition-all duration-500 preserve-3d $\{isFlipped ? '[transform:rotateY(180deg)]' : ''\}`\}>\
            \{/* Front */\}\
            <div className="backface-hidden rounded-3xl shadow-lg bg-white border-2 border-amber-100 p-6 flex flex-col justify-between absolute inset-0">\
               <div className="absolute top-6 left-6 px-3 py-1 rounded-full text-xs font-bold bg-amber-100 text-amber-800">Question</div>\
               <div className="flex-1 flex items-center justify-center"><h3 className="text-3xl font-black text-amber-900 text-center">\{currentCard.q\}</h3></div>\
               <div className="grid grid-cols-2 gap-4">\
                 <button onClick=\{(e) => \{ e.stopPropagation(); checkAnswer('\uc0\u50896 \u49548 '); \}\} className=\{`py-4 rounded-xl font-bold border-2 $\{selectedOption === '\u50896 \u49548 ' ? 'bg-amber-600 text-white border-amber-600' : 'bg-white text-amber-800 border-amber-200 hover:bg-amber-50'\}`\}>\u50896 \u49548 </button>\
                 <button onClick=\{(e) => \{ e.stopPropagation(); checkAnswer('\uc0\u54868 \u54633 \u47932 '); \}\} className=\{`py-4 rounded-xl font-bold border-2 $\{selectedOption === '\u54868 \u54633 \u47932 ' ? 'bg-amber-600 text-white border-amber-600' : 'bg-white text-amber-800 border-amber-200 hover:bg-amber-50'\}`\}>\u54868 \u54633 \u47932 </button>\
               </div>\
            </div>\
            \{/* Back */\}\
            <div className="absolute inset-0 backface-hidden rounded-3xl shadow-lg flex flex-col items-center p-6 bg-amber-700 text-white [transform:rotateY(180deg)]">\
               <div className="w-full flex justify-between items-start mb-4">\
                 <div className="px-3 py-1 rounded-full text-xs font-bold bg-white/20">Answer</div>\
                 <button onClick=\{(e) => \{ e.stopPropagation(); setIsFlipped(false); \}\} className="px-3 py-1 bg-white/20 hover:bg-white/30 rounded-full text-xs font-bold flex items-center gap-1"><RotateCcw size=\{14\}/> \uc0\u46028 \u50500 \u44032 \u44592 </button>\
               </div>\
               <div className="flex-1 flex flex-col items-center justify-center w-full">\
                 \{quizResult && (\
                   <div className="mb-4 flex flex-col items-center animate-in zoom-in">\
                     <div className=\{`p-3 rounded-full mb-2 $\{quizResult === 'correct' ? 'bg-white/20' : 'bg-rose-500'\}`\}>\{quizResult === 'correct' ? <Check size=\{40\}/> : <X size=\{40\}/>\}</div>\
                     <span className="font-bold text-lg">\{quizResult === 'correct' ? '\uc0\u51221 \u45813 \u51077 \u45768 \u45796 !' : '\u50500 \u49789 \u45348 \u50836 !'\}</span>\
                   </div>\
                 )\}\
                 <h3 className="text-4xl font-black text-center mb-4">\{currentCard.a\}</h3>\
                 <p className="text-center opacity-80 text-sm bg-black/20 p-4 rounded-xl">\{currentCard.desc\}</p>\
               </div>\
               <div onClick=\{(e) => \{ e.stopPropagation(); nextCard(); \}\} className="mt-4 flex items-center gap-2 bg-white/10 px-6 py-3 rounded-full cursor-pointer hover:bg-white/20"><Hand size=\{20\}/><span className="text-sm font-bold">\uc0\u53552 \u52824 \u54616 \u50668  \u45796 \u51020  \u47928 \u51228 \u47196 </span></div>\
            </div>\
          </div>\
        </div>\
      </div>\
      <style>\{`.perspective-1000 \{ perspective: 1000px; \} .preserve-3d \{ transform-style: preserve-3d; \} .backface-hidden \{ backface-visibility: hidden; \}`\}</style>\
    </div>\
  );\
\};\
\
// =================================================================================================\
// [MAIN HUB] \uc0\u53685 \u54633  \u44284 \u54617  \u54617 \u49845  \u54728 \u48652 \
// =================================================================================================\
const ScienceHub = () => \{\
  const [app, setApp] = useState('hub'); // 'hub', 'element', 'plate', 'substance'\
\
  if (app === 'element') return <ElementFlashcards onGoHome=\{() => setApp('hub')\} />;\
  if (app === 'plate') return <PlateBoundaryFlashcards onGoHome=\{() => setApp('hub')\} />;\
  if (app === 'substance') return <SubstanceFlashcards onGoHome=\{() => setApp('hub')\} />;\
\
  return (\
    <div className="flex flex-col items-center justify-center h-full min-h-[600px] bg-slate-100 p-6 font-sans">\
      <div className="max-w-4xl w-full">\
        <h1 className="text-4xl md:text-5xl font-black text-slate-800 mb-2 text-center">\uc0\u44284 \u54617  \u47560 \u49828 \u53552  \u53364 \u47000 \u49828 </h1>\
        <p className="text-slate-500 text-center mb-10">\uc0\u50896 \u54616 \u45716  \u54617 \u49845  \u51452 \u51228 \u47484  \u49440 \u53469 \u54616 \u49464 \u50836 </p>\
        \
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">\
          \{/* Card 1: Elements */\}\
          <button \
            onClick=\{() => setApp('element')\}\
            className="group relative overflow-hidden bg-white p-8 rounded-3xl shadow-xl border-2 border-transparent hover:border-blue-500 transition-all duration-300 hover:-translate-y-2"\
          >\
            <div className="absolute top-0 right-0 p-32 bg-blue-50 rounded-full -mr-16 -mt-16 group-hover:bg-blue-100 transition-colors"></div>\
            <div className="relative z-10 flex flex-col items-start text-left">\
              <div className="bg-blue-600 p-4 rounded-2xl text-white mb-4 shadow-lg shadow-blue-200">\
                <FlaskConical size=\{32\} />\
              </div>\
              <h2 className="text-xl font-bold text-slate-800 mb-2">\uc0\u54868 \u54617  \u50896 \u49548  \u47560 \u49828 \u53552 </h2>\
              <p className="text-slate-500 text-xs mb-6 h-10">\uc0\u50896 \u49548 \u44592 \u54840 , \u50896 \u51088 \u48264 \u54840 , \u44552 \u49549  \u50896 \u49548 , \u51452 \u44592 \u50984 \u54364  \u50948 \u52824  \u50516 \u44592 </p>\
              <div className="flex items-center gap-2 text-blue-600 font-bold text-sm">\
                <span>\uc0\u54617 \u49845  \u49884 \u51089 </span> <ArrowRight size=\{16\} />\
              </div>\
            </div>\
          </button>\
\
          \{/* Card 2: Plates */\}\
          <button \
            onClick=\{() => setApp('plate')\}\
            className="group relative overflow-hidden bg-white p-8 rounded-3xl shadow-xl border-2 border-transparent hover:border-teal-500 transition-all duration-300 hover:-translate-y-2"\
          >\
            <div className="absolute top-0 right-0 p-32 bg-teal-50 rounded-full -mr-16 -mt-16 group-hover:bg-teal-100 transition-colors"></div>\
            <div className="relative z-10 flex flex-col items-start text-left">\
              <div className="bg-teal-600 p-4 rounded-2xl text-white mb-4 shadow-lg shadow-teal-200">\
                <Mountain size=\{32\} />\
              </div>\
              <h2 className="text-xl font-bold text-slate-800 mb-2">\uc0\u54032 \u51032  \u44221 \u44228  \u47560 \u49828 \u53552 </h2>\
              <p className="text-slate-500 text-xs mb-6 h-10">\uc0\u48156 \u49328 \u54805 , \u49688 \u47156 \u54805 , \u48372 \u51316 \u54805  \u44221 \u44228 \u50752  \u51648 \u54805  \u53945 \u51669  \u51221 \u48373 </p>\
              <div className="flex items-center gap-2 text-teal-600 font-bold text-sm">\
                <span>\uc0\u54617 \u49845  \u49884 \u51089 </span> <ArrowRight size=\{16\} />\
              </div>\
            </div>\
          </button>\
\
          \{/* Card 3: Substances */\}\
          <button \
            onClick=\{() => setApp('substance')\}\
            className="group relative overflow-hidden bg-white p-8 rounded-3xl shadow-xl border-2 border-transparent hover:border-amber-500 transition-all duration-300 hover:-translate-y-2"\
          >\
            <div className="absolute top-0 right-0 p-32 bg-amber-50 rounded-full -mr-16 -mt-16 group-hover:bg-amber-100 transition-colors"></div>\
            <div className="relative z-10 flex flex-col items-start text-left">\
              <div className="bg-amber-500 p-4 rounded-2xl text-white mb-4 shadow-lg shadow-amber-200">\
                <Atom size=\{32\} />\
              </div>\
              <h2 className="text-xl font-bold text-slate-800 mb-2">\uc0\u47932 \u51656  \u48516 \u47448  \u47560 \u49828 \u53552 </h2>\
              <p className="text-slate-500 text-xs mb-6 h-10">\uc0\u50896 \u49548 (\u54865 \u50896 \u49548 \u47932 \u51656 )\u50752  \u54868 \u54633 \u47932 \u51012  \u50756 \u48317 \u54616 \u44172  \u44396 \u48516 \u54616 \u44592 </p>\
              <div className="flex items-center gap-2 text-amber-600 font-bold text-sm">\
                <span>\uc0\u54617 \u49845  \u49884 \u51089 </span> <ArrowRight size=\{16\} />\
              </div>\
            </div>\
          </button>\
        </div>\
      </div>\
    </div>\
  );\
\};\
\
export default ScienceHub;}