---
theme: default
layout: center
class: text-center
---

# 🍱 AI 급식 특공대
## 우리가 만드는 완벽한 식단

초등학교 5학년 ~ 6학년 대상 (총 3차시 / 240분)

---
layout: default
---

# 📋 전체 커리큘럼 안내

<div class="w-full mt-4 border border-slate-300 rounded-lg overflow-hidden shadow-md text-[11px] font-sans">
  <table class="w-full text-center border-collapse">
    <thead class="bg-slate-900 text-white font-bold">
      <tr>
        <th class="p-2 border border-slate-700 w-[15%]">구분</th>
        <th class="p-2 border border-slate-700 w-[10%]">교시</th>
        <th class="p-2 border border-slate-700 w-[55%] text-left">학습 주제</th>
        <th class="p-2 border border-slate-700 w-[10%]">소요시간</th>
      </tr>
    </thead>
    <tbody>
      <tr class="bg-slate-800 text-white font-bold border-b-2 border-slate-600">
        <td class="p-2 border border-slate-700">Prologue</td>
        <td class="p-2 border border-slate-700">오프닝</td>
        <td class="p-2 border border-slate-700 text-left text-amber-400">🪄 AI 프롬프트 마법 기계 (우리는 왜 질문을 잘해야 할까?)</td>
        <td class="p-2 border border-slate-700">10분</td>
      </tr>
      <tr class="bg-blue-50 text-slate-800">
        <td rowspan="4" class="p-2 border border-slate-300 font-bold align-middle">1차시<br>(AI 영양사)</td>
        <td class="p-2 border border-slate-300">1교시</td>
        <td class="p-2 border border-slate-300 text-left font-bold">특공대 결성! 절대 규칙과 첫 질문 던지기</td>
        <td class="p-2 border border-slate-300">10분</td>
      </tr>
      <tr class="bg-blue-50 text-slate-800">
        <td class="p-2 border border-slate-300">1교시</td>
        <td class="p-2 border border-slate-300 text-left font-bold">AI 영양사 훈련시키기 (숨은 함정 피하기)</td>
        <td class="p-2 border border-slate-300">30분</td>
      </tr>
      <tr class="bg-blue-50 text-slate-800">
        <td class="p-2 border border-slate-300">2교시</td>
        <td class="p-2 border border-slate-300 text-left font-bold">바이브 코딩 1: 특공대 뱃지 로고 그리기</td>
        <td class="p-2 border border-slate-300">20분</td>
      </tr>
      <tr class="bg-blue-50 text-slate-800 border-b-2 border-slate-400">
        <td class="p-2 border border-slate-300">2교시</td>
        <td class="p-2 border border-slate-300 text-left font-bold">바이브 코딩 2: 우리 학교 급식실 간판 만들기</td>
        <td class="p-2 border border-slate-300">20분</td>
      </tr>
      <tr class="bg-emerald-50 text-slate-800">
        <td rowspan="8" class="p-2 border border-slate-300 font-bold align-middle">2차시<br>(데이터 탐정)</td>
        <td class="p-2 border border-slate-300">1교시</td>
        <td class="p-2 border border-slate-300 text-left font-bold">민초청국장 투표 및 데이터 탐구</td>
        <td class="p-2 border border-slate-300">15분</td>
      </tr>
      <tr class="bg-emerald-50 text-slate-800">
        <td class="p-2 border border-slate-300">1교시</td>
        <td class="p-2 border border-slate-300 text-left font-bold">급식실에 비상이? 식단 장부 다운로드</td>
        <td class="p-2 border border-slate-300">10분</td>
      </tr>
      <tr class="bg-emerald-50 text-slate-800">
        <td class="p-2 border border-slate-300">1교시</td>
        <td class="p-2 border border-slate-300 text-left font-bold">매의 눈 관찰: 어이없는 오타와 고장 찾기</td>
        <td class="p-2 border border-slate-300">15분</td>
      </tr>
      <tr class="bg-emerald-50 text-slate-800">
        <td class="p-2 border border-slate-300">1교시</td>
        <td class="p-2 border border-slate-300 text-left font-bold">명탐정 추리: 말이 안 되는 가짜 메뉴 찾기</td>
        <td class="p-2 border border-slate-300">15분</td>
      </tr>
      <tr class="bg-emerald-50 text-slate-800">
        <td class="p-2 border border-slate-300">2교시</td>
        <td class="p-2 border border-slate-300 text-left font-bold text-emerald-600">CODAP 넌 누구냐? 기초 탐험</td>
        <td class="p-2 border border-slate-300">10분</td>
      </tr>
      <tr class="bg-emerald-50 text-slate-800">
        <td class="p-2 border border-slate-300">2교시</td>
        <td class="p-2 border border-slate-300 text-left font-bold">CODAP: 그래프로 범인 몽타주 그리기</td>
        <td class="p-2 border border-slate-300">15분</td>
      </tr>
      <tr class="bg-emerald-50 text-slate-800">
        <td class="p-2 border border-slate-300">2교시</td>
        <td class="p-2 border border-slate-300 text-left font-bold text-red-600">워드클라우드: 잔반통에서 찾은 학생들의 속마음</td>
        <td class="p-2 border border-slate-300">10분</td>
      </tr>
      <tr class="bg-emerald-50 text-slate-800 border-b-2 border-slate-400">
        <td class="p-2 border border-slate-300">2교시</td>
        <td class="p-2 border border-slate-300 text-left font-bold">특공대의 결단 (급식 작전 변경 발표하기)</td>
        <td class="p-2 border border-slate-300">10분</td>
      </tr>
      <tr class="bg-amber-50 text-slate-800">
        <td rowspan="6" class="p-2 border border-slate-300 font-bold align-middle">3차시<br>(미래 자율주행과<br>착한 AI)</td>
        <td class="p-2 border border-slate-300">1교시</td>
        <td class="p-2 border border-slate-300 text-left font-bold">뚝딱뚝딱! 자율주행 자동차 조립</td>
        <td class="p-2 border border-slate-300">15분</td>
      </tr>
      <tr class="bg-amber-50 text-slate-800">
        <td class="p-2 border border-slate-300">1교시</td>
        <td class="p-2 border border-slate-300 text-left font-bold">자동차는 어떻게 혼자 달릴까?</td>
        <td class="p-2 border border-slate-300">10분</td>
      </tr>
      <tr class="bg-amber-50 text-slate-800">
        <td class="p-2 border border-slate-300">1교시</td>
        <td class="p-2 border border-slate-300 text-left font-bold">자동차의 세 가지 마법의 눈 (센서)</td>
        <td class="p-2 border border-slate-300">10분</td>
      </tr>
      <tr class="bg-amber-50 text-slate-800">
        <td class="p-2 border border-slate-300">1교시</td>
        <td class="p-2 border border-slate-300 text-left font-bold">X-파일: 똑똑한 AI는 왜 사고를 냈을까?</td>
        <td class="p-2 border border-slate-300">10분</td>
      </tr>
      <tr class="bg-amber-50 text-slate-800">
        <td class="p-2 border border-slate-300">2교시</td>
        <td class="p-2 border border-slate-300 text-left font-bold">영양 딜레마 게임: 로봇의 선택은?</td>
        <td class="p-2 border border-slate-300">15분</td>
      </tr>
      <tr class="bg-amber-50 text-slate-800">
        <td class="p-2 border border-slate-300">2교시</td>
        <td class="p-2 border border-slate-300 text-left font-bold">착한 AI 급식 선언문: 우리 학교의 약속 발표</td>
        <td class="p-2 border border-slate-300">20분</td>
      </tr>
    </tbody>
  </table>
</div>

---
layout: center
---

# 🪄 AI 프롬프트 마법 기계 (가챠 게임)
<p class="text-slate-500 text-sm mb-6">똑같은 AI라도 사장님이 어떻게 말하느냐에 따라 결과는 천지차이! 버튼을 여러 번 눌러보세요.</p>

<PromptMachine />

---
layout: default
---

# 🤔 1차시: 상상 속 메뉴와 진짜 현실 (절대 규칙)

여러분은 오늘부터 우리 학교 메뉴 개편단입니다! 다음 **[세 가지 절대 규칙]**을 지켜 일주일치 식단을 짜야 합니다.

<div class="grid grid-cols-3 gap-4 mt-6 text-center font-bold">
  <div class="bg-slate-800 text-white p-4 rounded-xl shadow-lg">🗓️ 기간: 무조건 1주일치</div>
  <div class="bg-slate-800 text-white p-4 rounded-xl shadow-lg">🍱 메뉴: 밥1, 국1, 반찬5, 후식1</div>
  <div class="bg-slate-800 text-white p-4 rounded-xl shadow-lg">🏫 인원: 전교생 700명</div>
</div>

<div class="grid grid-cols-2 gap-6 mt-8">
  <div class="border-2 border-red-500 rounded-xl overflow-hidden shadow-sm">
    <div class="bg-red-500 text-white font-bold py-2 px-4 text-center">❌ 바보 같은 질문 1</div>
    <div class="p-4 bg-white text-sm">
      <p class="italic text-slate-600 mb-2">"애들이 좋아하는 걸로 다 짜줘!"</p>
      <b class="text-red-600">👉 AI: 매일 최고급 랍스터를 드릴게요! (학교 파산)</b>
    </div>
  </div>
  <div class="border-2 border-amber-500 rounded-xl overflow-hidden shadow-sm">
    <div class="bg-amber-500 text-white font-bold py-2 px-4 text-center">❌ 바보 같은 질문 2</div>
    <div class="p-4 bg-white text-sm">
      <p class="italic text-slate-600 mb-2">"마라탕이랑 탕후루로 구성해줘!"</p>
      <b class="text-red-600">👉 1학년 동생들은 매워서 응급실에 갑니다!</b>
    </div>
  </div>
</div>

<div class="mt-8 border-2 border-blue-500 rounded-xl overflow-hidden shadow-md">
  <div class="bg-blue-500 text-white font-bold py-2 px-4 text-center">📝 미션: AI에게 묻기 전, 우리 특공대만의 콘셉트 정하기!</div>
  <div class="bg-blue-50 p-4 text-sm text-center">
    <p class="font-bold mb-3">먼저 일주일 중 '주 1일 컨셉데이'를 조원들과 정하고, '매일 메뉴가 겹치지 않게' 계획해 보세요!</p>
    <div class="flex justify-center gap-4">
      <span class="bg-white border px-3 py-1 rounded-full shadow-sm font-bold">💪 튼튼 수요일 (단백질)</span>
      <span class="bg-white border px-3 py-1 rounded-full shadow-sm font-bold">🌏 지구 목요일 (채식)</span>
      <span class="bg-white border px-3 py-1 rounded-full shadow-sm font-bold">🎉 축제 금요일 (분식)</span>
    </div>
  </div>
</div>

---
layout: default
---

# 🥊 AI 훈련시키기: Round 1 (돈과 시간의 습격)
<p class="text-sm text-slate-600 mb-6">AI가 반찬 5개, 국 1개를 맞춰서 식단을 줬나요? 자, 이제 <b>숨겨진 현실 데이터</b>로 뒤통수를 칠 시간입니다!</p>

<div class="bg-slate-800 rounded-xl overflow-hidden shadow-lg">
<div class="bg-slate-900 text-white font-bold py-3 px-5 border-b border-slate-700">
🚨 1차 함정: 예산과 조리사 선생님의 시간
</div>
  
<div class="p-2 space-y-2">
<details class="group bg-white rounded-lg [&_summary::-webkit-details-marker]:hidden">
<summary class="flex items-center justify-between cursor-pointer p-4 font-bold text-blue-600">
<span>함정 1. "랍스터 파티? 학교 파산!"</span>
<span class="transition group-open:rotate-180">⬇️</span>
</summary>
<div class="p-4 pt-0 text-sm text-slate-600 border-t border-slate-100 mt-2">
우리 학교 1인당 식재료비 예산은 <b>딱 4,000원</b>입니다. 랍스터 1인분은 3만 원이 넘어요!<br>
<strong class="text-red-500 mt-2 block">👉 AI에게 "1인당 예산이 4,000원이야! 가격 데이터 확인해서 비싼 건 빼!"라고 명령하세요.</strong>
</div>
</details>

<details class="group bg-white rounded-lg [&_summary::-webkit-details-marker]:hidden">
<summary class="flex items-center justify-between cursor-pointer p-4 font-bold text-blue-600">
<span>함정 2. "12시간 사골국? 선생님들 쓰러지셔!"</span>
<span class="transition group-open:rotate-180">⬇️</span>
</summary>
<div class="p-4 pt-0 text-sm text-slate-600 border-t border-slate-100 mt-2">
급식실 조리사 선생님들에게 주어진 조리 시간은 총 <b>180분(3시간)</b>뿐입니다.<br>
<strong class="text-red-500 mt-2 block">👉 AI에게 "반찬과 국을 180분 안에 다 만들어야 해! 조리 시간 데이터를 맞춰!"라고 압박하세요.</strong>
</div>
</details>
    
</div>
</div>

---
layout: default
---

# 🥊 AI 훈련시키기: Round 2 (동생들의 비명)
<p class="text-sm text-slate-600 mb-6">싸고 빨리 만들 수 있다고요? 과연 700명이 다 맛있게 먹을 수 있을까요?</p>

<div class="bg-slate-800 rounded-xl overflow-hidden shadow-lg">
<div class="bg-slate-900 text-white font-bold py-3 px-5 border-b border-slate-700">
🚨 2차 함정: 보편성과 영양 불균형
</div>

<div class="p-2 space-y-2">
<details class="group bg-white rounded-lg [&_summary::-webkit-details-marker]:hidden">
<summary class="flex items-center justify-between cursor-pointer p-4 font-bold text-blue-600">
<span>함정 3. "1학년 동생들의 폭풍 눈물 (지옥의 마라탕)"</span>
<span class="transition group-open:rotate-180">⬇️</span>
</summary>
<div class="p-4 pt-0 text-sm text-slate-600 border-t border-slate-100 mt-2">
6학년이 좋아하는 자극적인 음식은 1학년에겐 벌칙입니다. '보편성 데이터'가 엉망인 거죠.<br>
<strong class="text-red-500 mt-2 block">👉 AI에게 "1학년도 먹을 수 있게 '매운맛 데이터'를 확 낮춰서 다시 짜!"라고 명령하세요.</strong>
</div>
</details>

<details class="group bg-white rounded-lg [&_summary::-webkit-details-marker]:hidden">
<summary class="flex items-center justify-between cursor-pointer p-4 font-bold text-blue-600">
<span>함정 4. "잔반통 폭발! (억지 건강식)"</span>
<span class="transition group-open:rotate-180">⬇️</span>
</summary>
<div class="p-4 pt-0 text-sm text-slate-600 border-t border-slate-100 mt-2">
그렇다고 나물만 5개 주면 잔반통이 폭발할 겁니다. (선호도 0점)<br>
<strong class="text-red-500 mt-2 block">👉 AI에게 "건강도 챙기면서 선호도 점수도 8점 이상 나오게 바꿔!"라고 명령하세요.</strong>
</div>
</details>
</div>
</div>

---
layout: default
---

# 🥊 AI 훈련시키기: Round 3 (보이지 않는 위험)
<p class="text-sm text-slate-600 mb-6">드디어 완벽해 보이나요? 데이터 사이언티스트라면 '디테일'을 봐야 합니다!</p>

<div class="bg-red-900 rounded-xl overflow-hidden shadow-lg">
<div class="bg-red-950 text-red-200 font-bold py-3 px-5 border-b border-red-800">
🚨 최종 함정: 알레르기와 기계 부족
</div>

<div class="p-2 space-y-2">
<details class="group bg-white rounded-lg [&_summary::-webkit-details-marker]:hidden">
<summary class="flex items-center justify-between cursor-pointer p-4 font-bold text-red-600">
<span>함정 5. 생명을 위협하는 견과류 폭탄</span>
<span class="transition group-open:rotate-180">⬇️</span>
</summary>
<div class="p-4 pt-0 text-sm text-slate-600 border-t border-slate-100 mt-2">
전교생 중 알레르기가 있는 친구에겐 독약이 될 수 있습니다.<br>
<strong class="text-red-500 mt-2 block">👉 AI에게 "알레르기 안전 데이터 확인해! 유발 물질은 대체 재료로 다 바꿔!"라고 지시하세요.</strong>
</div>
</details>

<details class="group bg-white rounded-lg [&_summary::-webkit-details-marker]:hidden">
<summary class="flex items-center justify-between cursor-pointer p-4 font-bold text-red-600">
<span>함정 6. 튀김기 쟁탈전 (오븐은 하나뿐)</span>
<span class="transition group-open:rotate-180">⬇️</span>
</summary>
<div class="p-4 pt-0 text-sm text-slate-600 border-t border-slate-100 mt-2">
반찬 5개가 전부 튀김이라면? 급식실 튀김기는 2대뿐이라 다 튀기려면 밤을 새워야 해요.<br>
<strong class="text-red-500 mt-2 block">👉 AI에게 "오븐 1개, 튀김 1개처럼 '조리 방법' 데이터가 겹치지 않게 분산시켜!"라고 지시하세요.</strong>
</div>
</details>
</div>
</div>

---
layout: default
---

# 🎨 2교시: 바이브 코딩 (숫자로 그리는 마법)
<p class="text-sm text-slate-600 mb-6">AI 영양사와의 씨름이 끝났습니다! 이제 멋진 식단을 뽐낼 <b>급식 특공대 뱃지 로고</b>를 코딩으로 그려봐요!</p>

<div class="grid grid-cols-2 gap-6 mt-4">
  <div class="bg-blue-50 p-6 rounded-xl shadow-sm border border-blue-100">
    <h5 class="font-bold text-blue-600 mb-3 text-lg">💡 Vibe Coding이란?</h5>
    <p class="text-sm text-slate-700 leading-relaxed">
      "그냥 예쁘게 그려줘"라고 말하면 컴퓨터는 못 알아들어요.<br><br>
      대신, <b>"거북아, 앞으로 50만큼 가고 90도 꺾어서 초록색 선으로 그려줘"</b>처럼 명확한 숫자(코드) 데이터로 컴퓨터에게 명령하는 방법입니다.
    </p>
  </div>
  
  <div class="bg-slate-800 text-white p-6 rounded-xl shadow-sm border border-slate-700">
    <h5 class="font-bold text-amber-400 mb-3 text-lg">🛠️ 실습 방법</h5>
    <ol class="text-sm text-slate-300 leading-relaxed space-y-2 list-decimal pl-4">
      <li>다음 장에 있는 파이썬(Python) 코드를 복사하세요.</li>
      <li>왼쪽 <b>Trinket 화면</b>에 붙여넣고 재생(▶) 버튼을 누르세요.</li>
      <li>코드 안의 색깔(color), 숫자(range, circle)를 바꿔가며 나만의 특공대 로고를 만드세요!</li>
    </ol>
  </div>
</div>

---
layout: two-cols
---

# 💻 뱃지 로고 그리기

<div class="pr-4 h-[400px] overflow-y-auto mt-4 space-y-4">
  <CodeCard title="디자인 A. 신선한 과일" color="#ef4444">

```python
import turtle
t = turtle.Turtle()
t.pensize(3)

for i in range(12): 
    t.color("#FF6347") 
    t.circle(50)       
    t.left(30)         
```

  </CodeCard>
  
  <CodeCard title="디자인 B. 빙글빙글 사탕" color="#ec4899">

```python
import turtle
t = turtle.Turtle()
colors = ["#FF69B4", "#FFF0F5"]
for i in range(40):
    t.color(colors[i % 2])
    t.circle(i * 3, 180)
    t.right(10)
```

  </CodeCard>

  <CodeCard title="디자인 C. 튼튼한 방패" color="#3b82f6">

```python
import turtle
t = turtle.Turtle()
colors = ['#FFD700', '#FFA500', '#32CD32']
for i in range(60):
    t.color(colors[i % 3])
    t.forward(i * 3)
    t.left(91)
```

  </CodeCard>
</div>

::right::

<div class="h-full shadow-lg border border-slate-300 bg-white" style="transform: translateZ(0);">
  <iframe src="https://trinket.io/embed/python/c283ebb4165a" width="100%" height="450" frameborder="0"></iframe>
</div>

---
layout: two-cols
---

# 🏪 급식실 간판 그리기

<div class="pr-4 h-[400px] overflow-y-auto mt-4 space-y-4">
  <CodeCard title="디자인 A. 나무 간판" color="#0ea5e9">

```python
import turtle
def draw_sign():
    s = turtle.Screen()
    s.setup(600, 400)
    s.bgcolor("#FFFACD")
    t = turtle.Turtle(); t.speed(0)
    t.penup(); t.goto(-250, 150); t.pendown()
    t.color("#228B22"); t.pensize(5)
    for _ in range(2):
        t.forward(500); t.right(90)
        t.forward(300); t.right(90)
    t.penup(); t.goto(0, 30); t.color("black")
    t.write("우주 최고 급식실", align="center", font=("Arial", 40, "bold"))
draw_sign()
```

  </CodeCard>
  
  <CodeCard title="디자인 B. 네온 전광판" color="#1e293b">

```python
import turtle
t = turtle.Turtle(); t.speed(0)
turtle.Screen().bgcolor("#111111")
t.penup(); t.goto(-200, 100); t.pendown()
t.color("#00FFFF"); t.pensize(4)
for _ in range(2):
    t.forward(400); t.right(90)
    t.forward(200); t.right(90)
t.penup(); t.goto(0, -10); t.color("#00FF00")
t.write("AI 급식 특공대", align="center", font=("Courier", 30, "bold"))
```

  </CodeCard>
</div>

::right::

<div class="h-full shadow-lg border border-slate-300 bg-white" style="transform: translateZ(0);">
  <iframe src="https://trinket.io/embed/python/fc9c1290a6ab" width="100%" height="400" frameborder="0"></iframe>
  <div class="mt-4 p-3 bg-amber-100 text-amber-800 rounded-lg text-xs font-bold shadow-sm">
    🔥 미션: `t.goto(x, y)` 괄호 안 숫자를 바꾸면 글씨가 움직여요!
  </div>
</div>

---
layout: default
---

# 💡 2차시 시작 전 몸풀기! (OX 퀴즈)

<div class="space-y-6 w-full max-w-3xl mx-auto mt-8">
  <BasicQuiz 
    question="Q1. AI에게 '맛있는 거 다 넣어줘!'라고 하면 완벽하게 짜준다?"
    options="['O', 'X']"
    answer="X"
    explanation="한계를 정해주지 않으면 1인당 3만 원짜리 식단을 짤지도 몰라요!"
  />

  <BasicQuiz 
    question="Q2. 보편성(매운맛 등) 차이는 무시해도 된다?"
    options="['O', 'X']"
    answer="X"
    explanation="1학년 동생들이 매워서 응급실에 갈 수도 있어요!"
  />

  <BasicQuiz 
    question="Q3. 바이브 코딩은 컴퓨터에게 '그냥 예쁘게 그려줘'라고 말하는 것이다?"
    options="['O', 'X']"
    answer="X"
    explanation="컴퓨터가 알아들을 수 있게 명확한 숫자(좌표, 각도)로 명령해야 해요!"
  />
</div>

---
layout: center
---

# 🤮 앗! 오늘의 스페셜 메뉴: 민초청국장
<p class="text-sm text-slate-600 mb-6">방금 배운 '보편성'과 '선호도'를 직접 체험해봅시다. 여러분 식판에 <b>'민트초코 청국장'</b>이 나왔습니다.</p>

<FoodVote />

---
layout: default
---

# 📊 어떤 데이터들이 필요할까요?
<p class="text-sm text-slate-600 mb-6">숫자로 말할 수 있는 데이터가 있어야 AI가 식단을 짤 수 있습니다. 급식 메뉴를 정할 때 필요한 숫자 데이터 2가지를 클릭해서 확인해보세요!</p>

<div class="grid grid-cols-2 gap-6 mt-4">
  <details class="group bg-white rounded-xl shadow-md overflow-hidden border border-blue-200 [&_summary::-webkit-details-marker]:hidden">
    <summary class="flex flex-col items-center justify-center h-40 cursor-pointer hover:bg-blue-50 transition-colors">
      <div class="text-lg font-bold text-slate-500 group-open:hidden">🤔 힌트 1 확인하기 (클릭)</div>
      <div class="hidden group-open:flex flex-col items-center animate-fade-in">
        <div class="text-4xl mb-2">🪙</div>
        <h4 class="font-black text-slate-800 text-xl mb-1">가격 (원)</h4>
        <p class="text-xs text-slate-500">"1인당 예산을 맞추려면 메뉴마다 얼만지 알아야 해요!"</p>
      </div>
    </summary>
  </details>

  <details class="group bg-white rounded-xl shadow-md overflow-hidden border border-red-200 [&_summary::-webkit-details-marker]:hidden">
    <summary class="flex flex-col items-center justify-center h-40 cursor-pointer hover:bg-red-50 transition-colors">
      <div class="text-lg font-bold text-slate-500 group-open:hidden">🤔 힌트 2 확인하기 (클릭)</div>
      <div class="hidden group-open:flex flex-col items-center animate-fade-in">
        <div class="text-4xl mb-2">🔥</div>
        <h4 class="font-black text-slate-800 text-xl mb-1">매운맛 단계 (1~5)</h4>
        <p class="text-xs text-slate-500">"1학년 동생들도 먹을 수 있는지 숫자로 나눠야 해요!"</p>
      </div>
    </summary>
  </details>
</div>

<div class="mt-8 p-4 bg-slate-100 rounded-lg text-center text-sm font-bold text-slate-600 border border-slate-200">
  💡 이 외에도 조리시간(분), 칼로리(kcal), 나트륨(mg) 등 다양한 숫자 데이터가 필요합니다!
</div>

---
layout: default
---

# 👾 긴급 출동: AI 급식 셰프를 구하라!
<p class="text-sm text-slate-600 mb-6">나쁜 데이터(이상치)를 먹으면 똑똑한 AI도 바보가 됩니다. 셰프의 머릿속을 청소해주세요!</p>

<AiChefGame />

---
layout: default
---
<script setup>
const dietHeaders = ["번호", "메뉴이름", "가격(원)", "조리시간(분)", "보편성(1-10)", "선호도(1-10)", "예상잔반량(kg)", "비고"];
const dietDataRows = [
  "1,제육볶음,1500,40,8,9,5,정상", "2,시금치나물,500,20,6,4,20,정상", "3,계란말이,800,30,9,8,3,정상",
  "8,돈가스,1600,40,9,10,2,정상", "9,황금 멜론,45000,10,10,10,1,가격오류", "13,쌀밥,400,600,10,8,5,시간단위오류",
  "22,핵불닭볶음면,1200,20,10,9,1,거짓데이터", "29,브로콜리 젤리,500,30,2,10,500,논리모순", "48,지옥의 마라탕,1600,40,10,9,1,거짓데이터2",
  "50,민트초코 떡볶이,1000,30,2,10,480,논리모순2"
];
</script>

# 📥 2차시: 급식실 비상! 식단 장부가 이상하다?
<p class="text-sm text-slate-600 mb-6">어제 AI 영양사가 짜놓은 메뉴 장부에 누군가 장난을 쳐놨습니다. 예산 초과로 교장선생님께 혼나기 전에 범인 메뉴를 찾아야 해요!</p>

<div class="bg-white p-8 rounded-2xl shadow-lg border border-slate-200 text-center max-w-4xl mx-auto">
  <h4 class="font-black text-[#dc2626] text-2xl mb-4">🚨 긴급 입수: AI가 짠 50가지 메뉴 데이터</h4>
  
  <div class="bg-[#fef3c7] p-4 rounded-xl text-left inline-block mb-8 border border-[#fde68a]">
    <h6 class="font-bold text-[#92400e] mb-2">💡 데이터 탐정을 위한 힌트 (정상적인 메뉴 기준)</h6>
    <ul class="text-sm text-[#92400e] space-y-1 font-bold">
      <li>✔️ 1인당 가격: 평균 1,000원 ~ 1,500원 (합쳐서 4,000원이 되어야 하니까요!)</li>
      <li>✔️ 조리 시간: 반찬 하나당 보통 30분 ~ 50분 (합쳐서 180분!)</li>
      <li>✔️ 선호도: 점수가 높으면 보통 잔반량(버리는 양)은 적어야 정상!</li>
    </ul>
  </div>

  <p class="text-sm font-bold text-slate-700 mb-6">
    아래 버튼을 눌러 데이터를 다운받아 엑셀로 열어보세요.<br>
    분명히 엄청나게 말도 안 되는 메뉴(오류 데이터)가 숨어있습니다!
  </p>

  <ExcelDownload :headers="dietHeaders" :dataRows="dietDataRows" fileName="급식장부" />
  
  <p class="text-[11px] text-slate-400 mt-4 border-t pt-4">
    장부에 있는 항목: 번호, 메뉴이름, 가격(원), 조리시간(분), 보편성점수, 선호도, 예상잔반량(kg), 비고
  </p>
</div>

---
layout: two-cols
---

# 🕵️ 매의 눈 관찰
<p class="text-sm text-slate-600 mb-6">어려운 그래프를 그리기 전에 눈으로 먼저 <b>오타/단위 실수</b>를 찾아봅시다.</p>

<div class="pr-4 space-y-3">
  <details class="group bg-white rounded-xl shadow-sm border border-slate-200 [&_summary::-webkit-details-marker]:hidden">
    <summary class="p-4 font-bold text-blue-600 cursor-pointer flex justify-between items-center">
      <span>🔍 사건 1. "후식 먹고 기둥 뽑히겠다!"</span>
      <span class="transition group-open:rotate-180">⬇️</span>
    </summary>
    <div class="p-4 pt-0 border-t text-sm text-slate-600">
      <b>👉 범인: 황금 멜론 (45,000원)</b><br>
      총예산이 4천원인데 0을 하나 더 쳤거나 잘못된 데이터입니다.
    </div>
  </details>

  <details class="group bg-white rounded-xl shadow-sm border border-slate-200 [&_summary::-webkit-details-marker]:hidden">
    <summary class="p-4 font-bold text-blue-600 cursor-pointer flex justify-between items-center">
      <span>🔍 사건 2. "밥만 10시간 짓는 조리사?"</span>
      <span class="transition group-open:rotate-180">⬇️</span>
    </summary>
    <div class="p-4 pt-0 border-t text-sm text-slate-600">
      <b>👉 범인: 쌀밥 (조리시간 600분)</b><br>
      분 단위를 시간 단위로 착각했거나 0을 더 붙인 명백한 실수입니다.
    </div>
  </details>
</div>

::right::

# 🕵️ 명탐정 추리
<p class="text-sm text-slate-600 mb-6">숫자는 정상이지만, <b>서로 비교해보면 모순이 생기는</b> 가짜 데이터를 찾으세요!</p>

<div class="pl-4 space-y-3">
  <details class="group bg-white rounded-xl shadow-sm border border-red-200 [&_summary::-webkit-details-marker]:hidden">
    <summary class="p-4 font-bold text-red-600 cursor-pointer flex justify-between items-center">
      <span>🔍 사건 3. "좋아한다며 왜 다 버렸어?"</span>
      <span class="transition group-open:rotate-180">⬇️</span>
    </summary>
    <div class="p-4 pt-0 border-t text-sm text-slate-600">
      <b>👉 범인: 브로콜리 젤리 (선호도 10점, 잔반 500kg)</b><br>
      선호도가 만점인데 다 버렸다고요? AI가 억지로 먹이려고 점수를 조작한 겁니다!
    </div>
  </details>

  <details class="group bg-white rounded-xl shadow-sm border border-red-200 [&_summary::-webkit-details-marker]:hidden">
    <summary class="p-4 font-bold text-red-600 cursor-pointer flex justify-between items-center">
      <span>🔍 사건 4. "1학년이 불을 뿜으며 다 먹어?"</span>
      <span class="transition group-open:rotate-180">⬇️</span>
    </summary>
    <div class="p-4 pt-0 border-t text-sm text-slate-600">
      <b>👉 범인: 핵불닭볶음면 (보편성 10점)</b><br>
      매운 음식인데 전교생이 다 잘 먹는다는 건 완벽한 거짓 데이터입니다.
    </div>
  </details>
</div>

---
layout: center
---

# 📈 CODAP 넌 누구냐? (선호도 그래프 만들기)
<p class="text-sm text-slate-600 mb-8">숫자만 빽빽한 장부를 보면 어지럽죠? CODAP은 복잡한 데이터를 <b>한눈에 보이는 그림(그래프)</b>으로 바꿔주는 마법의 탐험 도구입니다.</p>

<div class="flex items-center justify-center gap-8 w-full max-w-4xl mx-auto">
  <div class="bg-slate-800 text-white rounded-xl overflow-hidden shadow-lg w-1/3">
    <div class="bg-slate-900 py-2 text-center text-xs font-bold">어지러운 숫자 데이터 😵</div>
    <table class="w-full text-sm text-center">
      <thead class="border-b border-slate-700"><tr><th class="py-2">메뉴</th><th>선호도</th></tr></thead>
      <tbody>
        <tr class="border-b border-slate-700/50"><td class="py-2">마라탕</td><td>9</td></tr>
        <tr class="border-b border-slate-700/50"><td class="py-2 text-red-400">민초청국장</td><td class="text-red-400">2</td></tr>
        <tr class="border-b border-slate-700/50"><td class="py-2">돈가스</td><td>10</td></tr>
        <tr><td class="py-2 text-amber-400">가지무침</td><td class="text-amber-400">3</td></tr>
      </tbody>
    </table>
  </div>
  
  <div class="text-center">
    <div class="text-4xl text-emerald-500 mb-2">➡️</div>
    <div class="bg-emerald-500 text-white text-xs font-bold px-3 py-1 rounded-full">CODAP</div>
  </div>

  <div class="bg-white rounded-xl shadow-lg border border-emerald-200 w-1/3 flex flex-col h-48">
    <div class="bg-emerald-50 py-2 text-center text-xs font-bold text-emerald-700">한눈에 보이는 그래프 🤩</div>
    <div class="flex-1 flex items-end justify-center gap-4 pb-4 px-4">
      <div class="bg-blue-500 w-8 rounded-t-sm" style="height: 90%;"></div>
      <div class="bg-red-500 w-8 rounded-t-sm" style="height: 20%;"></div>
      <div class="bg-indigo-500 w-8 rounded-t-sm" style="height: 100%;"></div>
      <div class="bg-amber-500 w-8 rounded-t-sm" style="height: 30%;"></div>
    </div>
  </div>
</div>

<div class="mt-8 p-4 bg-amber-50 text-amber-800 rounded-lg text-sm font-bold border border-amber-200 max-w-4xl mx-auto text-center">
  👉 선호도가 낮은 메뉴를 찾아내려면, 엑셀 표를 뚫어져라 보는 것보다 <b>그래프에서 뚝 떨어진 점</b>을 찾는 게 훨씬 빠릅니다!
</div>

---
layout: default
---
<script setup>
const dietHeaders = ["번호", "메뉴이름", "가격(원)", "조리시간(분)", "보편성(1-10)", "선호도(1-10)", "예상잔반량(kg)", "비고"];
const dietDataRows = [
  "1,제육볶음,1500,40,8,9,5,정상", "2,시금치나물,500,20,6,4,20,정상", "3,계란말이,800,30,9,8,3,정상",
  "8,돈가스,1600,40,9,10,2,정상", "9,황금 멜론,45000,10,10,10,1,가격오류", "13,쌀밥,400,600,10,8,5,시간단위오류",
  "22,핵불닭볶음면,1200,20,10,9,1,거짓데이터", "29,브로콜리 젤리,500,30,2,10,500,논리모순", "48,지옥의 마라탕,1600,40,10,9,1,거짓데이터2",
  "50,민트초코 떡볶이,1000,30,2,10,480,논리모순2"
];
</script>

# 📈 CODAP: 그래프로 범인 몽타주 그리기

<CsvDownload :headers="dietHeaders" :dataRows="dietDataRows" fileName="급식장부" />

<div class="flex justify-center items-center gap-4 text-sm font-bold text-slate-700 mb-8">
  <div class="bg-blue-50 p-3 rounded-lg border border-blue-200 text-center">CODAP 열기<br><span class="text-xs font-normal">새 문서 만들기</span></div>
  <div>➡️</div>
  <div class="bg-amber-50 p-3 rounded-lg border border-amber-200 text-center">바탕화면 CSV 파일<br><span class="text-xs font-normal">마우스로 드래그!</span></div>
  <div>➡️</div>
  <div class="bg-pink-50 p-3 rounded-lg border border-pink-200 text-center">가운데 [그래프] 누르고<br><span class="text-xs font-normal">X, Y축에 글자 끌어놓기</span></div>
</div>

<div class="grid grid-cols-2 gap-6">
  <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
    <div class="bg-slate-800 text-white px-4 py-2 font-bold text-sm">🕵️ 필수 기술: 가짜 데이터 지우기 (Rescale)</div>
    <ol class="p-4 text-sm text-slate-600 space-y-2 list-decimal pl-8">
      <li>이상한 점(가짜 데이터)을 클릭해서 선택합니다.</li>
      <li>옆 <b>눈 모양 아이콘(👁️)</b>을 누르고 <b>[숨기기]</b> 클릭!</li>
      <li class="text-red-500 font-bold">오른쪽 위 [화면크기조정(🔀)] 버튼을 누르세요.</li>
    </ol>
  </div>
  
  <div class="bg-white rounded-xl border border-blue-200 shadow-sm overflow-hidden">
    <div class="bg-blue-500 text-white px-4 py-2 font-bold text-sm">🎯 탐험대의 미션 2가지</div>
<HintAccordion badgeText="힌트 보기 ⬇️" badgeClass="bg-slate-500">
  <template #title>🔥 미션 1. 하늘 끝에 있는 가격과 시간 찾기</template>
  <template #content>👉 X축: 가격 / Y축: 조리시간</template>
</HintAccordion>

<HintAccordion badgeText="힌트 보기 ⬇️" badgeClass="bg-slate-500">
  <template #title>🔥 미션 2. 좋아한다며? 근데 왜 버려! (모순 찾기)</template>
  <template #content>👉 X축: 선호도 / Y축: 예상잔반량</template>
</HintAccordion>
  </div>
</div>

---
layout: default
---

# 🕵️ CODAP 심화: 우리는 데이터 과학자!
<p class="text-sm text-slate-700 font-bold mb-6 text-center">그래프를 다룰 줄 알게 되었다면, 이제 진짜 데이터를 요리해볼 시간입니다.</p>

<div class="bg-white rounded-lg border border-[#06b6d4] shadow-sm mb-6">
  <div class="bg-[#06b6d4] text-white font-bold px-4 py-2 text-center">💡 데이터 추가 미션</div>
<HintAccordion badgeText="정답 보기 ⬇️" badgeClass="bg-slate-500" contentClass="bg-cyan-50 text-cyan-700 border-cyan-100">
  <template #title>Q1. 1학년이 못 먹는 음식을 체크하려면 어떤 데이터를 추가해야 할까요?</template>
  <template #content>👉 [매운맛 단계] 데이터가 필요합니다! (예: 1단계~5단계로 표시해서 필터링)</template>
</HintAccordion>

<HintAccordion badgeText="정답 보기 ⬇️" badgeClass="bg-slate-500" contentClass="bg-cyan-50 text-cyan-700 border-cyan-100">
  <template #title>Q2. 알레르기 음식을 피하려면 어떤 데이터를 추가해야 할까요?</template>
  <template #content>👉 [알레르기 유발 물질] 성분 데이터가 필요합니다! (예: 땅콩 포함 O/X)</template>
</HintAccordion>
</div>

<h4 class="font-black text-[#10b981] text-xl mb-3">🏅 이건 진짜 데이터과학자!</h4>

<div class="bg-white rounded-lg border border-[#10b981] shadow-sm overflow-hidden">
  <div class="bg-[#10b981] text-white font-bold px-4 py-3 text-center">🤔 질문: "선호도가 가장 높은 진짜 메뉴들을 찾아내려면 어떻게 해야 할까요?"</div>
<HintAccordion badgeText="자세히 ⬇️" badgeClass="bg-slate-500" contentClass="bg-slate-50 text-slate-600 border-slate-200">
  <template #title>[Step 1] 거짓말하는 점 지우기 (이상치 제거)</template>
  <template #content>선호도는 높다면서 잔반이 엄청나게 많은 가짜 데이터(예: 브로콜리 젤리)를 먼저 <b>'선택한 데이터 숨기기'</b>로 지워야 합니다.</template>
</HintAccordion>

<HintAccordion badgeText="자세히 ⬇️" badgeClass="bg-slate-500" contentClass="bg-slate-50 text-slate-600 border-slate-200">
  <template #title>[Step 2] 진짜 1등 찾기 (새로운 그래프 그리기)</template>
  <template #content>가짜를 치웠으니, 이제 가로축(X)에 <b>'메뉴이름'</b>을 넣고, 세로축(Y)에 <b>'선호도'</b>를 넣어서 어느 메뉴가 가장 꼭대기에 있는지 확인하면 됩니다!</template>
</HintAccordion>
</div>

---
layout: default
---
<script setup>
const reviewList = [
  "메뉴가 너무 매워요. 1학년은 울면서 먹음.", "알레르기 표시가 안 보여서 무서워요.", "반찬이 너무 맛없어서 다 버려요.",
  "매워요.", "견과류 알레르기 있는데 호두강정 나왔어요 조심해주세요.", "시간이 너무 오래 걸려서 점심시간 다 지나가요.",
  "매운 음식이 너무 자주 나와요.", "고기 더 주세요. 매일 풀만 나와요.", "알레르기 너무 무서워요.", "반찬이 맛없어요 버림.",
  "시간이 너무 늦게 나와요 배식 늦어요.", "김치가 너무 매워요 매워요.", "맛없어요 다 버렸어요.", "고기 반찬이 적어요.",
  "배식 시간 너무 오래 걸려요.", "매워요 매워요 진짜 매워요."
]; // 필요에 따라 원본 100개 텍스트를 다 넣으셔도 됩니다.
</script>

# ☁️ 워드클라우드: 잔반통에서 찾은 속마음
<p class="text-sm text-slate-500 mb-8 font-bold text-center">숫자로 범인을 찾았다면, 이번엔 급식 게시판에 달린 학생들의 불만 리뷰를 한눈에 알아보기 쉽게 그림으로 만들어봅시다!</p>

<div class="flex justify-center mb-10">
  <a href="https://wordcloud.kr/v2/index.php" target="_blank" class="bg-[#ef4444] hover:bg-[#dc2626] text-white px-10 py-4 rounded-full font-black shadow-lg transition-transform hover:-translate-y-1 text-xl flex items-center gap-3">
    <i class="fas fa-rocket"></i> 워드클라우드 사이트 열기
  </a>
</div>

<div class="flex justify-center items-center gap-4 text-sm font-bold text-slate-700 mb-10">
  <div class="bg-slate-50 p-4 rounded-lg border text-center">리뷰 100개<br>복사하기</div>
  <div class="text-blue-500 text-xl">➡️</div>
  <div class="bg-slate-50 p-4 rounded-lg border text-center">'텍스트' 칸에<br>붙여넣기</div>
  <div class="text-blue-500 text-xl">➡️</div>
  <div class="bg-red-50 text-red-600 p-4 rounded-lg border border-red-200 text-center">[만들기] 버튼<br>클릭!</div>
</div>

<ReviewCopyCard :reviews="reviewList" />

---
layout: default
---

# 📢 특공대의 결단 (급식 작전 변경 발표)
<p class="text-slate-600 mb-8 text-center font-bold">우리는 그래프와 워드클라우드를 통해 AI 식단의 치명적인 문제점을 완벽하게 찾아냈습니다. 이제 작전을 바꿀 시간입니다!</p>

<div class="bg-white border border-slate-200 rounded-2xl p-8 max-w-4xl mx-auto text-left shadow-lg">
  <h5 class="font-black text-blue-600 mb-4 text-xl border-b pb-4 text-center">💡 데이터 기반으로 어떤 작전을 쓸까? (팀별 회의)</h5>
  <p class="text-sm text-slate-500 mb-6 text-center">
    아래 작전들을 읽어보고, <b class="text-blue-600">AI에게 더 기발한 급식 이벤트나 레시피를 내달라고 부탁해서 우리 팀만의 멋진 작전을 발표하세요!</b>
  </p>

  <div class="space-y-4">
    
<details class="group bg-white rounded-xl shadow-sm border border-slate-200 [&_summary::-webkit-details-marker]:hidden">
  <summary class="flex items-center justify-between cursor-pointer p-4 font-bold text-slate-800 hover:bg-slate-50 transition-colors rounded-xl">
    <span class="text-lg">📍 작전 1. 매운 음식 대참사 해결하기</span>
    <span class="transition-transform duration-300 group-open:rotate-180 text-xl">🔻</span>
  </summary>
  <div class="p-4 pt-0 text-sm text-slate-700 mt-2 border-t border-slate-100 bg-slate-50 rounded-b-xl flex items-start gap-2">
    <span class="text-green-600 font-bold">✔️</span> 
    <div>
      1학년 동생들이 매워서 못 먹는다면?<br>
      <span class="text-amber-500 font-bold">👉</span> "6학년용 떡볶이와 1학년용 궁중 떡볶이를 나누자!"
    </div>
  </div>
</details>

<details class="group bg-white rounded-xl shadow-sm border border-slate-200 [&_summary::-webkit-details-marker]:hidden">
  <summary class="flex items-center justify-between cursor-pointer p-4 font-bold text-slate-800 hover:bg-slate-50 transition-colors rounded-xl">
    <span class="text-lg">📍 작전 2. 잔반 없는 날(수다날) 아이디어</span>
    <span class="transition-transform duration-300 group-open:rotate-180 text-xl">🔻</span>
  </summary>
  <div class="p-4 pt-0 text-sm text-slate-700 mt-2 border-t border-slate-100 bg-slate-50 rounded-b-xl flex items-start gap-2">
    <span class="text-green-600 font-bold">✔️</span> 
    <div>
      야채를 너무 많이 버린다면?<br>
      <span class="text-amber-500 font-bold">👉</span> "식판에 스티커를 받으면, 다음 달에 원하는 메뉴를 특식으로!"
    </div>
  </div>
</details>

<details class="group bg-white rounded-xl shadow-sm border border-slate-200 [&_summary::-webkit-details-marker]:hidden">
  <summary class="flex items-center justify-between cursor-pointer p-4 font-bold text-slate-800 hover:bg-slate-50 transition-colors rounded-xl">
    <span class="text-lg">📍 작전 3. 예산 부족 방어 작전</span>
    <span class="transition-transform duration-300 group-open:rotate-180 text-xl">🔻</span>
  </summary>
  <div class="p-4 pt-0 text-sm text-slate-700 mt-2 border-t border-slate-100 bg-slate-50 rounded-b-xl flex items-start gap-2">
    <span class="text-green-600 font-bold">✔️</span> 
    <div>
      비싼 소고기만 먹을 수 없다면?<br>
      <span class="text-amber-500 font-bold">👉</span> "돼지고기와 두부를 절반씩 섞은 가성비 함박스테이크 개발!"
    </div>
  </div>
</details>

  </div>
</div>

---
layout: center
class: text-center
---

<div class="flex flex-col items-center justify-center w-full h-full">
  <img 
    src="https://e000.bond/vibe/ai-sequence.png" 
    class="max-w-full max-h-[75vh] object-contain rounded-xl shadow-lg border-4 border-slate-700" 
    alt="AI 학습 순서도" 
  />
  
  <h2 class="font-black text-blue-600 text-4xl mt-4">전처리란?</h2>
</div>

---
layout: default
---

# 🤖 미니게임: '급식 배식 로봇' 만들기
<p class="text-slate-600 mb-8 text-center">로봇이 맛있는 급식을 나눠주려면 어떤 과정을 거칠까요? 직접 버튼을 눌러 완성해보세요!</p>

<AiChefRobotGame />

---
layout: default
---

# 🧒 AI 로봇 만들기 퀴즈 대잔치!

<div class="space-y-4 w-full max-w-4xl mx-auto h-[450px] overflow-y-auto pr-4">
  <BasicQuiz 
    question="Q1. [데이터 수집] AI 로봇이 똑똑해지려면 가장 먼저 무엇을 해야 할까요?"
    options="['잠자기', '데이터 모으기', '놀이터 가기']"
    answer="데이터 모으기"
    explanation="밥을 먹어야 힘이 나듯, AI는 데이터를 모아야 똑똑해져요."
  />
  <BasicQuiz 
    question="Q2. [이상치 제거] 고장난 온도계가 잰 '100도' 같은 데이터가 섞여 있으면?"
    options="['예쁘게 포장한다', '무조건 믿는다', '지운다']"
    answer="지운다"
    explanation="이상한 데이터(이상치)를 지워야 AI가 헷갈리지 않아요."
  />
  <BasicQuiz 
    question="Q3. [데이터 전처리] 삐뚤빼뚤한 상자들을 로봇이 보기 좋게 다듬는 과정은?"
    options="['데이터 파괴', '데이터 전처리', '숨바꼭질']"
    answer="데이터 전처리"
    explanation="요리하기 전에 채소를 씻고 써는 것처럼 데이터를 다듬는 것을 전처리라고 해요."
  />
  <BasicQuiz 
    question="Q4. [모델 학습] 깨끗해진 데이터를 보고 로봇 뇌가 스스로 규칙을 찾아내는 과정은?"
    options="['AI 모델 학습', '노래 부르기', '전원 끄기']"
    answer="AI 모델 학습"
    explanation="컴퓨터가 규칙을 배우는 것을 '학습(Learning)'이라고 해요."
  />
</div>

---
layout: default
---

# 🛠️ 3차시: 뚝딱뚝딱! 자율주행 자동차 조립
<p class="text-sm text-slate-600 mb-6">어려운 원리를 배우기 전에, 레고 블록을 맞추듯 직접 자동차를 만들어봐요!</p>

<div class="grid grid-cols-2 gap-6 h-[400px]">
  <div class="bg-slate-900 text-white rounded-xl shadow-lg p-8 flex flex-col justify-center relative overflow-hidden">
    <div class="absolute -right-10 -bottom-10 text-9xl opacity-20">🔧</div>
    <h4 class="font-black text-amber-400 text-2xl mb-6 relative z-10">오늘의 미션</h4>
    <ul class="space-y-4 text-lg relative z-10">
      <li>✔️ 바퀴와 모터 단단하게 연결하기</li>
      <li>✔️ 앞을 보는 초음파 센서(눈) 달아주기</li>
      <li>✔️ 메인보드(두뇌)에 전선 꽂기</li>
    </ul>
    <div class="mt-8 bg-slate-800 p-4 rounded-lg text-center text-sm border border-slate-700 relative z-10">
      "내가 조립한 자동차가 정말 혼자서 움직일까요?"
    </div>
  </div>
  
  <div class="bg-white rounded-xl shadow-lg border border-red-200 overflow-hidden flex flex-col">
    <div class="bg-red-500 text-white font-bold px-6 py-4 text-lg">⚠️ 조립할 때 주의할 점!</div>
    <div class="p-6 flex-1 flex flex-col justify-center space-y-4">
      <div class="flex gap-4">
        <div class="text-2xl">🔌</div>
        <div><b class="text-red-500">빨강 까망 주의:</b> 전선은 색깔에 맞춰서! 반대로 꽂으면 고장나요.</div>
      </div>
      <div class="flex gap-4">
        <div class="text-2xl">👀</div>
        <div><b class="text-blue-500">눈의 방향:</b> 초음파 센서가 땅이나 하늘을 보면 벽을 못 피해요.</div>
      </div>
      <div class="flex gap-4">
        <div class="text-2xl">🖐️</div>
        <div><b class="text-amber-500">손가락 조심:</b> 바퀴가 휙! 돌 수 있으니 배터리는 맨 마지막에!</div>
      </div>
      <div class="mt-6 text-center font-black text-red-600 bg-red-50 py-3 rounded-lg border border-red-100">
        타이머: 20분! 설명서를 보고 짝꿍과 힘을 합치세요!
      </div>
    </div>
  </div>
</div>

---
layout: two-cols
---

# 🚘 자동차는 어떻게 혼자 달릴까?
<p class="text-sm text-slate-600 mb-6">방금 만든 자동차는 어떤 원리로 달리는 걸까요?</p>

<div class="pr-4">
  <div class="bg-white p-2 rounded-xl shadow-sm border border-slate-200 mb-6">
    <iframe width="100%" height="250" src="https://www.youtube.com/embed/6f_joanlON4" frameborder="0" class="rounded-lg" allowfullscreen></iframe>
  </div>

  <div class="bg-amber-50 p-5 rounded-xl border border-amber-200 shadow-sm text-sm text-slate-700 space-y-3">
    <h5 class="font-bold text-amber-800 text-lg mb-2">💡 3가지 핵심 비밀</h5>
    <p>1️⃣ <b>센서:</b> 부착한 자동차의 '눈' (위험 감지)</p>
    <p>2️⃣ <b>SW:</b> 전선을 꽂은 '두뇌' (운전법 학습)</p>
    <p>3️⃣ <b>통신:</b> 멀리서 오는 위험을 아는 '인터넷'</p>
  </div>
</div>

::right::

# 👀 세 가지 마법의 눈 (센서)
<p class="text-sm text-slate-600 mb-6 pt-10 pl-4">자율주행차의 시력은 완벽할까요? 약점을 알아보세요.</p>

<div class="pl-4 space-y-3 text-sm">
  <details class="group bg-white rounded-xl shadow-sm border border-blue-200 [&_summary::-webkit-details-marker]:hidden">
    <summary class="p-3 font-bold text-blue-600 cursor-pointer flex justify-between">
      <span>📷 첫째 눈. 카메라</span> <span class="transition group-open:rotate-180">⬇️</span>
    </summary>
    <div class="p-3 border-t bg-slate-50">
      ✔️ 특징: 신호등 색깔을 구분해요.<br>
      <span class="text-red-500">❌ 약점: 밤이나 안개, 눈부신 햇빛에 약해요.</span>
    </div>
  </details>
  <details class="group bg-white rounded-xl shadow-sm border border-emerald-200 [&_summary::-webkit-details-marker]:hidden">
    <summary class="p-3 font-bold text-emerald-600 cursor-pointer flex justify-between">
      <span>📡 둘째 눈. 레이더</span> <span class="transition group-open:rotate-180">⬇️</span>
    </summary>
    <div class="p-3 border-t bg-slate-50">
      ✔️ 특징: 전파를 쏴서 눈/비가 와도 끄떡없어요!<br>
      <span class="text-red-500">❌ 약점: 쇳덩이는 잘 찾지만, 사람은 잘 못 봐요.</span>
    </div>
  </details>
  <details class="group bg-white rounded-xl shadow-sm border border-red-200 [&_summary::-webkit-details-marker]:hidden">
    <summary class="p-3 font-bold text-red-600 cursor-pointer flex justify-between">
      <span>🔦 셋째 눈. 라이다(LiDAR)</span> <span class="transition group-open:rotate-180">⬇️</span>
    </summary>
    <div class="p-3 border-t bg-slate-50">
      ✔️ 특징: 레이저로 세상을 3D 입체로 스캔해요.<br>
      <span class="text-red-500">❌ 약점: 엄청나게 비싸고, 눈송이가 날리면 고장나요.</span>
    </div>
  </details>
</div>

---
layout: default
---

# 🚨 X-파일: 똑똑한 AI는 왜 사고를 냈을까?
<p class="text-sm text-slate-600 mb-4 text-center font-bold">완벽해 보이는 인공지능도 바보 같은 실수를 합니다. <b class="text-slate-800">왜 기계가 속았는지</b> 탐정이 되어 추리해보세요.</p>

<div class="bg-white border border-slate-300 rounded-xl shadow-md overflow-hidden max-w-4xl mx-auto">
  <div class="bg-[#dc2626] text-white font-bold py-2 px-4 text-center text-lg shadow-sm border-b border-red-700">
    📂 기밀 문서: 자동차 어리둥절 사건 4가지
  </div>
  
  <div class="flex flex-col bg-slate-50">
    
<details class="group bg-white border-b border-slate-200 [&_summary::-webkit-details-marker]:hidden">
  <summary class="flex items-center justify-between cursor-pointer p-4 font-bold text-slate-800 hover:bg-slate-50 transition-colors">
    <span>사건 1. 하얀색 트럭을 향해 전속력으로 돌진!</span>
    <span class="bg-[#64748b] text-white text-xs px-3 py-1 rounded shadow-sm group-open:bg-slate-400">정답 보기 ⬇️</span>
  </summary>
  <div class="p-4 pt-0 text-sm text-[#dc2626] font-bold bg-white">
    <span class="text-amber-500">👉 [카메라의 착각]</span> 너무 화창하고 밝은 날, 카메라는 거대한 하얀색 트럭을 '하얗고 맑은 구름'으로 착각해서 브레이크를 밟지 않았어요.
  </div>
</details>

<details class="group bg-white border-b border-slate-200 [&_summary::-webkit-details-marker]:hidden">
  <summary class="flex items-center justify-between cursor-pointer p-4 font-bold text-slate-800 hover:bg-slate-50 transition-colors">
    <span>사건 2. 아무것도 없는데 끼기기긱! 급브레이크!</span>
    <span class="bg-[#64748b] text-white text-xs px-3 py-1 rounded shadow-sm group-open:bg-slate-400">정답 보기 ⬇️</span>
  </summary>
  <div class="p-4 pt-0 text-sm text-[#dc2626] font-bold bg-white">
    <span class="text-amber-500">👉 [레이더의 헛것 보기]</span> 고가도로 밑에 생긴 시커먼 그림자를 보고, 레이더는 엄청나게 큰 콘크리트 벽이 길을 막고 있다고 착각했어요.
  </div>
</details>

<details class="group bg-white border-b border-slate-200 [&_summary::-webkit-details-marker]:hidden">
  <summary class="flex items-center justify-between cursor-pointer p-4 font-bold text-slate-800 hover:bg-slate-50 transition-colors">
    <span>사건 3. 낙서를 보고 쌩쌩 달려버린 자동차</span>
    <span class="bg-[#64748b] text-white text-xs px-3 py-1 rounded shadow-sm group-open:bg-slate-400">정답 보기 ⬇️</span>
  </summary>
  <div class="p-4 pt-0 text-sm text-[#dc2626] font-bold bg-white">
    <span class="text-amber-500">👉 [AI의 단순함]</span> '멈춤(STOP)' 표지판에 누가 까만 테이프를 붙여서 낙서해놨어요. 우리는 낙서인 줄 알지만, AI는 그걸 '100km로 밟으라는 속도 표지판'으로 잘못 읽었답니다.
  </div>
</details>

<details class="group bg-white [&_summary::-webkit-details-marker]:hidden">
  <summary class="flex items-center justify-between cursor-pointer p-4 font-bold text-slate-800 hover:bg-slate-50 transition-colors">
    <span>사건 4. 아직 굳지도 않은 말랑말랑한 시멘트 길에 풍덩!</span>
    <span class="bg-[#64748b] text-white text-xs px-3 py-1 rounded shadow-sm group-open:bg-slate-400">정답 보기 ⬇️</span>
  </summary>
  <div class="p-4 pt-0 text-sm text-[#dc2626] font-bold bg-white">
    <span class="text-amber-500">👉 [상식 부족]</span> 사람은 공사 표지판을 보면 피하지만, AI는 그런 '사회적 눈치'가 없어요. 그냥 텅 빈 길이라고 밟아버렸죠!
  </div>
</details>

  </div>
</div>

---
layout: default
class: text-center
---

# ⚖️ 2교시: 트롤리 딜레마 (당신의 선택은?)
<p class="text-slate-600 mb-8">차 브레이크가 안 듣습니다. 여러분이 사장님이라면 <b>누구를 구하시겠습니까?</b></p>

<div class="bg-slate-900 text-white rounded-2xl p-8 max-w-3xl mx-auto shadow-2xl relative overflow-hidden">
  <div class="absolute -right-4 -top-4 text-8xl opacity-10">🚨</div>
  <h4 class="text-red-400 font-black text-2xl mb-6">🤔 피할 수 없는 사고의 순간</h4>
  
  <div class="space-y-4 text-left">
    <div class="bg-slate-800 p-4 rounded-xl border border-slate-700 hover:border-red-500 transition-colors cursor-pointer">
      <span class="font-bold text-xl mr-3">A.</span> 그대로 직진! (무단 횡단하는 <b>보행자 5명 다침</b>)
    </div>
    <div class="bg-slate-800 p-4 rounded-xl border border-slate-700 hover:border-amber-500 transition-colors cursor-pointer">
      <span class="font-bold text-xl mr-3">B.</span> 벽에 쾅! (이 차에 타고 있는 <b>운전자 1명 다침</b>)
    </div>
    <div class="bg-slate-800 p-4 rounded-xl border border-slate-700 hover:border-blue-500 transition-colors cursor-pointer">
      <span class="font-bold text-xl mr-3">C.</span> 인도로 돌진! (신호를 잘 지키던 <b>무고한 사람 1명 다침</b>)
    </div>
  </div>
</div>

<div class="mt-8">
  <a href="https://science.seoul.go.kr/RAIM/aiPlaygrnd/list.do?key=2310160006" target="_blank" class="inline-block bg-red-500 hover:bg-red-600 text-white px-8 py-4 rounded-full font-black shadow-lg transition-transform hover:scale-105">
    🎮 직접 체험하기: 트롤리 딜레마 시뮬레이터
  </a>
</div>

---
layout: default
class: text-center
---

# 📢 착한 AI 선언문: 우리의 약속
<p class="text-sm text-slate-600 mb-8 text-center">로봇은 스스로 선택하지 못해요. 로봇을 만드는 인간(여러분)이 윤리적 책임을 져야 합니다.</p>

<div class="bg-white border-2 border-blue-200 rounded-2xl p-8 max-w-4xl mx-auto shadow-xl">
  <h4 class="font-black text-blue-600 text-xl mb-6 text-center border-b pb-4">📝 마지막 임무: 우리의 약속 발표하기</h4>
  
  <ul class="space-y-4 mb-8">
    <li class="flex items-start gap-4">
      <div class="bg-red-500 text-white font-bold px-3 py-1 rounded-lg text-sm shrink-0">Step 1</div>
      <div class="text-slate-700 text-sm pt-1">게임을 해본 결과를 바탕으로, 피할 수 없는 사고가 났을 때 우리의 차는 <b>누구를 먼저 구할지</b> 짝꿍과 의논하세요.</div>
    </li>
    <li class="flex items-start gap-4">
      <div class="bg-blue-500 text-white font-bold px-3 py-1 rounded-lg text-sm shrink-0">Step 2</div>
      <div class="text-slate-700 text-sm pt-1">사람들에게 감동을 주기 위해 <b>ChatGPT</b>의 도움을 받으세요.</div>
    </li>
    <li class="flex items-start gap-4">
      <div class="bg-emerald-500 text-white font-bold px-3 py-1 rounded-lg text-sm shrink-0">Step 3</div>
      <div class="text-slate-700 text-sm w-full">
        아래 문장을 AI에게 입력하세요.<br>
        <div class="bg-slate-100 p-4 rounded-xl border border-slate-200 font-mono text-xs text-slate-600 mt-2 leading-relaxed">
          "나는 자율주행 회사의 사장이야. 우리는 어쩔 수 없는 사고가 났을 때 [ 내가 정한 사람 ]을 먼저 구하기로 약속했어. 사람들에게 감동을 주고 믿음을 줄 수 있는 멋진 윤리 선언문을 300글자로 써줘."
        </div>
      </div>
    </li>
  </ul>

  <div class="bg-blue-50 text-blue-800 font-bold p-4 rounded-xl text-center border border-blue-200">
    🔥 최종 발표: AI가 써준 선언문을 내 말투로 고쳐서 발표하세요!
  </div>

  <div class="mt-16">
  <a href="https://naver.me/5Qsp7zw7" target="_blank" class="inline-block bg-emerald-500 hover:bg-emerald-600 text-white px-10 py-5 rounded-full font-black text-xl shadow-2xl transition-transform hover:scale-110 animate-pulse">
    🚨 설문 꼭 참여해주세요! 🚨
  </a>
  </div>
</div>

---
layout: center
class: text-center
---

<div class="text-9xl mb-8 animate-bounce">👏🏽</div>

<h1 class="font-black text-4xl text-slate-800 mb-6 leading-tight">
  건강한 식단부터 비밀 장부 추리,<br>따뜻한 마음을 가진 AI 윤리까지!
</h1>

<h2 class="font-bold text-2xl text-blue-600">
  급식 특공대 여러분, 진심으로 수고하셨습니다!
</h2>

<div class="mt-16">
  <a href="https://naver.me/5Qsp7zw7" target="_blank" class="inline-block bg-emerald-500 hover:bg-emerald-600 text-white px-10 py-5 rounded-full font-black text-xl shadow-2xl transition-transform hover:scale-110 animate-pulse">
    🚨 설문 꼭 참여해주세요! 🚨
  </a>
</div>