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

# 🚀 AI 창업 탐험대: 내가 만드는 미래 기업
중학교 1학년 ~ 중학교 2학년 대상 (총 3차시 / 270분)

---
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-3 border-r border-slate-200 w-[15%]">구분</th>
      <th class="p-3 border-r border-slate-200 w-[15%]">교시</th>
      <th class="p-3 border-r border-slate-200 w-[55%]">학습 주제</th>
      <th class="p-3 border-r border-slate-200 w-[15%]">소요시간</th>
    </tr>
  </thead>
  <tbody>
    <tr class="bg-slate-800 text-white border-b border-slate-200">
      <td class="p-3 border-r border-slate-600 font-bold align-middle text-center">Prologue</td>
      <td class="p-3 border-r border-slate-600 text-center">오프닝</td>
      <td class="p-3 border-r border-slate-600 font-bold text-left text-yellow-400">🪄 AI 프롬프트 마법 기계 (우리는 왜 질문을 잘해야 할까?)</td>
      <td class="p-3 text-center">10분</td>
    </tr>
    <tr class="bg-blue-50 border-b border-slate-200">
      <td rowspan="4" class="p-3 border-r border-slate-200 font-bold align-middle text-center border-b-2 border-slate-300">1차시<br>(AI 사장님)</td>
      <td class="p-3 border-r border-slate-200 text-center">1교시</td>
      <td class="p-3 border-r border-slate-200 font-bold text-left">가게 오픈! 절대 규칙과 첫 질문 던지기</td>
      <td class="p-3 text-center">10분</td>
    </tr>
    <tr class="bg-blue-50 border-b border-slate-200">
      <td class="p-3 border-r border-slate-200 text-center">1교시</td>
      <td class="p-3 border-r border-slate-200 font-bold text-left">AI 사장님 훈련시키기 (숨은 함정 피하기)</td>
      <td class="p-3 text-center">30분</td>
    </tr>
    <tr class="bg-blue-50 border-b border-slate-200">
      <td class="p-3 border-r border-slate-200 text-center">2교시</td>
      <td class="p-3 border-r border-slate-200 font-bold text-left">바이브 코딩 1: 숫자와 영어로 로고 그리기</td>
      <td class="p-3 text-center">20분</td>
    </tr>
    <tr class="bg-blue-50 border-b-2 border-slate-300">
      <td class="p-3 border-r border-slate-200 text-center">2교시</td>
      <td class="p-3 border-r border-slate-200 font-bold text-left">바이브 코딩 2: 우리 가게 멋진 간판 만들기</td>
      <td class="p-3 text-center">25분</td>
    </tr>
    <tr class="bg-green-50 border-b border-slate-200">
      <td rowspan="9" class="p-3 border-r border-slate-200 font-bold align-middle text-center border-b-2 border-slate-300">2차시<br>(데이터 탐정)</td>
      <td class="p-3 border-r border-slate-200 text-center">정리</td>
      <td class="p-3 border-r border-slate-200 font-bold text-left text-blue-600">복습 퀴즈 및 데이터의 필요성 이해하기</td>
      <td class="p-3 text-center">15분</td>
    </tr>
    <tr class="bg-green-50 border-b border-slate-200">
      <td class="p-3 border-r border-slate-200 text-center">1교시</td>
      <td class="p-3 border-r border-slate-200 font-bold text-left">가게에 도둑이? 비밀 장부 다운로드</td>
      <td class="p-3 text-center">10분</td>
    </tr>
    <tr class="bg-green-50 border-b border-slate-200">
      <td class="p-3 border-r border-slate-200 text-center">1교시</td>
      <td class="p-3 border-r border-slate-200 font-bold text-left">매의 눈 관찰: 어이없는 실수 찾기</td>
      <td class="p-3 text-center">15분</td>
    </tr>
    <tr class="bg-green-50 border-b border-slate-200">
      <td class="p-3 border-r border-slate-200 text-center">1교시</td>
      <td class="p-3 border-r border-slate-200 font-bold text-left">명탐정 추리: 말이 안 되는 가짜 손님 찾기</td>
      <td class="p-3 text-center">20분</td>
    </tr>
    <tr class="bg-green-50 border-b border-slate-200">
      <td class="p-3 border-r border-slate-200 text-center">1교시</td>
      <td class="p-3 border-r border-slate-200 font-bold text-left text-green-700">CODAP 넌 누구냐?! (기초)</td>
      <td class="p-3 text-center">10분</td>
    </tr>
    <tr class="bg-green-50 border-b border-slate-200">
      <td class="p-3 border-r border-slate-200 text-center">2교시</td>
      <td class="p-3 border-r border-slate-200 font-bold text-left">CODAP: 그래프로 범인 몽타주 그리기</td>
      <td class="p-3 text-center">15분</td>
    </tr>
    <tr class="bg-green-50 border-b border-slate-200">
      <td class="p-3 border-r border-slate-200 text-center">2교시</td>
      <td class="p-3 border-r border-slate-200 font-bold text-left text-green-700">심화 미션: 위기의 가게를 구해라!</td>
      <td class="p-3 text-center">10분</td>
    </tr>
    <tr class="bg-green-50 border-b border-slate-200">
      <td class="p-3 border-r border-slate-200 text-center">2교시</td>
      <td class="p-3 border-r border-slate-200 font-bold text-left text-red-500">워드클라우드: 단어로 읽는 손님들의 속마음</td>
      <td class="p-3 text-center">15분</td>
    </tr>
    <tr class="bg-green-50 border-b-2 border-slate-300">
      <td class="p-3 border-r border-slate-200 text-center">2교시</td>
      <td class="p-3 border-r border-slate-200 font-bold text-left">사장님의 결단 (작전 변경 발표하기)</td>
      <td class="p-3 text-center">15분</td>
    </tr>
    <tr class="bg-yellow-50 border-b border-slate-200">
      <td rowspan="5" class="p-3 border-r border-slate-200 font-bold align-middle text-center">3차시<br>(자율주행과<br>착한 AI)</td>
      <td class="p-3 border-r border-slate-200 text-center">1교시</td>
      <td class="p-3 border-r border-slate-200 font-bold text-left">뚝딱뚝딱! 자율주행 자동차 조립하기</td>
      <td class="p-3 text-center">20분</td>
    </tr>
    <tr class="bg-yellow-50 border-b border-slate-200">
      <td class="p-3 border-r border-slate-200 text-center">1교시</td>
      <td class="p-3 border-r border-slate-200 font-bold text-left">자동차는 어떻게 혼자 달릴까? (센서 삼총사)</td>
      <td class="p-3 text-center">15분</td>
    </tr>
    <tr class="bg-yellow-50 border-b border-slate-200">
      <td class="p-3 border-r border-slate-200 text-center">1교시</td>
      <td class="p-3 border-r border-slate-200 font-bold text-left">X-파일: 똑똑한 AI는 왜 사고를 냈을까?</td>
      <td class="p-3 text-center">10분</td>
    </tr>
    <tr class="bg-yellow-50 border-b border-slate-200">
      <td class="p-3 border-r border-slate-200 text-center">2교시</td>
      <td class="p-3 border-r border-slate-200 font-bold text-left">트롤리 딜레마 게임: 당신의 선택은?</td>
      <td class="p-3 text-center">20분</td>
    </tr>
    <tr class="bg-yellow-50">
      <td class="p-3 border-r border-slate-200 text-center">2교시</td>
      <td class="p-3 border-r border-slate-200 font-bold text-left">착한 AI 선언문: 우리 회사의 약속 발표</td>
      <td class="p-3 text-center">25분</td>
    </tr>
  </tbody>
</table>
</div>

---

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

<p class="mb-6 text-lg">
  여러분은 오늘부터 진짜 
  <span class="bg-yellow-400 text-black font-black px-3 py-1 rounded-lg shadow-sm align-middle mx-1">
    🍳 음식점 사장님
  </span> 
  입니다! 하지만 다음 <b>[세 가지 절대 규칙]</b>을 지켜야 합니다.
</p>

<div class="bg-slate-800 text-white rounded-xl shadow-lg mb-6 p-6 flex justify-around items-center text-base border-2 border-slate-700">
  <div>🎯 <b>목표:</b> 한 달에 순수하게 내 통장에 <b class="text-yellow-400">300만 원</b> 남기기</div>
  <div>📐 <b>크기:</b> 동네의 아담한 <b class="text-yellow-400">15평</b> 짜리 가게</div>
  <div>🪑 <b>의자:</b> <b class="text-yellow-400">4명이 앉는 테이블 딱 4개</b> (한 번에 16명만 식사 가능)</div>
</div>

<div class="grid grid-cols-2 gap-6 mt-4">
  <div class="border-2 border-red-500 rounded-lg overflow-hidden shadow-sm">
    <div class="bg-red-500 text-white font-bold py-2 px-4">❌ 바보 같은 질문 예시 1</div>
    <div class="p-4 bg-red-50 text-[13px]">
      <p class="italic text-slate-700 mb-3">"AI야, 15평 떡볶이집을 열 건데, 테이블은 4개야. 떡볶이 1인분에 3천원씩 팔아서 한 달에 300만 원 버는 계획을 세워줘!"</p>
      <hr class="border-red-200 my-2">
      <p class="text-red-600 font-bold mb-0">👉 AI의 거짓말: AI는 "한 달에 300만원을 벌려면, 손님이 5분 만에 먹고 나가야 합니다!"라고 로봇 같은 계산만 해줍니다.</p>
    </div>
  </div>
  <div class="border-2 border-orange-400 rounded-lg overflow-hidden shadow-sm">
    <div class="bg-orange-400 text-white font-bold py-2 px-4">❌ 바보 같은 질문 예시 2</div>
    <div class="p-4 bg-orange-50 text-[13px]">
      <p class="italic text-slate-700 mb-3">"테이블이 꽉 차면 전부 배달로 팔면 되지! 배달비나 세금은 안 낼 거니까 뺀 상태로 300만원 버는 법 알려줘."</p>
      <hr class="border-orange-200 my-2">
      <p class="text-red-600 font-bold mb-0">👉 놓친 점: 배달 앱 수수료, 안 팔려서 상한 재료 버리는 값, 알바생 월급을 하나도 생각하지 않았어요!</p>
    </div>
  </div>
</div>

<div class="border-2 border-blue-500 rounded-lg overflow-hidden shadow-md mt-6">
  <div class="bg-blue-500 text-white font-bold py-2 px-4">
    📝 미션: AI에게 묻기 전, 우리 가게의 6가지 비밀 무기 정하기!
  </div>
  <div class="p-5 bg-blue-50 text-sm">
    <p class="text-slate-600 font-bold mb-4 text-center">조원들과 함께 아래 내용을 먼저 정해보세요.</p>
    <div class="grid grid-cols-3 gap-3 text-center font-bold px-4">
      <div class="bg-white border border-slate-300 rounded-lg py-2 shadow-sm text-slate-800">📍 가게 위치 (어느 동네?)</div>
      <div class="bg-white border border-slate-300 rounded-lg py-2 shadow-sm text-slate-800">⏰ 영업 시간 (몇 시까지?)</div>
      <div class="bg-white border border-slate-300 rounded-lg py-2 shadow-sm text-slate-800">🍔 주력 메뉴 (무얼 팔까?)</div>
      <div class="bg-white border border-slate-300 rounded-lg py-2 shadow-sm text-slate-800">🙋 알바생 수 (몇 명?)</div>
      <div class="bg-white border border-slate-300 rounded-lg py-2 shadow-sm text-slate-800">🛌 쉬는 날 (언제 쉴까?)</div>
      <div class="bg-white border border-slate-300 rounded-lg py-2 shadow-sm text-slate-800">📢 홍보 방법 (당근마켓?)</div>
    </div>
    <hr class="border-blue-200 my-4">
    <p class="mb-0 text-blue-700 font-black text-center text-base">
      👉 위 6가지 정보와 [절대 규칙]을 모두 섞어서 ChatGPT에게 첫 번째 사업 계획서를 써달라고 명령하세요!
    </p>
  </div>
</div>

---

## 🥊 AI 훈련시키기: Round 1 (숨은 돈의 비밀)

AI가 멋진 계획서를 줬나요? 하지만 현실은 그렇게 만만하지 않아요. AI에게 호통을 쳐보세요!

<div class="border border-slate-300 rounded-t-lg overflow-hidden mt-6 shadow-sm">
  <div class="bg-slate-800 text-white font-bold px-4 py-3 text-lg">
    🚨 1차 함정: 알바생 월급과 쓰레기통
  </div>
</div>

<HintAccordion badgeText="⬇️" badgeClass="bg-blue-100 text-blue-600 font-bold" contentClass="bg-white border-2 border-blue-200 mt-1 shadow-sm p-5 rounded-b-lg">
  <template #title>
    <span class="text-blue-700 font-bold text-lg">🔍 함정 1. 알바생 형/누나들의 월급</span>
  </template>
  <template #content>
    <div class="text-slate-700 text-base leading-relaxed">
      아르바이트생에게 돈을 적게 주면 아무도 우리 가게에서 일하지 않아요. 열심히 일하면 '주휴수당'이라는 보너스도 줘야 해요.<br>
      <strong class="text-red-500 mt-2 block">👉 AI에게 "알바생 월급을 진짜 현실처럼 1.3배 더 비싸게 계산해서 다시 계획 짜!"라고 명령하세요.</strong>
    </div>
  </template>
</HintAccordion>

<HintAccordion badgeText="⬇️" badgeClass="bg-blue-100 text-blue-600 font-bold" contentClass="bg-white border-2 border-blue-200 mt-1 shadow-sm p-5 rounded-b-lg">
  <template #title>
    <span class="text-blue-700 font-bold text-lg">🔍 함정 2. 버려지는 음식물 쓰레기</span>
  </template>
  <template #content>
    <div class="text-slate-700 text-base leading-relaxed">
      재료를 사 오면 100% 다 요리해서 팔 수 있을까요? 상한 채소, 땅에 떨어진 떡 등 최소 <b>20%는 버려야 합니다.</b><br>
      <strong class="text-red-500 mt-2 block">👉 AI에게 "재료비에 '버려지는 재료 20%' 비용을 추가해서 이익을 깎아버려!"라고 압박하세요.</strong>
    </div>
  </template>
</HintAccordion>

---

## 🥊 AI 훈련시키기: Round 2 (좁은 매장의 슬픔)

우리 가게는 테이블이 4개밖에 없습니다. 손님들이 안 나가면 어떻게 하죠?

<div class="border border-slate-300 rounded-t-lg overflow-hidden mt-6 shadow-sm">
  <div class="bg-slate-800 text-white font-bold px-4 py-3 text-lg">
    🚨 2차 함정: 테이블과 전기세
  </div>
</div>

<HintAccordion badgeText="⬇️" badgeClass="bg-blue-100 text-blue-600 font-bold" contentClass="bg-white border-2 border-blue-200 mt-1 shadow-sm p-5 rounded-b-lg">
  <template #title>
    <span class="text-blue-700 font-bold text-lg">🔍 함정 3. 게임하며 안 나가는 손님들</span>
  </template>
  <template #content>
    <div class="text-slate-700 text-base leading-relaxed">
      테이블이 딱 4개뿐인데, 손님들이 밥을 먹고 2시간 동안 폰 게임을 하면? 밖에서 기다리던 손님들은 화내며 집에 갑니다.<br>
      <strong class="text-red-500 mt-2 block">👉 AI에게 "테이블이 하루 종일 꽉 차지 않는다고 가정하고, 손님이 없을 때 돈을 벌 수 있는 '세트 메뉴'를 만들어봐!"라고 명령하세요.</strong>
    </div>
  </template>
</HintAccordion>

<HintAccordion badgeText="⬇️" badgeClass="bg-blue-100 text-blue-600 font-bold" contentClass="bg-white border-2 border-blue-200 mt-1 shadow-sm p-5 rounded-b-lg">
  <template #title>
    <span class="text-blue-700 font-bold text-lg">🔍 함정 4. 숨만 쉬어도 나가는 돈 (월세/전기세)</span>
  </template>
  <template #content>
    <div class="text-slate-700 text-base leading-relaxed">
      장사가 안 돼도 한 달에 한 번씩 건물 주인에게 내는 월세와 에어컨/냉장고 전기세는 무조건 빠져나갑니다.<br>
      <strong class="text-red-500 mt-2 block">👉 AI에게 "한 달 월세 150만 원, 전기/수도세 50만 원을 매달 무조건 나가는 돈으로 빼고 다시 계산해!"라고 명령하세요.</strong>
    </div>
  </template>
</HintAccordion>

---

## 🥊 AI 훈련시키기: Round 3 (최종 위기)

드디어 완벽해 보이나요? 마지막 위기가 찾아왔습니다!

<div class="border border-slate-300 rounded-t-lg overflow-hidden mt-6 shadow-sm">
  <div class="bg-slate-800 text-red-400 font-bold px-4 py-3 text-lg">
    🚨 최종 함정: 배달의 배신과 무서운 옆집
  </div>
</div>

<HintAccordion badgeText="⬇️" badgeClass="bg-blue-100 text-blue-600 font-bold" contentClass="bg-white border-2 border-blue-200 mt-1 shadow-sm p-5 rounded-b-lg">
  <template #title>
    <span class="text-blue-700 font-bold text-lg">🔍 함정 5. 배달앱의 수수료 폭탄</span>
  </template>
  <template #content>
    <div class="text-slate-700 text-base leading-relaxed">
      오토바이 배달을 시작했나요? 배달앱 회사에 내는 수수료, 오토바이 배달 기사님께 주는 돈, 포장 박스 값을 빼면 남는 게 거의 없어요.<br>
      <strong class="text-red-500 mt-2 block">👉 AI에게 "배달로 번 돈의 30%는 배달비로 날아간다고 치고 내 통장에 얼마 남는지 검사해봐!"라고 지시하세요.</strong>
    </div>
  </template>
</HintAccordion>

<HintAccordion badgeText="⬇️" badgeClass="bg-blue-100 text-blue-600 font-bold" contentClass="bg-white border-2 border-blue-200 mt-1 shadow-sm p-5 rounded-b-lg">
  <template #title>
    <span class="text-blue-700 font-bold text-lg">🔍 함정 6. 옆집에 반값 가게 오픈!</span>
  </template>
  <template #content>
    <div class="text-slate-700 text-base leading-relaxed">
      우리 가게 바로 맞은편에 떡볶이를 무려 '반값'에 파는 프랜차이즈가 문을 열었습니다. 손님들이 다 빼앗기게 생겼어요.<br>
      <strong class="text-red-500 mt-2 block">👉 AI에게 "가격을 내리지 않고도 우리 가게에 손님이 올 수밖에 없는 특별한 '이벤트'나 '인테리어 비법'을 추가해!"라고 지시하세요.</strong>
    </div>
  </template>
</HintAccordion>

---

## 🎨 2교시: 바이브 코딩 (숫자로 그리는 마법)

AI 사장님 훈련이 끝났다면, 이제 AI에게 코드를 짜달라고 해서 우리 가게 로고를 만듭니다!

<div class="grid grid-cols-2 gap-6 mt-8">
  <div class="bg-blue-50 p-6 rounded-xl shadow-sm border-t-4 border-blue-500">
    <h5 class="font-black text-blue-600 text-xl mb-3">💡 Vibe Coding이란?</h5>
    <p class="text-slate-700 text-base leading-relaxed">
      "그냥 귀엽게 그려줘"라고 말하면 컴퓨터는 못 알아들어요.<br><br>
      대신, <b>"거북아, 앞으로 50만큼 가고 90도 꺾어서 선 굵기 3으로 그려줘"</b>처럼 명확한 숫자(코드)로 AI를 통제해서 그림을 그리는 방법입니다.
    </p>
  </div>
  
  <div class="bg-slate-800 text-white p-6 rounded-xl shadow-sm border-t-4 border-yellow-400">
    <h5 class="font-black text-yellow-400 text-xl mb-3">🛠️ 실습 방법</h5>
    <div class="space-y-3 text-base text-slate-200">
      <p>1. 다음 장에 있는 파이썬(Python) 코드를 복사하세요.</p>
      <p>2. 왼쪽 <b>Trinket 화면</b>에 붙여넣고 재생(▶) 버튼을 누르세요.</p>
      <p>3. 코드 안의 색깔(color), 숫자(range, circle)를 바꿔가며 나만의 로고를 만드세요!</p>
    </div>
  </div>
</div>

---
layout: default
---

## 💻 내 마음대로 바꾸는 로고 디자인 3선

<script setup>
// Slide 7
</script>

<div class="grid grid-cols-2 gap-6 mt-4 h-[460px]">

  <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="100%" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
  </div>

  <div class="overflow-y-auto pr-2 space-y-4 custom-scrollbar">

<CodeCard title="디자인 A. 빙글빙글 만다라" color="#3b82f6">

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

for i in range(12): # 12번 반복해서 그리기
    t.color("#FF6347") # 토마토 빨간색
    t.circle(50)       # 크기가 50인 동그라미
    t.left(30)         # 30도씩 왼쪽으로 돌기
t.hideturtle()
```

</CodeCard>

<CodeCard title="디자인 B. 점점 커지는 회오리" color="#10b981">

```python
import turtle
t = turtle.Turtle()
t.speed(0)
t.pensize(2)

colors = ["#1E90FF", "#00BFFF"] # 시원한 파란색 2개
for i in range(40):
    t.color(colors[i % 2])
    t.circle(i * 3, 180) # 점점 커지는 반원 그리기
    t.right(10)          # 10도씩 오른쪽으로 꺾기
t.hideturtle()
```

</CodeCard>

<CodeCard title="디자인 C. 예쁜 꽃송이" color="#ef4444">

```python
import turtle
t = turtle.Turtle()
t.speed(0)
t.pensize(2)

colors = ['#FFD700', '#FFA500', '#32CD32'] # 노랑, 주황, 초록
for i in range(60):
    t.color(colors[i % 3])
    t.forward(i * 3) # 앞으로 조금씩 길게 가기
    t.left(91)       # 90도보다 아주 살짝 크게 돌기
t.hideturtle()
```

</CodeCard>

  </div>

</div>

---
layout: default
---

## 🏪 우리 가게 간판 그리기 (좌표 마법)

<script setup>
// Slide 8
</script>

<div class="grid grid-cols-2 gap-6 mt-4 h-[460px]">

  <div class="h-full flex flex-col gap-3">
    <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="100%" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
    </div>
    <div class="p-3 bg-yellow-50 border-2 border-yellow-400 text-yellow-800 rounded-xl text-[13px] font-bold shadow-sm">
      🔥 미션: <code>t.goto(x, y)</code> 괄호 안 숫자를 바꾸면 글씨가 움직여요! 나만의 가게 이름으로 바꿔보세요.
    </div>
  </div>

  <div class="overflow-y-auto pr-2 space-y-4 custom-scrollbar">

<CodeCard title="디자인 A. 클래식 원목 간판" color="#06b6d4">

```python
import turtle

def draw_sign():
    screen = turtle.Screen()
    screen.setup(width=600, height=400)
    screen.bgcolor("#FFFACD")  # 레몬 크림색 배경

    t = turtle.Turtle()
    t.speed(0) 
    t.hideturtle() 

    # 1. 간판 테두리 그리기
    t.penup()
    t.goto(-250, 150) # x=-250, y=150 위치로 이동
    t.pendown()
    t.color("#8B4513")  # 진한 갈색
    t.pensize(5)
    
    for _ in range(2):
        t.forward(500)
        t.right(90)
        t.forward(300)
        t.right(90)
        
    # 2. 메인 글씨 쓰기
    t.penup()
    t.goto(0, 30)
    t.color("black")
    t.write("거북이 떡볶이", align="center", font=("Malgun Gothic", 40, "bold"))

    # 3. 작은 영어 글씨 쓰기
    t.goto(0, -20)
    t.color("#8B4513")
    t.write("TURTLE TTEOKBOKKI", align="center", font=("Arial", 20, "bold"))

    # 4. 밑에 슬로건 쓰기
    t.goto(0, -60)
    t.color("#696969")
    t.write("맵지만 멈출 수 없는 맛!", align="center", font=("Malgun Gothic", 15, "normal"))

draw_sign()
```

</CodeCard>

<CodeCard title="디자인 B. 밤에 빛나는 네온 간판" color="#334155">

```python
import turtle
t = turtle.Turtle()
t.speed(0); t.hideturtle()
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("#FF00FF") # 핑크색 네온
t.write("우주 최강 아이스크림", align="center", font=("Courier", 30, "bold"))

t.goto(0, -40)
t.color("#00FFFF")
t.write("OPEN 24 HOURS", align="center", font=("Courier", 15, "normal"))
```

</CodeCard>

  </div>

</div>

---

## 💡 2차시 시작 전! 1차시 복습 OX 퀴즈

<div class="mt-6 space-y-4">
  <BasicQuiz 
    question="Q1. AI 사장님에게 '한 달에 300만원 벌게 해줘'라고 아주 짧게 질문해도 알아서 완벽한 계획을 세워준다?" 
    options="['O', 'X']" 
    answer="X" 
    explanation="가게 크기, 테이블 수 등 구체적인 조건을 줘야 속지 않아요. 조건을 주지 않으면 로봇처럼 비현실적인 계산만 해버려요." 
  />

  <BasicQuiz 
    question="Q2. 테이블이 4개뿐인 우리 가게에서, 손님들이 밥을 먹고 2시간 동안 폰 게임을 하면 가게 매출이 쑥쑥 오른다?" 
    options="['O', 'X']" 
    answer="X" 
    explanation="밖에서 기다리는 손님들이 화를 내고 돌아가버려서 돈을 벌 수 없어요. 자리가 없어서 다른 손님을 못 받게 되니 손해를 봅니다." 
  />

  <BasicQuiz 
    question="Q3. 컴퓨터에게 '거북아, 앞으로 50만큼 가고 90도 꺾어줘'처럼 명확한 숫자 코드로 명령해 그림을 그리는 것을 '바이브 코딩'이라고 한다?" 
    options="['O', 'X']" 
    answer="O" 
    explanation="파이썬 터틀과 숫자를 이용해 우리가 직접 멋진 간판을 만들었죠! 코드로 기계를 통제해서 그리는 마법을 바이브 코딩이라고 해요." 
  />
</div>

---

## 🌿 민초청국장 선호도 조사

<script setup>
import { ref } from 'vue'
const mincho_score = ref(null)
</script>

우리가 좋아하는 것, 싫어하는 것도 훌륭한 데이터가 될 수 있어요!<br>
여러분의 **'민초청국장' 선호도**는 1점부터 10점 중 몇 점인가요?

<div class="flex justify-center gap-3 mt-8 flex-wrap">
  <button v-for="i in 10" :key="'mincho'+i" 
          class="w-16 h-16 text-xl font-black rounded-xl border-4 transition-all duration-200 transform hover:scale-105 active:scale-95"
          :class="mincho_score === i ? 'bg-green-500 text-white border-green-500 shadow-green-200 shadow-lg' : 'bg-white text-green-600 border-green-200 hover:bg-green-50'"
          @click="mincho_score = i">
    {{ i }}점
  </button>
</div>

<div v-if="mincho_score" class="bg-blue-50 border-2 border-blue-200 text-blue-800 p-6 rounded-xl mt-8 text-center text-xl shadow-md animate-bounce">
  내가 선택한 점수: <b>{{ mincho_score }}점!</b> <br>이것도 아주 훌륭한 <strong>'데이터'</strong>입니다.
</div>

---

## 📊 성공한 음식점이 되려면 어떤 데이터가 필요할까?

<p class="text-slate-600 text-lg mb-6">대박 맛집 사장님이 되기 위해 우리가 꼼꼼하게 모아야 할 '숫자'들을 힌트를 보고 추리해 봅시다!</p>

<div class="grid grid-cols-3 gap-6">
  <div class="border border-blue-200 rounded-xl overflow-hidden shadow-sm">
    <div class="bg-blue-500 text-white font-bold p-3 text-lg text-center">🧑‍🤝‍🧑 손님에 대한 궁금증</div>
    <div class="p-5 bg-white text-sm">
      <ul class="space-y-4 list-none pl-0">
        <li>🤔 "우리 가게는 몇 시에 젤 바쁘지?"<br> <span class="text-blue-600 font-bold block mt-1">👉 [ ⏰ _ _ 시간대 ]</span></li>
        <li>🤔 "학생이 많을까, 어른이 많을까?"<br> <span class="text-blue-600 font-bold block mt-1">👉 [ 📊 손님 _ _ _ ]</span></li>
        <li>🤔 "어제 온 손님이 오늘 또 왔을까?"<br> <span class="text-blue-600 font-bold block mt-1">👉 [ 🔁 _ _ _ _ ]</span></li>
      </ul>
    </div>
  </div>

  <div class="border border-green-200 rounded-xl overflow-hidden shadow-sm">
    <div class="bg-green-500 text-white font-bold p-3 text-lg text-center">🍔 메뉴에 대한 궁금증</div>
    <div class="p-5 bg-white text-sm">
      <ul class="space-y-4 list-none pl-0">
        <li>🤔 "가장 많이 팔린 메뉴 1등은?"<br> <span class="text-green-600 font-bold block mt-1">👉 [ 🏆 인기 _ _ _ _ ]</span></li>
        <li>🤔 "손님들이 자꾸 남기는 반찬은?"<br> <span class="text-green-600 font-bold block mt-1">👉 [ 🗑️ _ _ 비율 ]</span></li>
        <li>🤔 "주문받고 요리 완성까지의 시간은?"<br> <span class="text-green-600 font-bold block mt-1">👉 [ ⏱️ 평균 _ _ 시간 ]</span></li>
      </ul>
    </div>
  </div>

  <div class="border border-red-200 rounded-xl overflow-hidden shadow-sm">
    <div class="bg-red-500 text-white font-bold p-3 text-lg text-center">💰 돈에 대한 궁금증</div>
    <div class="p-5 bg-white text-sm">
      <ul class="space-y-4 list-none pl-0">
        <li>🤔 "오늘 카드로 긁힌 전체 금액은?"<br> <span class="text-red-600 font-bold block mt-1">👉 [ 💳 총 _ _ _ ]</span></li>
        <li>🤔 "배달비 다 떼고 내 통장에 남는 돈은?"<br> <span class="text-red-600 font-bold block mt-1">👉 [ 💵 _ _ _ ]</span></li>
        <li>🤔 "문 닫아도 매달 건물주에게 내는 돈은?"<br> <span class="text-red-600 font-bold block mt-1">👉 [ 🏢 _ _ ]</span></li>
      </ul>
    </div>
  </div>
</div>

<div class="bg-yellow-50 border-2 border-yellow-300 text-yellow-800 font-bold p-4 rounded-xl mt-6 text-center shadow-sm">
  💡 정답을 조원들과 함께 상상해 보세요! 이런 일상적인 질문들을 '숫자'로 바꾼 것이 바로 데이터입니다.
</div>

---
layout: center
class: bg-slate-900 text-white
---

<div class="text-center mb-3 mt-2">
  <h2 class="text-cyan-400 font-bold text-2xl mb-1">👾 긴급 상황: 우리 가게 AI가 미쳤어요!</h2>
  <p class="text-slate-400 text-xs">가짜 데이터(이상치)를 안 지우면, AI는 사장님에게 파산할 조언을 합니다.</p>
</div>

<AiChefGameMiddle />

---

## 📥 2차시: 오픈 6개월, 가게에 도둑이 들었다?

<script setup>
const headers = ["번호(ID)", "날짜", "최고기온(℃)", "방문객수(명)", "총매출액(원)", "배달비(원)", "순이익(원)", "비고"];
const dataRows = [
  "1,2026-05-01,22,140,480000,30000,200000,정상",
  "2,2026-05-02,24,155,510000,40000,220000,정상",
  "3,2026-05-03,26,160,540000,45000,230000,정상",
  "4,2026-05-04,25,145,500000,35000,210000,정상",
  "5,2026-05-05,24,150,50000000,30000,49000000,오타",
  "6,2026-05-06,23,130,450000,20000,190000,정상",
  "7,2026-05-07,24,135,470000,25000,200000,정상",
  "8,2026-05-08,28,180,600000,50000,280000,정상",
  "9,2026-05-09,29,300,0,0,-150000,고장",
  "10,2026-05-10,27,165,550000,40000,240000,정상",
  "11,2026-05-11,25,140,490000,35000,210000,정상",
  "12,2026-05-12,23,130,450000,25000,190000,정상",
  "13,2026-05-13,22,125,430000,20000,180000,정상",
  "14,2026-05-14,26,1000,3500000,300000,2000000,가짜손님",
  "15,2026-05-15,28,170,580000,55000,260000,정상",
  "16,2026-05-16,30,190,650000,60000,300000,정상",
  "17,2026-05-17,27,150,500000,35000,220000,정상",
  "18,2026-05-18,25,145,480000,30000,200000,정상",
  "19,2026-05-19,100,140,470000,25000,190000,센서오류",
  "20,2026-05-20,26,155,520000,40000,230000,정상",
  "21,2026-05-21,28,160,550000,45000,240000,정상",
  "22,2026-05-22,29,170,580000,50000,260000,정상",
  "23,2026-05-23,28,250,900000,600000,50000,배달비폭탄",
  "24,2026-05-24,25,135,460000,25000,190000,정상",
  "25,2026-05-25,24,130,440000,20000,180000,정상",
  "26,2026-05-26,25,145,500000,35000,210000,정상",
  "27,2026-05-27,27,150,520000,40000,230000,정상",
  "28,2026-05-28,29,165,560000,45000,250000,정상",
  "29,2026-05-29,30,20,70000,5000,-100000,옆집반값",
  "30,2026-05-30,28,155,530000,40000,240000,정상",
  "31,2026-05-31,26,145,490000,35000,210000,정상",
  "32,2026-06-01,25,150,50000000,30000,49000000,오타2",
  "33,2026-06-02,27,160,540000,45000,240000,정상",
  "34,2026-06-03,28,170,580000,50000,260000,정상",
  "35,2026-06-04,26,140,480000,35000,200000,정상",
  "36,2026-06-05,24,130,450000,25000,190000,정상",
  "37,2026-06-06,23,125,430000,20000,180000,정상",
  "38,2026-06-07,-40,120,400000,15000,160000,센서오류2",
  "39,2026-06-08,26,150,510000,35000,220000,정상",
  "40,2026-06-09,28,165,560000,45000,250000,정상",
  "41,2026-06-10,27,280,0,0,-150000,고장2",
  "42,2026-06-11,25,145,490000,30000,210000,정상",
  "43,2026-06-12,24,135,460000,25000,190000,정상",
  "44,2026-06-13,26,155,530000,40000,240000,정상",
  "45,2026-06-14,29,1200,4200000,400000,2500000,가짜손님2",
  "46,2026-06-15,30,180,620000,55000,280000,정상",
  "47,2026-06-16,28,160,550000,45000,240000,정상",
  "48,2026-06-17,29,280,1100000,750000,40000,배달비폭탄2",
  "49,2026-06-18,27,150,510000,35000,220000,정상",
  "50,2026-06-19,28,15,50000,5000,-120000,옆집반값2"
];
</script>

열심히 장사를 했는데 통장에 돈이 텅텅 비었습니다. 누군가 장부를 조작했거나 컴퓨터가 고장 난 것 같아요!

<div class="bg-slate-50 border border-slate-200 rounded-xl shadow-md p-8 text-center mt-8 max-w-3xl mx-auto">
  <h4 class="font-black text-2xl mb-6 text-red-600">🚨 긴급 입수: 우리 가게 50일 치 영업 비밀 장부</h4>
  
  <div class="bg-yellow-50 border border-yellow-200 p-5 rounded-lg text-left mb-6 shadow-sm inline-block w-full max-w-xl">
    <h6 class="font-black text-yellow-800 mb-3 text-lg">💡 데이터 탐정을 위한 힌트 (정상적인 하루)</h6>
    <div class="text-slate-700 space-y-2">
      <p>✔️ <b>손님 수:</b> 하루에 대충 150명쯤 옵니다.</p>
      <p>✔️ <b>매출액:</b> 하루에 약 50만 원쯤 법니다.</p>
      <p>✔️ <b>테이블:</b> 여전히 딱 4개뿐입니다.</p>
    </div>
  </div>

  <p class="text-slate-600 mb-6 text-lg">
    아래 버튼을 눌러 데이터를 다운받아 엑셀로 열어보세요. <br>
    분명히 엄청나게 말도 안 되는 숫자(오류)가 숨어있습니다!
  </p>
  
  <ExcelDownload :headers="headers" :dataRows="dataRows" fileName="비밀장부" />

  <div class="mt-8 pt-4 border-t border-slate-300 text-slate-500 text-sm">
    <b>장부에 있는 내용:</b> 번호, 날짜, 최고기온, 방문객수, 총매출액, 배달비, 순이익
  </div>
</div>

---

## 🕵️ 매의 눈 관찰: 어이없는 실수 찾기

어려운 그래프를 그리기 전에 먼저 눈으로 찾아봅시다. <b>딱 봐도 오타가 났거나 기계가 고장 난 날(번호)</b>을 찾아보세요.

<div class="border border-slate-300 rounded-t-lg overflow-hidden mt-6 shadow-sm">
  <div class="bg-slate-800 text-white font-bold px-4 py-3 text-lg">
    🚨 1단계 추리: 기계 고장과 손가락 실수
  </div>
</div>

<HintAccordion badgeText="⬇️" badgeClass="bg-blue-100 text-blue-600 font-bold" contentClass="bg-white border-2 border-blue-200 mt-1 shadow-sm p-5 rounded-b-lg">
  <template #title>
    <span class="text-blue-700 font-bold text-lg">🔍 사건 1. "사장님! 하루 만에 집을 샀어요!"</span>
  </template>
  <template #content>
    <div class="text-slate-700 text-base leading-relaxed">
      <b>👉 범인: 5번, 32번 (계산기 0을 잘못 누름)</b><br>
      평균 50만 원 벌던 가게가 갑자기 5,000만 원을 벌었다고 적혀있네요! 직원이 영수증을 찍을 때 실수로 0을 두 번 더 누른 <b>단순 오타</b>입니다.
    </div>
  </template>
</HintAccordion>

<HintAccordion badgeText="⬇️" badgeClass="bg-blue-100 text-blue-600 font-bold" contentClass="bg-white border-2 border-blue-200 mt-1 shadow-sm p-5 rounded-b-lg">
  <template #title>
    <span class="text-blue-700 font-bold text-lg">🔍 사건 2. "손님이 300명이나 왔는데, 돈은 0원?"</span>
  </template>
  <template #content>
    <div class="text-slate-700 text-base leading-relaxed">
      <b>👉 범인: 9번, 41번 (인터넷 고장)</b><br>
      카드 결제기가 고장 나거나 인터넷이 끊기면 결제가 안 됩니다. 손님들은 음식을 못 먹고 0원만 찍힌 채 화내며 돌아간 날입니다.
    </div>
  </template>
</HintAccordion>

<HintAccordion badgeText="⬇️" badgeClass="bg-blue-100 text-blue-600 font-bold" contentClass="bg-white border-2 border-blue-200 mt-1 shadow-sm p-5 rounded-b-lg">
  <template #title>
    <span class="text-blue-700 font-bold text-lg">🔍 사건 3. "펄펄 끓는 용암 날씨?"</span>
  </template>
  <template #content>
    <div class="text-slate-700 text-base leading-relaxed">
      <b>👉 범인: 19번, 38번 (온도 센서 고장)</b><br>
      기온이 100도, 혹은 영하 40도로 기록되어 있습니다. 이건 날씨를 재는 온도계(센서)가 완전히 고장 난 거예요!
    </div>
  </template>
</HintAccordion>

---

## 🕵️ 명탐정 추리: 말이 안 되는 가짜 손님 찾기

이번엔 머리를 써야 합니다. 1차시의 규칙 <b>[테이블 4개, 배달비 조심, 옆집 반값 가게]</b>를 떠올려보세요!

<div class="border border-slate-300 rounded-t-lg overflow-hidden mt-6 shadow-sm">
  <div class="bg-red-500 text-white font-bold px-4 py-3 text-lg">
    🚨 2단계 추리: 장사의 무서운 비밀
  </div>
</div>

<HintAccordion badgeText="⬇️" badgeClass="bg-red-100 text-red-600 font-bold" contentClass="bg-white border-2 border-red-200 mt-1 shadow-sm p-5 rounded-b-lg">
  <template #title>
    <span class="text-red-600 font-bold text-lg">🔍 사건 4. 귀신 손님 1,000명이 왔다 갔다?</span>
  </template>
  <template #content>
    <div class="text-slate-700 text-base leading-relaxed">
      <b>👉 범인: 14번, 45번</b><br>
      우리 가게는 한 번에 16명만 앉을 수 있어요. 하루에 1,000명이 넘게 먹고 갔다는 건 물리적으로 불가능한 가짜 데이터입니다!
    </div>
  </template>
</HintAccordion>

<HintAccordion badgeText="⬇️" badgeClass="bg-red-100 text-red-600 font-bold" contentClass="bg-white border-2 border-red-200 mt-1 shadow-sm p-5 rounded-b-lg">
  <template #title>
    <span class="text-red-600 font-bold text-lg">🔍 사건 5. 죽도록 팔았는데 내 돈은 어디에?</span>
  </template>
  <template #content>
    <div class="text-slate-700 text-base leading-relaxed">
      <b>👉 범인: 23번, 48번 (배달비 폭탄)</b><br>
      매출은 100만 원이나 되는데 통장에 남은 돈(순이익)은 5만 원뿐입니다. 배달비로만 60만 원이 나갔네요. 많이 판다고 다 좋은 게 아닙니다.
    </div>
  </template>
</HintAccordion>

<HintAccordion badgeText="⬇️" badgeClass="bg-red-100 text-red-600 font-bold" contentClass="bg-white border-2 border-red-200 mt-1 shadow-sm p-5 rounded-b-lg">
  <template #title>
    <span class="text-red-600 font-bold text-lg">🔍 사건 6. 옆집에 괴물이 나타났다!</span>
  </template>
  <template #content>
    <div class="text-slate-700 text-base leading-relaxed">
      <b>👉 범인: 29번, 50번</b><br>
      날씨도 좋은데 손님이 갑자기 20명으로 줄어든 날이 있습니다. 맞아요, 길 건너에 '반값 떡볶이' 가게가 문을 열어서 손님을 다 빼앗긴 날입니다.
    </div>
  </template>
</HintAccordion>

---

## 📈 CODAP, 넌 누구냐?!

<p class="text-blue-500 font-bold text-lg mb-6">어려운 숫자 데이터들을 한눈에 쏙 들어오게 예쁜 그래프로 그려주는 마법의 도구입니다.</p>

<div class="bg-blue-50 border-2 border-blue-200 rounded-2xl shadow-md p-8 flex items-center justify-between">
  <div class="w-2/3 pr-6">
    <h5 class="font-black text-slate-800 text-xl mb-4">💡 방금 우리가 했던 '민초청국장 선호도'를 CODAP에 넣는다면?</h5>
    <p class="text-slate-700 text-base leading-relaxed">
      반 친구들 30명의 점수를 표로 보면 누가 몇 점인지 헷갈리지만,<br>
      CODAP으로 <strong>점수별 학생 수</strong>를 그래프로 만들면<br>
      "아! 우리 반은 1점이 제일 많구나!" 하고 1초 만에 알 수 있어요.
    </p>
  </div>
  <div class="w-1/3 text-center text-8xl">
    📊
  </div>
</div>

<div class="mt-8 font-black text-blue-600 text-xl text-center">
  이제 진짜 데이터 탐정이 되어서 CODAP을 직접 다뤄볼까요?
</div>

---

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

<script setup>
const headers = ["번호(ID)", "날짜", "최고기온(℃)", "방문객수(명)", "총매출액(원)", "배달비(원)", "순이익(원)", "비고"];
const dataRows = [
  "1,2026-05-01,22,140,480000,30000,200000,정상",
  "2,2026-05-02,24,155,510000,40000,220000,정상",
  "3,2026-05-03,26,160,540000,45000,230000,정상",
  "4,2026-05-04,25,145,500000,35000,210000,정상",
  "5,2026-05-05,24,150,50000000,30000,49000000,오타",
  "6,2026-05-06,23,130,450000,20000,190000,정상",
  "7,2026-05-07,24,135,470000,25000,200000,정상",
  "8,2026-05-08,28,180,600000,50000,280000,정상",
  "9,2026-05-09,29,300,0,0,-150000,고장",
  "10,2026-05-10,27,165,550000,40000,240000,정상",
  "11,2026-05-11,25,140,490000,35000,210000,정상",
  "12,2026-05-12,23,130,450000,25000,190000,정상",
  "13,2026-05-13,22,125,430000,20000,180000,정상",
  "14,2026-05-14,26,1000,3500000,300000,2000000,가짜손님",
  "15,2026-05-15,28,170,580000,55000,260000,정상",
  "16,2026-05-16,30,190,650000,60000,300000,정상",
  "17,2026-05-17,27,150,500000,35000,220000,정상",
  "18,2026-05-18,25,145,480000,30000,200000,정상",
  "19,2026-05-19,100,140,470000,25000,190000,센서오류",
  "20,2026-05-20,26,155,520000,40000,230000,정상",
  "21,2026-05-21,28,160,550000,45000,240000,정상",
  "22,2026-05-22,29,170,580000,50000,260000,정상",
  "23,2026-05-23,28,250,900000,600000,50000,배달비폭탄",
  "24,2026-05-24,25,135,460000,25000,190000,정상",
  "25,2026-05-25,24,130,440000,20000,180000,정상",
  "26,2026-05-26,25,145,500000,35000,210000,정상",
  "27,2026-05-27,27,150,520000,40000,230000,정상",
  "28,2026-05-28,29,165,560000,45000,250000,정상",
  "29,2026-05-29,30,20,70000,5000,-100000,옆집반값",
  "30,2026-05-30,28,155,530000,40000,240000,정상",
  "31,2026-05-31,26,145,490000,35000,210000,정상",
  "32,2026-06-01,25,150,50000000,30000,49000000,오타2",
  "33,2026-06-02,27,160,540000,45000,240000,정상",
  "34,2026-06-03,28,170,580000,50000,260000,정상",
  "35,2026-06-04,26,140,480000,35000,200000,정상",
  "36,2026-06-05,24,130,450000,25000,190000,정상",
  "37,2026-06-06,23,125,430000,20000,180000,정상",
  "38,2026-06-07,-40,120,400000,15000,160000,센서오류2",
  "39,2026-06-08,26,150,510000,35000,220000,정상",
  "40,2026-06-09,28,165,560000,45000,250000,정상",
  "41,2026-06-10,27,280,0,0,-150000,고장2",
  "42,2026-06-11,25,145,490000,30000,210000,정상",
  "43,2026-06-12,24,135,460000,25000,190000,정상",
  "44,2026-06-13,26,155,530000,40000,240000,정상",
  "45,2026-06-14,29,1200,4200000,400000,2500000,가짜손님2",
  "46,2026-06-15,30,180,620000,55000,280000,정상",
  "47,2026-06-16,28,160,550000,45000,240000,정상",
  "48,2026-06-17,29,280,1100000,750000,40000,배달비폭탄2",
  "49,2026-06-18,27,150,510000,35000,220000,정상",
  "50,2026-06-19,28,15,50000,5000,-120000,옆집반값2"
];
</script>

<CsvDownload :headers="headers" :dataRows="dataRows" fileName="비밀장부" />

<p class="text-slate-700 text-base mb-4 text-center">태블릿이나 PC에서 CODAP을 열고, 아까 다운받은 장부(CSV)를 불러와 봅시다.</p>

<div class="flex justify-center items-center gap-2 mt-4 text-sm font-bold flex-wrap mb-6">
  <div class="p-3 bg-[#E6E6FA] rounded-lg text-center">
    <b>CODAP 열기</b><br>새 문서 만들기
  </div>
  <div>➡️</div>
  <div class="p-3 bg-[#FFE4B5] rounded-lg text-center">
    왼쪽 위 <b>[☰ 메뉴]</b> 누르고<br><b>[가져오기]</b>로 CSV 선택
  </div>
  <div>➡️</div>
  <div class="p-3 bg-[#FFB6C1] rounded-lg text-center">
    가운데 <b>[그래프]</b> 누르고<br>X축, Y축에 글자 끌어놓기
  </div>
  <div>➡️</div>
  <div class="p-3 bg-[#98FB98] rounded-lg text-center font-black">
    탐정의 돋보기 기술로<br>진짜 몽타주 찾기!
  </div>
</div>

<div class="border-2 border-slate-800 rounded-xl overflow-hidden shadow-sm mb-6">
  <div class="bg-slate-800 text-white font-bold p-3 text-base">
    🕵️ 필수 기술: 가짜 데이터 지우고 돋보기 들이대기 (Rescale)
  </div>
  <div class="p-4 bg-slate-50 text-sm text-slate-700 leading-relaxed">
    <p class="mb-3">저 멀리 도망가 있는 '이상한 점(가짜 데이터)' 때문에 그래프가 너무 작아져서 안 보이나요? 이렇게 해결하세요!</p>
    <ol class="list-decimal pl-5 space-y-2 mb-4">
      <li>이상한 점을 마우스나 손가락으로 <b>클릭</b>하거나 드래그해서 선택합니다.</li>
      <li>그래프 옆 <b>눈 모양 아이콘(👁️)</b>을 누르고 <b>[선택한 데이터 숨기기]</b>를 클릭하세요.</li>
      <li class="text-red-500 font-bold">가장 중요! 그래프 오른쪽 위 <b>[모든 데이터를 표시하도록 화면크기조정(십자 화살표 🔀)]</b> 버튼을 누르세요.</li>
    </ol>
    <div class="text-blue-600 font-black text-center text-base bg-blue-100 p-2 rounded-lg">
      👉 짠! 가짜 데이터가 사라지고, 진짜 데이터들만 화면에 꽉 차게 예뻐집니다!
    </div>
  </div>
</div>

<div class="border-2 border-blue-500 rounded-xl overflow-hidden mt-6 shadow-sm bg-white">
  <div class="bg-blue-600 text-white font-black py-2.5 text-center text-lg">
    🎯 탐험대의 미션 3가지
  </div>
  
  <HintAccordion badgeText="힌트 보기 ⬇️" badgeClass="bg-slate-500 hover:bg-slate-600 text-white transition-colors" contentClass="bg-blue-100 text-blue-800 border border-blue-200 mt-3 p-3 rounded-lg font-bold text-[13px] shadow-inner">
    <template #title>
      <div class="flex flex-col gap-2 text-left py-1 pr-4">
        <span class="text-[15px] font-black text-slate-800">🔥 미션 1. 날씨와 떡볶이의 관계 증명하기</span>
        <span class="text-[13px] font-medium text-slate-600 leading-relaxed">온도가 100도인 가짜 데이터를 찾아서 숨기고 화면크기조정(Rescale)을 해보세요. 추울 때 많이 오는지 확인!</span>
      </div>
    </template>
    <template #content>
      👉 <b>[설정]</b> 가로축(X): 최고기온 / 세로축(Y): 방문객수
    </template>
  </HintAccordion>

  <HintAccordion badgeText="힌트 보기 ⬇️" badgeClass="bg-slate-500 hover:bg-slate-600 text-white transition-colors" contentClass="bg-blue-100 text-blue-800 border border-blue-200 mt-3 p-3 rounded-lg font-bold text-[13px] shadow-inner">
    <template #title>
      <div class="flex flex-col gap-2 text-left py-1 pr-4">
        <span class="text-[15px] font-black text-slate-800">🔥 미션 2. 무시무시한 배달비 그래프 그리기</span>
        <span class="text-[13px] font-medium text-slate-600 leading-relaxed">돈을 많이 벌었는데 내 통장이 텅 빈 이유를 색깔로 증명하세요.</span>
      </div>
    </template>
    <template #content>
      👉 <b>[설정]</b> 가로축(X): 총매출액 / 세로축(Y): 순이익 / <b>가운데 색칠하기(Legend):</b> 배달비
    </template>
  </HintAccordion>

  <HintAccordion badgeText="힌트 보기 ⬇️" badgeClass="bg-slate-500 hover:bg-slate-600 text-white transition-colors" contentClass="bg-blue-100 text-blue-800 border border-blue-200 mt-3 p-3 rounded-lg font-bold text-[13px] shadow-inner">
    <template #title>
      <div class="flex flex-col gap-2 text-left py-1 pr-4">
        <span class="text-[15px] font-black text-slate-800">🔥 미션 3. 손님이 절벽처럼 떨어진 날 찾기</span>
        <span class="text-[13px] font-medium text-slate-600 leading-relaxed">점들을 선으로 연결해보면, 절벽처럼 뚝 떨어지는 곳이 보일 겁니다.</span>
      </div>
    </template>
    <template #content>
      👉 <b>[설정]</b> 가로축(X): 날짜 / 세로축(Y): 방문객수 / 점들을 선으로 연결하기
    </template>
  </HintAccordion>
</div>

---

## 🕵️ 심화 미션: 위기의 가게를 구해라!

<script setup>
import { ref } from 'vue'
const ans_mission4 = ref(null)
const ans_step1 = ref(null)
const ans_step2 = ref(null)
const ans_step3 = ref(null)
</script>

<div class="border-2 border-yellow-400 rounded-xl overflow-hidden shadow-md mb-8">
  <div class="bg-yellow-100 text-yellow-800 font-bold p-4 text-lg border-b border-yellow-200">
    Q. 가게 사정이 어려워져 홀을 계속 유지할지 고민입니다. 장부에 어떤 데이터를 추가해야 결정을 내릴 수 있을까요?
  </div>
  <div class="p-6 bg-white">
    <select class="w-full p-3 border-2 border-yellow-400 rounded-lg text-base outline-none focus:ring-2 focus:ring-yellow-500" v-model="ans_mission4">
      <option :value="null" disabled>정답을 선택하세요</option>
      <option value="1">오늘의 날씨 (맑음/흐림/비)</option>
      <option value="2">알바생의 기분 점수</option>
      <option value="3">홀 결제건수, 배달 결제건수, 포장 결제건수</option>
      <option value="4">가게 배경음악 플레이리스트</option>
    </select>
    <div v-if="ans_mission4 === '3'" class="bg-green-100 border border-green-300 text-green-800 p-4 rounded-lg mt-4 font-bold animate-pulse">
      🎉 정답! 결제 방식별 건수를 보면 홀을 유지할지 배달 전문으로 바꿀지 알 수 있어요!
    </div>
    <div v-else-if="ans_mission4 && ans_mission4 !== '3'" class="bg-red-100 border border-red-300 text-red-800 p-4 rounded-lg mt-4 font-bold">
      ❌ 땡! 공간 유지 여부를 결정하려면, 공간별로 돈이 얼마나 들어오는지 구분해야 해요.
    </div>
  </div>
</div>

<div class="border-2 border-green-500 rounded-xl overflow-hidden shadow-md">
  <div class="bg-green-500 text-white font-bold p-4 text-lg">
    🏅 이건 진짜 데이터과학자! 손님들이 시키는 '평균 금액'을 정확히 알고 싶다면?
  </div>
  <div class="p-6 bg-green-50 space-y-4">
    <p class="text-slate-600 text-sm mb-4">올바른 분석 순서를 드롭다운에서 차례대로 선택하세요.</p>
    
<div class="flex items-center gap-3">
    <span class="bg-slate-600 text-white px-3 py-1 rounded font-bold text-sm shrink-0">Step 1</span>
    <select class="flex-1 p-2 border border-slate-300 rounded text-sm outline-none" v-model="ans_step1">
    <option :value="null" disabled>첫 번째 할 일</option>
    <option value="wrong">무조건 방문객수-총매출 그래프부터 그린다</option>
    <option value="correct">날짜-총매출액 그래프에서 5,000만 원짜리 오타(이상치) 숨기기</option>
    </select>
</div>

<div class="flex items-center gap-3 transition-all" v-if="ans_step1 === 'correct'">
    <span class="bg-slate-600 text-white px-3 py-1 rounded font-bold text-sm shrink-0">Step 2</span>
    <select class="flex-1 p-2 border border-slate-300 rounded text-sm outline-none" v-model="ans_step2">
    <option :value="null" disabled>두 번째 할 일</option>
    <option value="correct">날짜-방문객수 그래프에서 귀신 손님 1,000명(이상치) 숨기기</option>
    <option value="wrong">에어컨 온도를 낮춘다</option>
    </select>
</div>

<div class="flex items-center gap-3 transition-all" v-if="ans_step2 === 'correct'">
    <span class="bg-slate-600 text-white px-3 py-1 rounded font-bold text-sm shrink-0">Step 3</span>
    <select class="flex-1 p-2 border border-slate-300 rounded text-sm outline-none" v-model="ans_step3">
    <option :value="null" disabled>마지막 할 일</option>
    <option value="wrong">엑셀을 끄고 퇴근한다</option>
    <option value="correct">가로축(X)을 방문객수, 세로축(Y)을 총매출액으로 놓고 그래프 확인!</option>
    </select>
</div>

<div v-if="ans_step3 === 'correct'" class="bg-blue-100 border-2 border-blue-400 text-blue-800 p-4 rounded-lg mt-4 font-black animate-bounce text-center">
    🌟 완벽합니다! 가짜 데이터(이상치)를 모두 지운 후 X-Y 그래프를 그려야 진짜 평균을 구할 수 있죠! 당신은 진정한 데이터 과학자!
</div>
  </div>
</div>

---

## ☁️ 워드클라우드: 단어로 읽는 손님들의 속마음

<script setup>
import { ref } from 'vue'
const copyReviews = async (event) => {
  const btn = event.target.closest('button');
  const reviewList = [
    "배달이 너무 늦어요. 1시간이나 기다렸습니다.", "배달 떡볶이가 다 식어서 왔어요.", "가게가 너무 좁아요. 먹기 불편함.",
    "기다리다가 지쳐서 그냥 갑니다. 가게가 좁아요.", "배달비가 너무 비싸요. 떡볶이값보다 배달비가 더 나옴.", "배달 늦어요.",
    "맛은 있는데 배달이 너무 늦어요.", "가게 테이블이 4개밖에 없어서 한참 밖에서 기다렸어요. 좁아요.", "비싸요. 배달비 좀 내려주세요.",
    "알바생 형이 바빠서 그런지 불친절해요.", "떡이 덜 익었어요. 배달도 늦고요.", "가게가 너무 좁아요 옆 사람과 부딪힘.",
    "치즈가 다 굳어서 왔어요. 배달 늦어요.", "배달비 비싸요.", "매장이 너무 좁아요.", "배달 늦어요.",
    "진짜 너무 늦어요. 배고파 죽는 줄.", "양은 많은데 매장이 좁아요.", "배달 늦어요 배달 늦어요.", "배달비가 너무너무 비싸요.",
    "맛있어요! 근데 좁아요.", "알바생 누나가 친절해요.", "가게가 너무너무 좁아요.", "배달이 늦어요 식었어요.",
    "비싸요.", "배달이 늦어요.", "좁아요.", "좁아요 대기가 길어요.", "대기 시간이 너무 길어요. 좁아요.",
    "치즈 떡볶이 맛있어요! 하지만 배달이 늦어요.", "배달비 비싸요.", "가게가 좁아요.", "식어서 왔어요.", "배달 늦어요.",
    "늦어요.", "좁아요.", "배달이 너무 늦어요 식었어요.", "테이블이 없어서 서서 기다림. 좁아요.", "배달비가 너무 비싸요.",
    "최악의 배달 속도. 늦어요.", "가게가 좁아요.", "맛있어요.", "맛있어요.", "비싸요.", "배달이 늦어요.",
    "배달비 비싸요.", "가게가 좁아요.", "식었어요 늦어요.", "매장이 좁아요.", "친절해요.", "떡볶이 최고! 근데 좁아요.",
    "배달이 늦어요.", "배달비 비싸요.", "좁아요.", "너무 좁아요.", "식었어요.", "늦어요.", "배달비 비싸요.", "가게 좁아요.",
    "늦어요.", "배달 늦어요.", "비싸요 배달비.", "좁아요.", "대기 시간이 길어요 좁아요.", "식었어요.", "늦어요 늦어요.",
    "배달비가 비싸요.", "가게가 좁아요.", "맛있어요.", "친절해요.", "알바생 불친절해요.", "좁아요.", "늦어요.", "식었어요.",
    "배달이 너무 늦어요.", "배달비 비싸요.", "가게가 좁아요.", "좁아요.", "비싸요.", "늦어요.", "식었어요.", "대기 길어요.",
    "배달 늦어요.", "배달비 비싸요.", "좁아요.", "너무 좁아요.", "맛있어요.", "늦어요.", "식었어요.", "비싸요.", "좁아요.",
    "배달이 늦어요.", "배달비 너무 비싸요.", "가게가 좁아요.", "좁아요.", "늦어요.", "식었어요.", "비싸요.", "대기가 길어요 좁아요."
  ];
  const fullReviewsText = reviewList.join("\n");
  try {
    await navigator.clipboard.writeText(fullReviewsText);
    const originalHtml = btn.innerHTML;
    btn.innerHTML = '복사 성공! 사이트에 붙여넣으세요';
    btn.classList.replace('bg-red-500', 'bg-green-500');
    setTimeout(() => {
      btn.innerHTML = originalHtml;
      btn.classList.replace('bg-green-500', 'bg-red-500');
    }, 3000);
  } catch (err) {
    console.error("복사 실패:", err);
    alert("복사에 실패했습니다. 브라우저 설정을 확인해 주세요.");
  }
}
</script>

<div class="flex justify-center mb-6 mt-4">
  <a href="https://wordcloud.kr/v2/index.php" target="_blank" class="bg-red-500 hover:bg-red-600 text-white px-6 py-3 rounded-lg font-bold shadow-md transition-all">
    워드클라우드 사이트 열기
  </a>
</div>

<p class="text-slate-700 text-base text-center mb-6">그래프로 범인을 찾았다면, 이번엔 <b>손님들의 불만 리뷰</b>를 한눈에 알아보기 쉽게 그림으로 만들어봅시다!</p>

<div class="flex justify-center items-center gap-3 text-sm font-bold flex-wrap mb-8">
  <div class="p-3 bg-[#E6E6FA] rounded-lg text-center border border-[#d8d8f8]">아래 버튼을 눌러<br><b>리뷰 100개 복사하기</b></div>
  <div>➡️</div>
  <div class="p-3 bg-[#FFE4B5] rounded-lg text-center border border-[#f3d9aa]"><b>워드클라우드 사이트</b><br>새 창으로 열기</div>
  <div>➡️</div>
  <div class="p-3 bg-[#FFB6C1] rounded-lg text-center border border-[#eeb0ba]">'텍스트' 입력 칸에<br><b>우클릭 -> 붙여넣기</b></div>
  <div>➡️</div>
  <div class="p-3 bg-[#98FB98] rounded-lg text-center font-black border border-[#8ce98c]">[워드클라우드 만들기]<br>버튼 클릭!</div>
</div>

<div class="border-2 border-red-500 rounded-xl overflow-hidden shadow-md text-center max-w-2xl mx-auto">
  <div class="bg-red-500 text-white font-bold p-3 text-lg">🚨 우리 가게 리뷰 100개 모음함</div>
  <div class="p-6 bg-red-50">
    <p class="text-slate-600 text-sm mb-6 leading-relaxed">
      "배달이 늦어요", "가게가 좁아요" 등 손님들이 남긴 영수증 리뷰 100개입니다.<br>
      직접 읽기엔 너무 많죠? 워드클라우드로 변신시켜 보세요!
    </p>
    <button @click="copyReviews" class="bg-red-500 hover:bg-red-600 text-white px-8 py-4 rounded-xl font-black text-lg shadow-lg transition-colors">
      영수증 리뷰 100개 복사하기
    </button>
  </div>
</div>

---
layout: center
class: bg-slate-800 text-white
---

## 📢 사장님의 결단 (작전 변경 발표)

<p class="text-slate-300 text-lg mb-8 text-center">우리는 그래프와 워드클라우드를 통해 가게의 치명적인 문제점을 완벽하게 찾아냈습니다. 이제 작전을 바꿀 시간입니다!</p>

<div class="bg-white text-slate-800 p-8 rounded-2xl shadow-2xl max-w-3xl mx-auto border-4 border-yellow-400">
  <h5 class="font-black text-2xl mb-4 border-b-2 border-slate-200 pb-3 text-blue-600">💡 어떤 작전을 쓸까? (팀별 회의)</h5>
  <p class="text-slate-500 mb-6 text-sm">
    아래 작전들을 읽어보고, <span class="text-blue-600 font-bold">AI에게 더 기발한 아이디어를 내달라고 부탁해서 우리 팀만의 멋진 작전을 발표하세요!</span>
  </p>

  <HintAccordion badgeText="🔻" badgeClass="bg-slate-200 text-slate-800" contentClass="bg-slate-50 border-t border-slate-200 p-4 rounded-b-lg">
    <template #title><span class="font-bold text-slate-800 text-base">📍 작전 1. 더운 날 매출 지키기</span></template>
    <template #content>
      <span class="text-slate-600 text-sm">✔️ 여름에 뜨거운 떡볶이를 안 먹는다면? 👉 "더운 날씨엔 시원한 팥빙수와 얼음 쿨피스 세트를 팔자!"</span>
    </template>
  </HintAccordion>

  <div class="my-3"></div>

  <HintAccordion badgeText="🔻" badgeClass="bg-slate-200 text-slate-800" contentClass="bg-slate-50 border-t border-slate-200 p-4 rounded-b-lg">
    <template #title><span class="font-bold text-slate-800 text-base">📍 작전 2. 배달비 폭탄 탈출하기</span></template>
    <template #content>
      <span class="text-slate-600 text-sm">✔️ 배달비 때문에 적자가 난다면? 👉 "가게로 직접 걸어와서 포장해 가는 손님에게는 치즈 사리를 공짜로 주자!"</span>
    </template>
  </HintAccordion>

  <div class="my-3"></div>

  <HintAccordion badgeText="🔻" badgeClass="bg-slate-200 text-slate-800" contentClass="bg-slate-50 border-t border-slate-200 p-4 rounded-b-lg">
    <template #title><span class="font-bold text-slate-800 text-base">📍 작전 3. 옆집 반값 가게 무찌르기</span></template>
    <template #content>
      <span class="text-slate-600 text-sm">✔️ 가격을 똑같이 내리면 둘 다 망해요. 👉 "우리 가게는 최고급 재료만 쓴다는 걸 강조하고, 인스타그램 사진 찍기 좋은 예쁜 코너를 만들자!"</span>
    </template>
  </HintAccordion>
</div>

---

## 🎬 [보충 영상] AI는 세상을 어떻게 볼까?

<p class="text-slate-600 text-base mb-6">
  우리가 아까 본 '온도', '배달비' 같은 항목들을 인공지능은 <b>'피처(Feature)'</b>라고 부릅니다. 인공지능이 피처로 어떻게 똑똑해지는지 볼까요?
</p>

<div class="grid grid-cols-2 gap-6">
  <div class="border border-slate-200 rounded-xl overflow-hidden shadow-sm">
    <div class="bg-blue-600 text-white font-bold px-4 py-2">1. 데이터가 돈이 되는 마법</div>
    <div class="bg-slate-100 p-3 h-[240px]">
      <iframe width="100%" height="100%" src="https://www.youtube.com/embed/vc6heXAXqEs" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>

  <div class="border border-slate-200 rounded-xl overflow-hidden shadow-sm">
    <div class="bg-green-600 text-white font-bold px-4 py-2">2. 인공지능의 눈, '피처' 찾기</div>
    <div class="bg-slate-100 p-3 h-[240px]">
      <iframe width="100%" height="100%" src="https://www.youtube.com/embed/Ym3IM9y4U5U" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>

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

<img src="https://e000.bond/vibe/ai-sequence.png" alt="AI Sequence" class="h-[450px] mx-auto object-contain shadow-lg rounded-xl border border-slate-200" />

<div class="font-black mt-8 text-blue-600 text-4xl">
  전처리란?
</div>

---
layout: center
class: bg-slate-900 text-white
---

## 📱 미니게임: 꼬마 사장님의 AI 시세 예측기 만들기

<p class="text-slate-400 mb-6 text-center">데이터를 모으고 가짜를 골라내어, 똑똑한 AI를 직접 완성해 보세요!</p>

<AiPipelineGameMiddle />

---

## 🧑 데이터 탐정 실력 평가 (중등)

<div class="h-[500px] overflow-y-auto px-4 py-2 space-y-6">
  
  <ListQuiz 
    question="Q1. AI 햄버거 가게를 만들 때 수집해야 할 데이터로 알맞지 않은 것은?"
    options="['1. 손님들이 남긴 영수증 리뷰', '2. 햄버거 메뉴별 가격', '3. 사장님의 초등학교 수학 점수', '4. 하루 방문객 수', '5. 가장 잘 팔리는 시간대']"
    answer="3. 사장님의 초등학교 수학 점수"
    correctMsg="데이터 수집 단계에서는 목적(가게 매출)과 관련 있는 데이터만 모아야 합니다."
    wrongMsg="햄버거를 파는 것과 전혀 상관없는 정보가 하나 있어요."
  />

  <ListQuiz 
    question="Q2. 그래프를 그렸을 때 다른 점들과 너무 멀리 떨어져서 분석을 방해하는 '튀는 값'을 무엇이라고 하나요?"
    options="['1. 평균값', '2. 결측치', '3. 중앙값', '4. 최댓값', '5. 이상치 (Outlier)']"
    answer="5. 이상치 (Outlier)"
    correctMsg="정상 범위를 크게 벗어난 값을 '이상치'라고 하며, 반드시 확인 후 지워야 합니다."
    wrongMsg="다를 이(異) 자를 쓰는 수학 용어를 떠올려보세요."
  />

  <ListQuiz 
    question="Q3. 데이터 표에 빵꾸(빈칸)가 났습니다. 이 '결측치'를 전처리하는 올바른 방법은?"
    options="['1. 컴퓨터를 포맷한다', '2. 빈칸에 평균값이나 0을 채워 넣는다', '3. 빈칸을 알파벳 X로 채운다', '4. 모니터를 깨끗이 닦는다', '5. 빈칸이 있는 줄을 100번 복사한다']"
    answer="2. 빈칸에 평균값이나 0을 채워 넣는다"
    correctMsg="빈칸(결측치)은 아예 지우거나, 남은 데이터들의 평균값을 채워 넣어야 합니다."
    wrongMsg="빈칸을 숫자 데이터로 안전하게 메꾸는 방법이 무엇일까요?"
  />

  <ListQuiz 
    question="Q4. 인공지능이 깨끗한 데이터를 보고 스스로 규칙을 찾아내는 방법을 무엇이라고 부를까요?"
    options="['1. 기계세탁', '2. 기계조립', '3. 머신러닝 (기계학습)', '4. 기계번역', '5. 기계체조']"
    answer="3. 머신러닝 (기계학습)"
    correctMsg="기계(Machine)가 스스로 학습(Learning)한다는 뜻의 머신러닝입니다."
    wrongMsg="컴퓨터가 공부를 한다는 의미의 영어 단어 조합을 생각해보세요!"
  />

  <ListQuiz 
    question="Q5. 학습을 마친 AI 모델을 실생활에 적용(활용)한 예시가 아닌 것은?"
    options="['1. 자율주행 자동차가 보행자를 인식함', '2. 넷플릭스가 영화를 추천함', '3. 스마트폰이 내 얼굴을 알아봄', '4. 기상청 AI가 내일 날씨를 맞춤', '5. 건전지를 넣으면 켜지는 손전등']"
    answer="5. 건전지를 넣으면 켜지는 손전등"
    correctMsg="손전등은 인공지능이 아니라 단순한 전기 회로 장치입니다."
    wrongMsg="스스로 생각하고 판단하지 않는 물건을 골라보세요."
  />

</div>

---

## 🛠️ 3차시: 뚝딱뚝딱! 자율주행 자동차 조립

어려운 원리를 배우기 전에, 레고 블록을 맞추듯 직접 자동차를 만들어봐요!

<div class="grid grid-cols-12 gap-6 mt-8">
  <div class="col-span-5 bg-slate-800 text-white rounded-xl shadow-lg flex flex-col justify-center items-center p-6 text-center border border-slate-700">
    <h4 class="font-black text-yellow-400 text-2xl mb-6">🔧 오늘의 미션</h4>
    <ul class="text-left space-y-3 text-lg text-slate-200 w-full pl-4 list-disc">
      <li>바퀴와 모터 단단하게 연결하기</li>
      <li>앞을 보는 초음파 센서(눈) 달아주기</li>
      <li>메인보드(두뇌)에 전선 꽂기</li>
    </ul>
    <div class="mt-8 bg-slate-700 p-3 rounded-lg text-slate-300 italic w-full text-sm">
      "내가 조립한 자동차가 정말 혼자서 움직일까요?"
    </div>
  </div>

  <div class="col-span-7 border-2 border-blue-500 rounded-xl overflow-hidden shadow-lg">
    <div class="bg-blue-500 text-white font-black p-4 text-xl">
      ⚠️ 조립할 때 주의할 점!
    </div>
    <div class="p-6 bg-blue-50 text-slate-800">
      <ol class="list-decimal pl-5 space-y-4 text-base">
        <li><b>빨강 까망 주의:</b> 전선은 꼭 색깔에 맞춰서 꽂으세요. 반대로 꽂으면 고장 나요!</li>
        <li><b>눈의 방향:</b> 앞을 보는 센서가 땅이나 하늘을 보고 있으면 벽을 피할 수 없어요. 앞을 똑바로 보게 해주세요.</li>
        <li><b>손가락 조심:</b> 바퀴가 휙! 돌 때 손가락이 다치지 않게 배터리는 가장 마지막에 끼우세요.</li>
      </ol>
      <hr class="border-blue-200 my-6">
      <p class="text-red-500 font-black text-center text-xl m-0 animate-pulse">타이머: 20분! 설명서를 보고 짝꿍과 힘을 합쳐 완성하세요!</p>
    </div>
  </div>
</div>

---

## 🚘 자동차는 어떻게 혼자 달릴까?

여러분이 방금 만든 자동차는 어떤 원리로 달리는 걸까요? 영상으로 확인해 봐요!

<div class="bg-slate-100 p-3 mt-6 mb-6 rounded-xl shadow-sm border border-slate-200 h-[360px]">
  <iframe width="100%" height="100%" src="https://www.youtube.com/embed/6f_joanlON4" frameborder="0" allowfullscreen></iframe>
</div>

<div class="bg-yellow-50 border-l-8 border-yellow-400 p-5 rounded-r-xl shadow-sm">
  <b class="text-yellow-800 text-lg block mb-3">💡 3가지 핵심 비밀</b>
  <div class="space-y-2 text-slate-700 text-base">
    <p>1️⃣ <b>센서(Sensor):</b> 방금 부착한 자동차의 '눈' (길을 보고 위험을 감지해요)</p>
    <p>2️⃣ <b>소프트웨어(SW):</b> 전선을 꽂은 '두뇌' (인공지능이 스스로 운전법을 배워요)</p>
    <p>3️⃣ <b>도로와 통신:</b> 멀리서 오는 위험을 알려주는 무선 통신(인터넷)</p>
  </div>
</div>

---

## 👀 자동차의 세 가지 마법의 눈 (센서)

자율주행 자동차는 사람보다 시력이 좋을까요? 사실 기계들도 약점이 있어요.

<div class="grid grid-cols-3 gap-4 mt-8">
  <HintAccordion badgeText="🔻" badgeClass="bg-blue-600 text-white" contentClass="bg-white border-2 border-blue-200 mt-2 p-4 text-sm shadow-sm h-[180px] rounded-lg">
    <template #title><span class="text-blue-700 text-lg font-black">📷 첫째 눈. 카메라</span></template>
    <template #content>
      <p class="mb-3 text-slate-700">✔️ <b>특징:</b> 우리 핸드폰 카메라와 같아요! 신호등이 빨간색인지 초록색인지 구분할 수 있어요.</p>
      <hr class="border-slate-200 my-3">
      <p class="text-red-500 font-bold">❌ <b>약점:</b> 밤이 되거나 안개가 끼면 우리처럼 앞이 안 보여요. 강한 햇빛에도 눈이 부셔서 안 보여요.</p>
    </template>
  </HintAccordion>

  <HintAccordion badgeText="🔻" badgeClass="bg-green-600 text-white" contentClass="bg-white border-2 border-green-200 mt-2 p-4 text-sm shadow-sm h-[180px] rounded-lg">
    <template #title><span class="text-green-700 text-lg font-black">📡 둘째 눈. 레이더</span></template>
    <template #content>
      <p class="mb-3 text-slate-700">✔️ <b>특징:</b> 박쥐처럼 전파를 쏴서 물체가 얼마나 멀리 있는지 알아내요. 눈이나 비가 와도 끄떡없어요!</p>
      <hr class="border-slate-200 my-3">
      <p class="text-red-500 font-bold">❌ <b>약점:</b> 자동차 같은 큰 쇳덩이는 잘 찾지만, 사람은 잘 못 봐요. 모양 구별을 잘 못해요.</p>
    </template>
  </HintAccordion>

  <HintAccordion badgeText="🔻" badgeClass="bg-red-600 text-white" contentClass="bg-white border-2 border-red-200 mt-2 p-4 text-sm shadow-sm h-[180px] rounded-lg">
    <template #title><span class="text-red-700 text-lg font-black">🔦 셋째 눈. 라이다(LiDAR)</span></template>
    <template #content>
      <p class="mb-3 text-slate-700">✔️ <b>특징:</b> 레이저를 사방으로 쏴서 3D 게임처럼 주변 세상을 입체로 스캔해요. 엄청나게 똑똑해요!</p>
      <hr class="border-slate-200 my-3">
      <p class="text-red-500 font-bold">❌ <b>약점:</b> 기계값이 천만 원이 넘게 엄청나게 비싸요! 그리고 눈송이가 날리면 레이저가 부딪혀서 고장 나요.</p>
    </template>
  </HintAccordion>
</div>

---

## 🚨 X-파일: 똑똑한 AI는 왜 사고를 냈을까?

완벽해 보이는 인공지능도 바보 같은 실수를 합니다. **왜 기계가 속았는지** 탐정이 되어 추리해보세요.

<div class="border-2 border-slate-800 rounded-xl mt-6 overflow-hidden shadow-md">
  <div class="bg-red-600 text-white font-black p-3 text-lg">
    📂 기밀 문서: 자동차 어리둥절 사건 4가지
  </div>
  
  <div class="p-4 space-y-3 h-[400px] overflow-y-auto bg-slate-50">
<HintAccordion badgeText="정답 보기 ⬇️" badgeClass="bg-slate-500 text-white" contentClass="bg-red-50 border border-red-200 mt-2 p-4 text-sm rounded-lg">
    <template #title><span class="text-base font-bold text-slate-800">사건 1. 하얀색 트럭을 향해 전속력으로 돌진!</span></template>
    <template #content>
    <span class="text-red-600 font-bold block mb-1">👉 [카메라의 착각]</span>
    너무 화창하고 밝은 날, 카메라는 거대한 하얀색 트럭을 <b>'하얗고 맑은 구름'</b>으로 착각해서 브레이크를 밟지 않았어요.
    </template>
</HintAccordion>

<HintAccordion badgeText="정답 보기 ⬇️" badgeClass="bg-slate-500 text-white" contentClass="bg-red-50 border border-red-200 mt-2 p-4 text-sm rounded-lg">
    <template #title><span class="text-base font-bold text-slate-800">사건 2. 아무것도 없는데 끼기기긱! 급브레이크!</span></template>
    <template #content>
    <span class="text-red-600 font-bold block mb-1">👉 [레이더의 헛것 보기]</span>
    고가도로 밑에 생긴 시커먼 그림자를 보고, 레이더는 엄청나게 큰 콘크리트 벽이 길을 막고 있다고 착각했어요.
    </template>
</HintAccordion>

<HintAccordion badgeText="정답 보기 ⬇️" badgeClass="bg-slate-500 text-white" contentClass="bg-red-50 border border-red-200 mt-2 p-4 text-sm rounded-lg">
    <template #title><span class="text-base font-bold text-slate-800">사건 3. 낙서를 보고 쌩쌩 달려버린 자동차</span></template>
    <template #content>
    <span class="text-red-600 font-bold block mb-1">👉 [AI의 단순함]</span>
    '멈춤(STOP)' 표지판에 누가 까만 테이프를 붙여서 낙서해놨어요. 우리는 낙서인 줄 알지만, AI는 그걸 '100km로 밟으라는 속도 표지판'으로 잘못 읽었답니다.
    </template>
</HintAccordion>

<HintAccordion badgeText="정답 보기 ⬇️" badgeClass="bg-slate-500 text-white" contentClass="bg-red-50 border border-red-200 mt-2 p-4 text-sm rounded-lg">
    <template #title><span class="text-base font-bold text-slate-800">사건 4. 아직 굳지도 않은 말랑말랑한 시멘트 길에 풍덩!</span></template>
    <template #content>
    <span class="text-red-600 font-bold block mb-1">👉 [상식 부족]</span>
    사람은 옆에 공사 중 표지판을 보면 "아, 시멘트가 덜 말랐구나" 하고 피하지만, AI에게는 그런 '사회적 눈치'가 없어요. 그냥 텅 빈 길이라고 밟아버렸죠!
    </template>
</HintAccordion>
  </div>
</div>

---

## ⚖️ 2교시: 트롤리 딜레마 (당신의 선택은?)

자율주행차가 고장 나서 브레이크가 안 듣습니다. 여러분이 이 차를 만든 사장님이라면, **누구를 구하도록 로봇에게 명령하시겠습니까?**

<div class="bg-slate-50 border-l-8 border-red-500 p-6 rounded-r-xl shadow-md mt-6 relative">
  <h5 class="font-black text-red-600 text-xl mb-4">🤔 피할 수 없는 사고의 순간</h5>
  <p class="text-slate-700 text-base mb-6">차는 현재 엄청 빠른 속도로 달리고 있습니다.</p>
  
  <div class="space-y-4 text-slate-800">
    <div class="bg-white p-4 rounded border border-slate-200 shadow-sm">
      <b class="text-lg block mb-1 text-red-600">[선택 A]</b> 그대로 직진! (무단 횡단하는 <b>보행자 5명 다침</b>)
    </div>
    <div class="bg-white p-4 rounded border border-slate-200 shadow-sm">
      <b class="text-lg block mb-1 text-blue-600">[선택 B]</b> 운전대를 꺾어서 벽에 쾅! (이 차에 타고 있는 <b>운전자 1명 다침</b>)
    </div>
    <div class="bg-white p-4 rounded border border-slate-200 shadow-sm">
      <b class="text-lg block mb-1 text-green-600">[선택 C]</b> 운전대를 꺾어 인도로 돌진! (신호를 잘 지키던 <b>무고한 사람 1명 다침</b>)
    </div>
  </div>
</div>

<div class="mt-8 text-center flex flex-col items-center">
  <a href="https://science.seoul.go.kr/RAIM/aiPlaygrnd/list.do?key=2310160006" target="_blank" class="bg-red-500 text-white font-black px-8 py-4 rounded-full shadow-lg hover:bg-red-600 hover:scale-105 transition-all text-xl inline-block">
    🎮 직접 체험하기: 트롤리 딜레마 시뮬레이터 (클릭)
  </a>
  <p class="mt-3 text-slate-500 font-bold text-sm">* 서울시립과학관 사이트로 이동해서 직접 게임처럼 선택을 해보세요!</p>
</div>

---
layout: default
class: text-center bg-slate-900 text-white
---

## 📢 착한 AI 선언문: 우리 회사의 약속

로봇은 스스로 선택하지 못해요. 결국 로봇을 만드는 인간(여러분)이 윤리적 책임을 져야 합니다.

<div class="bg-white text-slate-800 p-8 rounded-2xl shadow-2xl text-left w-full max-w-4xl mt-8 mx-auto border-4 border-yellow-400">
  <h5 class="font-black text-2xl mb-6 border-b-2 border-slate-200 pb-3 text-blue-600">📝 마지막 임무: 우리 회사의 약속 발표하기</h5>
  
  <ul class="space-y-4 text-base">
    <li class="flex items-start gap-3 p-3 bg-slate-50 rounded-lg">
      <span class="bg-red-500 text-white text-sm font-bold px-3 py-1 rounded shrink-0 mt-1">Step 1</span> 
      <span>게임을 해본 결과를 바탕으로, 피할 수 없는 사고가 났을 때 우리 회사의 차는 <b>누구를 먼저 구할지</b> 짝꿍과 의논하세요. (내 차에 탄 사람? 생명 숫자가 많은 쪽? 법을 잘 지킨 사람?)</span>
    </li>
    <li class="flex items-start gap-3 p-3 bg-slate-50 rounded-lg">
      <span class="bg-blue-500 text-white text-sm font-bold px-3 py-1 rounded shrink-0 mt-1">Step 2</span> 
      <span>사람들에게 우리 회사의 깊은 생각을 멋지게 알리기 위해 <b>ChatGPT</b>의 도움을 받으세요.</span>
    </li>
    <li class="flex flex-col gap-3 p-3 bg-slate-50 rounded-lg">
      <div class="flex items-start gap-3">
        <span class="bg-green-500 text-white text-sm font-bold px-3 py-1 rounded shrink-0 mt-1">Step 3</span> 
        <span>아래 문장을 AI에게 입력하세요.</span>
      </div>
      <div class="text-slate-600 font-bold bg-white p-4 ml-14 border border-slate-200 rounded-lg shadow-inner italic">
        "나는 자율주행 회사의 사장이야. 우리는 어쩔 수 없는 사고가 났을 때 [ 내가 정한 사람 ]을 먼저 구하기로 약속했어. 사람들에게 감동을 주고 믿음을 줄 수 있는 멋진 윤리 선언문을 300글자로 써줘."
      </div>
    </li>
  </ul>

  <div class="bg-blue-50 border-2 border-blue-300 text-blue-800 py-3 mt-6 text-center rounded-xl font-bold text-lg">
    <b>🔥 최종 발표:</b> AI가 써준 선언문을 내 말투로 예쁘게 고쳐서 친구들 앞에서 발표하세요!
  </div>
  <h1 class="text-center text-red-500 font-black text-6xl animate-pulse">
  🚨 설문 꼭 참여해주세요! 🚨
</h1>
</div>

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

<h1 class="text-7xl mb-6">👏🏽</h1>

<h2 class="font-black text-4xl leading-tight mb-12 text-slate-800">
  멋진 로고부터 비밀 장부 추리,<br>
  그리고 따뜻한 마음을 가진 AI 윤리까지!<br>
  꼬마 사장님 여러분, 진심으로 수고하셨습니다!
</h2>

<h1 class="text-red-500 font-black text-6xl animate-pulse">
  🚨 설문 꼭 참여해주세요! 🚨
</h1>

---
layout: center
class: bg-slate-900 text-white
---

## 🪄 AI 프롬프트 마법 기계 (가챠 게임)

<p class="text-slate-400 mb-8 text-center">똑같은 AI라도 사장님이 어떻게 말하느냐에 따라 결과는 천지차이! 버튼을 여러 번 눌러보세요.</p>

<PromptMachineMiddle />