<template>
  <HomeButton />
  <div class="reveal" ref="revealRef">
    <div class="slides">

      <section>
        <h2>🍱 AI 급식 특공대: 우리가 만드는 완벽한 식단</h2>
        <table class="table caption-top table-bordered card-1 p-3 shadow-sm" style="font-size: 0.8rem;">
          <caption class="mb-1 text-muted" style="font-size: 0.85rem;">초등학교 5학년 ~ 6학년 대상 (총 3차시 / 240분)</caption>
          <thead class="table-light text-center">
            <tr>
              <th width="12%">구분</th>
              <th width="13%">교시</th>
              <th width="55%">학습 주제</th>
              <th width="10%">소요시간</th>
              <th width="10%">이동</th>
            </tr>
          </thead>
          <tbody>
            <tr class="table-dark text-white">
              <td class="align-middle text-center fw-bold">Prologue</td>
              <td class="align-middle text-center">오프닝</td>
              <td><div class="p-2 fw-bold text-warning">🪄 AI 프롬프트 마법 기계 (우리는 왜 질문을 잘해야 할까?)</div></td>
              <td class="align-middle text-center">10분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-warning" @click="goSlide(29)" style="cursor:pointer"></i></td>
            </tr>
            <tr class="table-info">
              <td rowspan="4" class="align-middle text-center fw-bold">1차시<br>(AI 영양사)</td>
              <td class="align-middle text-center">1교시</td>
              <td><div class="py-1 fw-bold">특공대 결성! 절대 규칙과 첫 질문 던지기</div></td>
              <td class="align-middle text-center">10분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-primary" @click="goSlide(1)" style="cursor:pointer"></i></td>
            </tr>
            <tr>
              <td class="align-middle text-center">1교시</td>
              <td><div class="py-1 fw-bold">AI 영양사 훈련시키기 (숨은 함정 피하기)</div></td>
              <td class="align-middle text-center">30분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-primary" @click="goSlide(2)" style="cursor:pointer"></i></td>
            </tr>
            <tr>
              <td class="align-middle text-center">2교시</td>
              <td><div class="py-1 fw-bold">바이브 코딩 1: 특공대 뱃지 로고 그리기</div></td>
              <td class="align-middle text-center">20분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-primary" @click="goSlide(5)" style="cursor:pointer"></i></td>
            </tr>
            <tr class="border-bottom-bold">
              <td class="align-middle text-center">2교시</td>
              <td><div class="py-1 fw-bold">바이브 코딩 2: 우리 학교 급식실 간판 만들기</div></td>
              <td class="align-middle text-center">20분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-primary" @click="goSlide(7)" style="cursor:pointer"></i></td>
            </tr>

            <tr class="table-success">
              <td rowspan="8" class="align-middle text-center fw-bold">2차시<br>(데이터 탐정)</td>
              <td class="align-middle text-center">1교시</td>
              <td><div class="py-1 fw-bold">민초청국장 투표 및 데이터 탐구</div></td>
              <td class="align-middle text-center">15분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-success" @click="goSlide(9)" style="cursor:pointer"></i></td>
            </tr>
            <tr>
              <td class="align-middle text-center">1교시</td>
              <td><div class="py-1 fw-bold">급식실에 비상이? 식단 장부 다운로드</div></td>
              <td class="align-middle text-center">10분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-success" @click="goSlide(12)" style="cursor:pointer"></i></td>
            </tr>
            <tr>
              <td class="align-middle text-center">1교시</td>
              <td><div class="py-1 fw-bold">매의 눈 관찰: 어이없는 오타와 고장 찾기</div></td>
              <td class="align-middle text-center">15분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-success" @click="goSlide(13)" style="cursor:pointer"></i></td>
            </tr>
            <tr>
              <td class="align-middle text-center">1교시</td>
              <td><div class="py-1 fw-bold">명탐정 추리: 말이 안 되는 가짜 메뉴 찾기</div></td>
              <td class="align-middle text-center">15분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-success" @click="goSlide(14)" style="cursor:pointer"></i></td>
            </tr>
            <tr>
              <td class="align-middle text-center">2교시</td>
              <td><div class="py-1 fw-bold text-success">CODAP 넌 누구냐? 기초 탐험</div></td>
              <td class="align-middle text-center">10분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-success" @click="goSlide(15)" style="cursor:pointer"></i></td>
            </tr>
            <tr>
              <td class="align-middle text-center">2교시</td>
              <td><div class="py-1 fw-bold">CODAP: 그래프로 범인 몽타주 그리기</div></td>
              <td class="align-middle text-center">15분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-success" @click="goSlide(16)" style="cursor:pointer"></i></td>
            </tr>
            <tr>
              <td class="align-middle text-center">2교시</td>
              <td><div class="py-1 fw-bold text-danger">워드클라우드: 잔반통에서 찾은 학생들의 속마음</div></td>
              <td class="align-middle text-center">10분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-danger" @click="goSlide(18)" style="cursor:pointer"></i></td>
            </tr>
            <tr class="border-bottom-bold">
              <td class="align-middle text-center">2교시</td>
              <td><div class="py-1 fw-bold">특공대의 결단 (급식 작전 변경 발표하기)</div></td>
              <td class="align-middle text-center">10분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-success" @click="goSlide(19)" style="cursor:pointer"></i></td>
            </tr>

            <tr class="table-warning">
              <td rowspan="6" class="align-middle text-center fw-bold">3차시<br>(미래 자율주행과<br>착한 AI)</td>
              <td class="align-middle text-center">1교시</td>
              <td><div class="py-1 fw-bold">뚝딱뚝딱! 자율주행 자동차 조립</div></td>
              <td class="align-middle text-center">15분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-warning" @click="goSlide(23)" style="cursor:pointer"></i></td>
            </tr>
            <tr>
              <td class="align-middle text-center">1교시</td>
              <td><div class="py-1 fw-bold">자동차는 어떻게 혼자 달릴까?</div></td>
              <td class="align-middle text-center">10분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-warning" @click="goSlide(25)" style="cursor:pointer"></i></td>
            </tr>
            <tr>
              <td class="align-middle text-center">1교시</td>
              <td><div class="py-1 fw-bold">자동차의 세 가지 마법의 눈 (센서)</div></td>
              <td class="align-middle text-center">10분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-warning" @click="goSlide(26)" style="cursor:pointer"></i></td>
            </tr>
            <tr>
              <td class="align-middle text-center">1교시</td>
              <td><div class="py-1 fw-bold">X-파일: 똑똑한 AI는 왜 사고를 냈을까?</div></td>
              <td class="align-middle text-center">10분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-warning" @click="goSlide(27)" style="cursor:pointer"></i></td>
            </tr>
            <tr>
              <td class="align-middle text-center">2교시</td>
              <td><div class="py-1 fw-bold">트롤리 딜레마: 자율주행 자동차의 선택은?</div></td>
              <td class="align-middle text-center">15분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-warning" @click="goSlide(28)" style="cursor:pointer"></i></td>
            </tr>
            <tr class="border-bottom-bold">
              <td class="align-middle text-center">2교시</td>
              <td><div class="py-1 fw-bold">안전한 자율주행 선언문: 우리의 약속 발표</div></td>
              <td class="align-middle text-center">20분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-warning" @click="goSlide(30)" style="cursor:pointer"></i></td>
            </tr>
          </tbody>
        </table>
      </section>

      <section>
        <h2>🤔 1차시: 상상 속 메뉴와 진짜 현실 (절대 규칙)</h2>
        <p>여러분은 오늘부터 우리 학교 메뉴 개편단입니다! 다음 <b>[세 가지 절대 규칙]</b>을 지켜 일주일치 식단을 짜야 합니다.</p>

        <div class="card bg-dark text-white mb-3 shadow">
          <div class="card-body p-3 d-flex justify-content-around align-items-center flex-wrap" style="font-size: 0.95rem;">
            <div class="m-1">🗓️ <b>기간:</b> 무조건 <b>1주일치 식단</b></div>
            <div class="m-1">🍱 <b>메뉴 개수:</b> 무조건 <b>밥 1, 국 1, 반찬 5, 후식 1</b></div>
            <div class="m-1">🏫 <b>먹는 사람:</b> 전교생 <b>700명</b> (1~6학년)</div>
          </div>
        </div>

        <div class="row mt-2">
          <div class="col-md-6">
            <div class="card border-danger h-100 text-left">
              <div class="card-header bg-danger text-white fw-bold py-2">❌ 바보 같은 질문 예시 1</div>
              <div class="card-body" style="font-size: 0.8rem;">
                <p class="fst-italic">"AI야, 애들이 좋아하는 걸로 밥 1, 국 1, 반찬 5개, 후식 1개 해서 일주일치 식단 짜줘!"</p>
                <hr class="my-1">
                <p class="text-danger fw-bold mb-0">👉 AI의 거짓말: AI는 "좋습니다! 매일매일 최고급 랍스터와 스테이크를 드릴게요!"라고 엄청난 메뉴를 줍니다.</p>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card border-warning h-100 text-left">
              <div class="card-header bg-warning text-dark fw-bold py-2">❌ 바보 같은 질문 예시 2</div>
              <div class="card-body" style="font-size: 0.8rem;">
                <p class="fst-italic">"요즘 유행하는 매운 마라탕이랑 불닭볶음면, 탕후루로 구성해서 일주일 식단 짜줘!"</p>
                <hr class="my-1">
                <p class="text-danger fw-bold mb-0">👉 놓친 점: 1학년 동생들은 매워서 응급실에 실려가고, 영양사 선생님은 설탕 덩어리라고 화를 내실 거예요!</p>
              </div>
            </div>
          </div>
        </div>
        
        <div class="card border-primary mt-3 text-left shadow-sm">
          <div class="card-header bg-primary text-white fw-bold py-2">
            📝 미션: AI에게 묻기 전, 우리 특공대만의 콘셉트 정하기!
          </div>
          <div class="card-body p-2" style="font-size: 0.85rem;">
            <p class="text-dark fw-bold mb-2 text-center">
              먼저 일주일 중 <b>'주 1일 컨셉데이'</b>를 조원들과 정하고, <b>'매일 메뉴가 겹치지 않게'</b> 계획해 보세요!
            </p>
            <div class="row text-center fw-bold px-2">
              <div class="col-4 mb-2"><span class="badge bg-light text-dark border w-100 py-2">💪 튼튼해지는 수요일 (단백질 최고)</span></div>
              <div class="col-4 mb-2"><span class="badge bg-light text-dark border w-100 py-2">🌏 지구를 지키는 목요일 (채식)</span></div>
              <div class="col-4 mb-2"><span class="badge bg-light text-dark border w-100 py-2">🎉 축제 같은 금요일 (분식 파티)</span></div>
            </div>
            <p class="mb-1 mt-2 text-primary fw-bold text-center">
              👉 이 콘셉트와 [절대 규칙], 그리고 [메뉴 겹치지 않기] 조건을 섞어서 AI에게 첫 번째 식단을 짜달라고 명령하세요!
            </p>
          </div>
        </div>
      </section>

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

        <div class="card text-left mt-3">
          <div class="card-header bg-dark text-white fw-bold">🚨 1차 함정: 예산과 조리사 선생님의 시간</div>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">
              <div class="d-flex align-items-center justify-content-between" @click="toggleTrap(0)" style="cursor: pointer;">
                <span class="fs-5 fw-bold text-primary">함정 1. "랍스터 파티? 학교 파산!"</span>
                <span style="font-size: 1.2rem; transition: transform 0.3s;" :style="{ transform: showTrap[0] ? 'rotate(180deg)' : 'rotate(0deg)' }">⬇️</span>
              </div>
              <div v-if="showTrap[0]" class="mt-2 text-muted" style="font-size: 0.9rem;">
                우리 학교 1인당 식재료비 예산은 <b>딱 4,000원</b>입니다. 랍스터 1인분은 3만 원이 넘어요!
                <br><strong class="text-danger">👉 AI에게 "1인당 예산이 4,000원이야! 가격 데이터 확인해서 너무 비싼 메뉴는 다 빼버려!"라고 명령하세요.</strong>
              </div>
            </li>
            <li class="list-group-item">
              <div class="d-flex align-items-center justify-content-between mt-2" @click="toggleTrap(1)" style="cursor: pointer;">
                <span class="fs-5 fw-bold text-primary">함정 2. "12시간 사골국? 선생님들 쓰러지셔!"</span>
                <span style="font-size: 1.2rem; transition: transform 0.3s;" :style="{ transform: showTrap[1] ? 'rotate(180deg)' : 'rotate(0deg)' }">⬇️</span>
              </div>
              <div v-if="showTrap[1]" class="mt-2 text-muted" style="font-size: 0.9rem;">
                급식실 조리사 선생님들에게 주어진 조리 시간은 총 <b>180분(3시간)</b>뿐입니다.
                <br><strong class="text-danger">👉 AI에게 "반찬 5개랑 국을 180분 안에 다 만들어야 해! 조리 시간 데이터를 180분 밑으로 다시 맞춰!"라고 압박하세요.</strong>
              </div>
            </li>
          </ul>
        </div>
      </section>

      <section>
        <h2>🥊 AI 훈련시키기: Round 2 (동생들의 비명)</h2>
        <p>싸고 빨리 만들 수 있다고요? 과연 700명이 다 맛있게 먹을 수 있을까요?</p>

        <div class="card text-left mt-3">
          <div class="card-header bg-dark text-white fw-bold">🚨 2차 함정: 보편성과 영양 불균형</div>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">
              <div class="d-flex align-items-center justify-content-between" @click="toggleTrap(2)" style="cursor: pointer;">
                <span class="fs-5 fw-bold text-primary">함정 3. "1학년 동생들의 폭풍 눈물 (지옥의 마라탕)"</span>
                <span style="font-size: 1.2rem; transition: transform 0.3s;" :style="{ transform: showTrap[2] ? 'rotate(180deg)' : 'rotate(0deg)' }">⬇️</span>
              </div>
              <div v-if="showTrap[2]" class="mt-2 text-muted" style="font-size: 0.9rem;">
                6학년이 좋아하는 맵고 자극적인 음식은 1학년에겐 벌칙입니다. '보편성 데이터'가 엉망인 거죠.
                <br><strong class="text-danger">👉 AI에게 "1학년 동생들도 웃으면서 먹을 수 있게 '매운맛 데이터'를 확 낮춰서 다시 짜!"라고 명령하세요.</strong>
              </div>
            </li>
            <li class="list-group-item">
              <div class="d-flex align-items-center justify-content-between mt-2" @click="toggleTrap(3)" style="cursor: pointer;">
                <span class="fs-5 fw-bold text-primary">함정 4. "잔반통 폭발! (억지 건강식)"</span>
                <span style="font-size: 1.2rem; transition: transform 0.3s;" :style="{ transform: showTrap[3] ? 'rotate(180deg)' : 'rotate(0deg)' }">⬇️</span>
              </div>
              <div v-if="showTrap[3]" class="mt-2 text-muted" style="font-size: 0.9rem;">
                그렇다고 나물 5개만 주면 어떻게 될까요? 선호도 점수가 0점이 되어 잔반통이 산처럼 쌓일 겁니다.
                <br><strong class="text-danger">👉 AI에게 "건강도 챙기면서 선호도(맛) 점수도 8점 이상 나오게 야채를 맛있게 요리하는 법으로 바꿔!"라고 명령하세요.</strong>
              </div>
            </li>
          </ul>
        </div>
      </section>

      <section>
        <h2>🥊 AI 훈련시키기: Round 3 (보이지 않는 위험)</h2>
        <p>드디어 완벽해 보이나요? 데이터 사이언티스트라면 '디테일'을 봐야 합니다!</p>

        <div class="card text-left mt-3">
          <div class="card-header bg-dark text-danger fw-bold">🚨 최종 함정: 알레르기와 기계 부족</div>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">
              <div class="d-flex align-items-center justify-content-between" @click="toggleTrap(4)" style="cursor: pointer;">
                <span class="fs-5 fw-bold text-primary">함정 5. 생명을 위협하는 견과류 폭탄</span>
                <span style="font-size: 1.2rem; transition: transform 0.3s;" :style="{ transform: showTrap[4] ? 'rotate(180deg)' : 'rotate(0deg)' }">⬇️</span>
              </div>
              <div v-if="showTrap[4]" class="mt-2 text-muted" style="font-size: 0.9rem;">
                땅콩이나 호두가 몸에 좋다고 모든 반찬에 넣었나요? 전교생 중 알레르기가 있는 20명에겐 독약입니다.
                <br><strong class="text-danger">👉 AI에게 "알레르기 안전 데이터 확인해! 알레르기 유발 물질이 있는 반찬은 대체 재료로 다 바꿔!"라고 지시하세요.</strong>
              </div>
            </li>
            <li class="list-group-item">
              <div class="d-flex align-items-center justify-content-between mt-2" @click="toggleTrap(5)" style="cursor: pointer;">
                <span class="fs-5 fw-bold text-primary">함정 6. 튀김기 쟁탈전 (오븐은 하나뿐)</span>
                <span style="font-size: 1.2rem; transition: transform 0.3s;" :style="{ transform: showTrap[5] ? 'rotate(180deg)' : 'rotate(0deg)' }">⬇️</span>
              </div>
              <div v-if="showTrap[5]" class="mt-2 text-muted" style="font-size: 0.9rem;">
                반찬 5개가 전부 돈가스, 치킨, 새우튀김, 오징어튀김, 감자튀김이라면? 급식실 튀김기는 2대뿐이라 다 튀기려면 밤을 새워야 해요.
                <br><strong class="text-danger">👉 AI에게 "오븐 요리 1개, 튀김 요리 1개, 무침 2개, 볶음 1개처럼 '조리 방법' 데이터가 겹치지 않게 분산시켜!"라고 지시하세요.</strong>
              </div>
            </li>
          </ul>
        </div>
      </section>

      <section>
        <h2>🎨 2교시: 바이브 코딩 (숫자로 그리는 마법)</h2>
        <p>AI 영양사와의 씨름이 끝났습니다! 이제 멋진 식단을 뽐낼 <b>급식 특공대 뱃지 로고</b>를 코딩으로 그려봐요!</p>
        
        <div class="row text-left mt-4">
          <div class="col-md-6">
            <div class="card bg-light p-3 h-100 shadow-sm border-0">
              <h5 class="fw-bold text-primary">💡 Vibe Coding이란?</h5>
              <p style="font-size: 0.85rem;">"그냥 예쁘게 그려줘"라고 말하면 컴퓨터는 못 알아들어요.<br>대신, <b>"거북아, 앞으로 50만큼 가고 90도 꺾어서 초록색 선으로 그려줘"</b>처럼 명확한 숫자(코드) 데이터로 컴퓨터에게 명령하는 방법입니다.</p>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card bg-dark text-white p-3 h-100 shadow-sm border-0">
              <h5 class="fw-bold text-warning">🛠️ 실습 방법</h5>
              <p style="font-size: 0.85rem;">
                1. 다음 장에 있는 파이썬(Python) 코드를 복사하세요.<br>
                2. 왼쪽 <b>Trinket 화면</b>에 붙여넣고 재생(▶) 버튼을 누르세요.<br>
                3. 코드 안의 색깔(color), 숫자(range, circle)를 바꿔가며 나만의 특공대 로고를 만드세요!
              </p>
            </div>
          </div>
        </div>
      </section>

      <section>
        <h3 class="mb-4">💻 내 마음대로 바꾸는 특공대 로고 3선</h3>
        <div class="row">
          <div class="col-md-6">
            <iframe src="https://trinket.io/embed/python/c283ebb4165a" width="100%" height="550" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
          </div>
          <div class="col-md-6 text-left" style="height: 550px; overflow-y: auto;">
            
            <div class="card mb-3 border-primary code-card">
              <div class="card-header bg-primary text-white fw-bold py-2 d-flex justify-content-between align-items-center">
                <span>디자인 A. 신선한 과일 모양</span>
                <button @click="copyCode($event)" class="btn btn-sm btn-light py-0 px-2 fw-bold copy-btn">복사</button>
              </div>
              <div class="card-body p-0 bg-light">
                <pre class="m-0"><code class="python" style="font-size: 0.75rem; padding: 15px; background: #272822; color: #f8f8f2; display: block;">
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()</code></pre>
              </div>
            </div>

            <div class="card mb-3 border-success code-card">
              <div class="card-header bg-success text-white fw-bold py-2 d-flex justify-content-between align-items-center">
                <span>디자인 B. 빙글빙글 달콤 사탕</span>
                <button @click="copyCode($event)" class="btn btn-sm btn-light py-0 px-2 fw-bold copy-btn">복사</button>
              </div>
              <div class="card-body p-0 bg-light">
                <pre class="m-0"><code class="python" style="font-size: 0.75rem; padding: 15px; background: #272822; color: #f8f8f2; display: block;">
import turtle
t = turtle.Turtle()
t.speed(0)
t.pensize(2)

colors = ["#FF69B4", "#FFF0F5"] # 핑크빛 2개
for i in range(40):
    t.color(colors[i % 2])
    t.circle(i * 3, 180) # 점점 커지는 반원 그리기
    t.right(10)          # 10도씩 오른쪽으로 꺾기
t.hideturtle()</code></pre>
              </div>
            </div>

            <div class="card mb-3 border-danger code-card">
              <div class="card-header bg-danger text-white fw-bold py-2 d-flex justify-content-between align-items-center">
                <span>디자인 C. 튼튼한 방패 모양</span>
                <button @click="copyCode($event)" class="btn btn-sm btn-light py-0 px-2 fw-bold copy-btn">복사</button>
              </div>
              <div class="card-body p-0 bg-light">
                <pre class="m-0"><code class="python" style="font-size: 0.75rem; padding: 15px; background: #272822; color: #f8f8f2; display: block;">
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()</code></pre>
              </div>
            </div>
            
          </div>
        </div>
      </section>

      <section>
        <h3 class="mb-4">🏪 우리 학교 급식실 간판 그리기 (좌표 마법)</h3>
        <div class="row">
          <div class="col-md-6">
            <iframe src="https://trinket.io/embed/python/fc9c1290a6ab" width="100%" height="550" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
          </div>
          
          <div class="col-md-6 text-left" style="height: 550px; overflow-y: auto;">
            
            <div class="card mb-3 border-info code-card">
              <div class="card-header bg-info text-white fw-bold py-2 d-flex justify-content-between align-items-center">
                <span>디자인 A. 건강 만점 나무 간판</span>
                <button @click="copyCode($event)" class="btn btn-sm btn-light py-0 px-2 fw-bold copy-btn">복사</button>
              </div>
              <div class="card-body p-0 bg-light">
                <pre class="m-0"><code class="python" style="font-size: 0.7rem; padding: 15px; background: #272822; color: #f8f8f2; display: block;">
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("#228B22")  # 초록색 테두리
    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("HEALTHY & YUMMY", align="center", font=("Arial", 20, "bold"))

    # 4. 밑에 슬로건 쓰기
    t.goto(0, -60)
    t.color("#FF4500")
    t.write("잔반 없는 날 도전!", align="center", font=("Malgun Gothic", 15, "normal"))

draw_sign()
</code></pre>
              </div>
            </div>

            <div class="card mb-3 border-dark code-card">
              <div class="card-header bg-dark text-white fw-bold py-2 d-flex justify-content-between align-items-center">
                <span>디자인 B. 눈에 확 띄는 전광판</span>
                <button @click="copyCode($event)" class="btn btn-sm btn-light py-0 px-2 fw-bold copy-btn">복사</button>
              </div>
              <div class="card-body p-0 bg-light">
                <pre class="m-0"><code class="python" style="font-size: 0.7rem; padding: 15px; background: #272822; color: #f8f8f2; display: block;">
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("#00FF00") # 형광 초록
t.write("AI 급식 특공대", align="center", font=("Courier", 30, "bold"))

t.goto(0, -40)
t.color("#FFFF00") # 노랑
t.write("1인당 예산 4000원!", align="center", font=("Courier", 15, "normal"))</code></pre>
              </div>
            </div>

          </div>
        </div>
        <div class="alert alert-warning mt-2 py-2" style="font-size: 0.8rem;">
          <b>🔥 오늘의 미션:</b> <code>t.goto(x, y)</code> 괄호 안의 숫자를 바꾸면 글씨가 이리저리 움직입니다! 우리 학교 이름으로 글씨를 바꿔보세요.
        </div>
      </section>

      <section>
        <h2 class="text-primary fw-bold mb-4">💡 2차시 시작 전 몸풀기! (1차시 복습)</h2>
        <div style="height: 500px; overflow-y: auto; padding: 10px;">
          
          <div class="card mb-4 text-left shadow-sm border-primary">
            <div class="card-body">
              <h5 class="fw-bold">Q1. AI에게 "맛있는 거 다 넣어줘!"라고 하면 알아서 학교 예산에 맞춰서 완벽하게 짜준다?</h5>
              <div class="d-flex justify-content-center gap-3 mt-3">
                <button class="btn btn-outline-primary w-50 fs-3 fw-bold py-2" :class="{'bg-primary text-white': ans_ox1 === 'O'}" @click="ans_ox1 = 'O'">O</button>
                <button class="btn btn-outline-danger w-50 fs-3 fw-bold py-2" :class="{'bg-danger text-white': ans_ox1 === 'X'}" @click="ans_ox1 = 'X'">X</button>
              </div>
              <div v-if="ans_ox1 === 'X'" class="alert alert-success mt-3 mb-0 fw-bold">🎉 정답! AI에게는 예산(4,000원) 같은 명확한 규칙을 주어야 랍스터로 파산하는 걸 막을 수 있어요!</div>
              <div v-if="ans_ox1 === 'O'" class="alert alert-danger mt-3 mb-0 fw-bold">❌ 오답! 한계를 정해주지 않으면 1인당 3만 원짜리 식단을 짜버릴지도 몰라요!</div>
            </div>
          </div>

          <div class="card mb-4 text-left shadow-sm border-primary">
            <div class="card-body">
              <h5 class="fw-bold">Q2. 급식 메뉴를 정할 때 1학년 동생들과 6학년 형들이 느끼는 매운맛 차이(보편성)는 무시해도 된다?</h5>
              <div class="d-flex justify-content-center gap-3 mt-3">
                <button class="btn btn-outline-primary w-50 fs-3 fw-bold py-2" :class="{'bg-primary text-white': ans_ox2 === 'O'}" @click="ans_ox2 = 'O'">O</button>
                <button class="btn btn-outline-danger w-50 fs-3 fw-bold py-2" :class="{'bg-danger text-white': ans_ox2 === 'X'}" @click="ans_ox2 = 'X'">X</button>
              </div>
              <div v-if="ans_ox2 === 'X'" class="alert alert-success mt-3 mb-0 fw-bold">🎉 정답! 모두가 함께 먹는 급식이니까 전교생이 먹을 수 있는 보편성 데이터를 고려해야 해요.</div>
              <div v-if="ans_ox2 === 'O'" class="alert alert-danger mt-3 mb-0 fw-bold">❌ 오답! 1학년 동생들이 매워서 응급실에 갈 수도 있어요!</div>
            </div>
          </div>

          <div class="card mb-4 text-left shadow-sm border-primary">
            <div class="card-body">
              <h5 class="fw-bold">Q3. 바이브 코딩(Vibe Coding)은 컴퓨터에게 "그냥 예쁘게 그려줘"라고 말하는 것이다?</h5>
              <div class="d-flex justify-content-center gap-3 mt-3">
                <button class="btn btn-outline-primary w-50 fs-3 fw-bold py-2" :class="{'bg-primary text-white': ans_ox3 === 'O'}" @click="ans_ox3 = 'O'">O</button>
                <button class="btn btn-outline-danger w-50 fs-3 fw-bold py-2" :class="{'bg-danger text-white': ans_ox3 === 'X'}" @click="ans_ox3 = 'X'">X</button>
              </div>
              <div v-if="ans_ox3 === 'X'" class="alert alert-success mt-3 mb-0 fw-bold">🎉 정답! 컴퓨터가 알아들을 수 있게 명확한 숫자(좌표, 각도)나 색상 코드로 명령해야 해요!</div>
              <div v-if="ans_ox3 === 'O'" class="alert alert-danger mt-3 mb-0 fw-bold">❌ 오답! 컴퓨터는 "예쁘게"라는 말을 이해하지 못해요.</div>
            </div>
          </div>

        </div>
      </section>

      <section>
        <h2 class="fw-bold text-success mb-4">🤮 앗! 오늘의 스페셜 메뉴: 민초청국장</h2>
        <p>방금까지 배운 '보편성'과 '선호도'를 직접 체험해봅시다.<br>여러분의 식판에 <b>'민트초코 청국장'</b>이 나왔습니다. 점수를 준다면?</p>
        <div class="card shadow-sm border-success mt-4">
          <div class="card-body">
            <h5 class="fw-bold text-dark mb-3">내 선호도 투표하기 (1점: 최악 ~ 10점: 최고)</h5>
            <div class="d-flex flex-wrap justify-content-center gap-2">
              <button v-for="i in 10" :key="i" class="btn fw-bold fs-4" :class="vote_mincho === i ? 'btn-success text-white' : 'btn-outline-success'" @click="vote_mincho = i" style="width: 50px; height: 50px;">{{ i }}</button>
            </div>
            <div v-if="vote_mincho" class="alert mt-4 fw-bold fs-5 pop-in-anim" :class="vote_mincho <= 3 ? 'alert-danger' : (vote_mincho <= 7 ? 'alert-warning' : 'alert-primary')">
              <span v-if="vote_mincho <= 3">😡 {{ vote_mincho }}점! "이걸 먹으라고 만든 건가요? 다 버릴 거예요!" (잔반 폭발)</span>
              <span v-else-if="vote_mincho <= 7">🤔 {{ vote_mincho }}점! "음... 배고프면 먹긴 할 텐데 두 번은 안 먹을 듯요."</span>
              <span v-else>😍 {{ vote_mincho }}점! "완전 내 취향! 매일 나왔으면 좋겠어요!" (잔반 제로)</span>
            </div>
          </div>
        </div>
      </section>

      <section>
        <h2 class="fw-bold text-primary mb-4">📊 어떤 데이터들이 필요할까요?</h2>
        <p>방금 투표했던 <b>선호도(1~10)</b>처럼 '숫자로 말할 수 있는 데이터'가 있어야 AI가 식단을 짤 수 있습니다.<br>급식 메뉴를 정할 때 필요한 숫자 데이터 2가지를 더 고민해보세요!</p>
        <div class="row mt-4">
          <div class="col-md-6 mb-3">
            <div class="card border-primary h-100 shadow-sm" @click="showDataHint1 = true" style="cursor: pointer;">
              <div class="card-body d-flex flex-column justify-content-center align-items-center" style="min-height: 150px;">
                <h5 v-if="!showDataHint1" class="fw-bold text-muted">🤔 힌트 1 확인하기 (클릭)</h5>
                <div v-else class="pop-in-anim">
                  <i class="fa fa-coins fa-3x text-warning mb-2"></i>
                  <h4 class="fw-bold text-dark">가격 (원)</h4>
                  <p class="text-muted" style="font-size: 0.85rem;">"1인당 예산을 맞추려면 메뉴마다 얼만지 알아야 해요!"</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6 mb-3">
            <div class="card border-danger h-100 shadow-sm" @click="showDataHint2 = true" style="cursor: pointer;">
              <div class="card-body d-flex flex-column justify-content-center align-items-center" style="min-height: 150px;">
                <h5 v-if="!showDataHint2" class="fw-bold text-muted">🤔 힌트 2 확인하기 (클릭)</h5>
                <div v-else class="pop-in-anim">
                  <i class="fa fa-fire fa-3x text-danger mb-2"></i>
                  <h4 class="fw-bold text-dark">매운맛 단계 (1~5)</h4>
                  <p class="text-muted" style="font-size: 0.85rem;">"1학년 동생들도 먹을 수 있는지 숫자로 나눠야 해요!"</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="alert alert-info mt-3 fw-bold shadow-sm" style="font-size: 0.9rem;">
          💡 이 외에도 조리시간(분), 칼로리(kcal), 나트륨(mg) 등 다양한 숫자 데이터가 필요합니다!
        </div>
      </section>

      <section data-background="#0f172a" class="text-white">
        <h3 class="text-info fw-bold mb-2">👾 긴급 출동: AI 급식 셰프를 구하라!</h3>
        <p class="text-muted mb-3" style="font-size: 0.85rem;">나쁜 데이터(이상치)를 먹으면 똑똑한 AI도 바보가 됩니다. 셰프의 머릿속을 청소해주세요!</p>

        <div class="ai-chef-console shadow-lg rounded-4 overflow-hidden" style="max-width: 900px; margin: 0 auto; background-color: #1e293b; border: 3px solid #64748b;">
          
          <div class="bg-dark p-2 border-bottom border-secondary text-center">
            <span v-if="chef_status === 'crazy'" class="text-danger fw-bold blink-anim">⚠️ 시스템 오류: AI 셰프가 제정신이 아닙니다! ⚠️</span>
            <span v-else class="text-success fw-bold">✅ 시스템 정상: 완벽한 식단 준비 완료</span>
          </div>

          <div class="d-flex" style="height: 400px;">
            <div class="flex-grow-1 p-3 border-end border-secondary d-flex flex-column align-items-center justify-content-center bg-black">
              <div class="chef-character mb-3">
                <i class="fa fa-robot fa-4x" :class="chef_status === 'crazy' ? 'text-danger shake-anim' : 'text-info'"></i>
                <i class="fa fa-utensils text-white ms-2"></i>
              </div>
              
              <div class="speech-bubble p-3 bg-white text-dark rounded-3 position-relative" style="width: 80%;">
                <div v-if="chef_status === 'crazy'" class="fw-bold text-center">
                  "오늘의 추천 메뉴는... <br> <span class="text-danger">🔥 초콜릿 비빔밥</span> 입니다!"
                </div>
                <div v-else class="fw-bold text-center">
                  "오늘의 추천 메뉴는... <br> <span class="text-primary">🍱 맛있는 불고기 정식</span> 입니다!"
                </div>
              </div>
              <p class="mt-3 text-muted" style="font-size: 0.7rem;">*나쁜 데이터를 제거하지 않으면 이런 요리가 나와요!</p>
            </div>

            <div class="p-3 bg-dark" style="width: 450px;">
              <h6 class="text-warning fw-bold mb-3" style="font-size: 0.9rem;">🧹 AI의 기억 속 '스파이 데이터' 제거</h6>
              <div class="d-flex flex-wrap gap-2 justify-content-center">
                <div v-for="data in memory_data" :key="data.id" 
                    class="data-chip p-2 rounded-3 text-center transition-all"
                    :class="data.removed ? 'opacity-0 scale-down' : (data.isSpy ? 'bg-danger-subtle' : 'bg-light')"
                    @click="cleanData(data)"
                    style="width: 100px; cursor: pointer;">
                  <i class="fa mb-1" :class="[data.icon, data.isSpy ? 'text-danger' : 'text-primary']"></i>
                  <div class="text-dark fw-bold" style="font-size: 0.7rem;">{{ data.name }}</div>
                  <div class="text-muted" style="font-size: 0.6rem;">{{ data.val }}</div>
                </div>
              </div>
              
              <div class="mt-4 p-2 bg-secondary rounded text-white" style="font-size: 0.75rem;">
                <div v-if="spy_count > 0">
                  🔎 <b>남은 스파이:</b> {{ spy_count }}개 <br>
                  (가격이 너무 비싸거나, 메뉴가 이상한 것들을 찾으세요!)
                </div>
                <div v-else class="text-warning fw-bold">
                  ✨ 모든 스파이 제거 완료! AI가 다시 똑똑해졌어요!
                </div>
              </div>
            </div>
          </div>

          <div class="p-2 bg-secondary text-center text-white" style="font-size: 0.8rem;">
            이렇게 눈에 띄게 이상한 값을 <b>'이상치(Outlier)'</b>라고 해요. <br>
            이걸 안 지우면 AI는 <b>바보</b>가 되어버려요! 이제 진짜 장부에서 이상치를 찾으러 가볼까요?
          </div>

          <div class="bg-dark p-2 d-flex justify-content-end border-top border-secondary">
            <button class="btn btn-sm btn-outline-info fw-bold px-3" @click="resetChefGame">
              <i class="fa fa-redo me-1"></i> 데이터 다시 섞기
            </button>
          </div>
        </div>
      </section>

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

        <div class="card mb-3 bg-light shadow-sm">
          <div class="card-body text-center py-4">
            <h4 class="fw-bold mb-3 text-danger">🚨 긴급 입수: AI가 짠 50가지 메뉴 데이터</h4>
            
            <div class="alert alert-warning d-inline-block text-start mb-4 shadow-sm" style="font-size: 0.95rem;">
              <h6 class="fw-bold mb-1">💡 데이터 탐정을 위한 힌트 (정상적인 메뉴 기준)</h6>
              ✔️ <b>1인당 가격:</b> 평균 1,000원 ~ 1,500원 (합쳐서 4,000원이 되어야 하니까요!)<br>
              ✔️ <b>조리 시간:</b> 반찬 하나당 보통 30분 ~ 50분 (합쳐서 180분!)<br>
              ✔️ <b>선호도:</b> 점수가 높으면 보통 잔반량(버리는 양)은 적어야 정상!
            </div>

            <p style="font-size: 0.9rem;" class="mb-4">
              아래 버튼을 눌러 데이터를 다운받아 엑셀로 열어보세요. <br>
              분명히 엄청나게 말도 안 되는 메뉴(오류 데이터)가 숨어있습니다!
            </p>
            
            <div class="d-flex justify-content-center gap-3">
              <button @click="downloadData('excel')" class="btn btn-success px-4 fw-bold shadow">
                <i class="fa fa-file-excel me-2"></i> 엑셀 확인용 (.xlsx)
              </button>
            </div>

            <div class="mt-3 text-center">
              <a href="https://doconut.app/ko/products/excel" target="_blank" class="btn btn-outline-secondary fw-bold shadow-sm" style="font-size: 0.85rem;">
                <i class="fa fa-external-link-alt me-2"></i> 다운받은 엑셀 파일 여기서 열어보기 (온라인 엑셀 뷰어)
              </a>
            </div>

            <div class="mt-4 pt-3 border-top text-muted" style="font-size: 0.75rem;">
              <b>장부에 있는 항목:</b> 번호, 메뉴이름, 가격(원), 조리시간(분), 보편성점수, 선호도, 예상잔반량(kg), 비고
            </div>
          </div>
        </div>
      </section>

      <section>
        <h2>🕵️ 매의 눈 관찰: 어이없는 실수 찾기</h2>
        <p>어려운 그래프를 그리기 전에 먼저 눈으로 찾아봅시다. <b>딱 봐도 입력 오타가 났거나 단위가 틀린 메뉴</b>를 찾아보세요.</p>
        
        <div class="card text-left mt-3 border-dark">
          <div class="card-header bg-dark text-white fw-bold">🚨 1단계 추리: 손가락 실수와 기계 오류</div>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">
              <div class="d-flex align-items-center justify-content-between" @click="toggleAnomaly(0)" style="cursor: pointer;">
                <span class="fs-5 fw-bold text-primary">🔍 사건 1. "후식 하나 먹고 학교 기둥 뽑히겠다!"</span>
                <span style="font-size: 1.2rem; transition: transform 0.3s;" :style="{ transform: showAnomaly[0] ? 'rotate(180deg)' : 'rotate(0deg)' }">⬇️</span>
              </div>
              <div v-if="showAnomaly[0]" class="mt-2 text-muted" style="font-size: 0.9rem;">
                <b>👉 범인 메뉴: 황금 멜론 (가격 45,000원)</b><br>
                1인당 총예산이 4,000원인데 멜론 한 조각이 45,000원이라뇨! 입력할 때 0을 하나 더 쳤거나 가격 책정이 완전히 잘못된 데이터입니다.
              </div>
            </li>
            <li class="list-group-item">
              <div class="d-flex align-items-center justify-content-between mt-2" @click="toggleAnomaly(1)" style="cursor: pointer;">
                <span class="fs-5 fw-bold text-primary">🔍 사건 2. "밥만 10시간 짓는 조리사 선생님?"</span>
                <span style="font-size: 1.2rem; transition: transform 0.3s;" :style="{ transform: showAnomaly[1] ? 'rotate(180deg)' : 'rotate(0deg)' }">⬇️</span>
              </div>
              <div v-if="showAnomaly[1]" class="mt-2 text-muted" style="font-size: 0.9rem;">
                <b>👉 범인 메뉴: 쌀밥 (조리시간 600분)</b><br>
                보통 60분이면 되는 밥 짓기가 600분으로 적혀있네요. 분 단위를 시간 단위로 착각했거나 0을 더 붙인 명백한 실수입니다.
              </div>
            </li>
          </ul>
        </div>
      </section>

      <section>
        <h2>🕵️ 명탐정 추리: 말이 안 되는 가짜 메뉴 찾기</h2>
        <p>이번엔 머리를 써야 합니다. 숫자는 정상 같지만, <b>서로 비교해 보면 모순이 생기는(말이 안 되는) 데이터</b>를 찾아보세요!</p>

        <div class="card text-left mt-3 border-danger">
          <div class="card-header bg-danger text-white fw-bold">🚨 2단계 추리: 데이터의 모순점 찾기</div>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">
              <div class="d-flex align-items-center justify-content-between" @click="toggleAnomaly(2)" style="cursor: pointer;">
                <span class="fs-5 fw-bold text-danger">🔍 사건 3. "그렇게 좋아한다면서 왜 다 버렸어?"</span>
                <span style="font-size: 1.2rem; transition: transform 0.3s;" :style="{ transform: showAnomaly[2] ? 'rotate(180deg)' : 'rotate(0deg)' }">⬇️</span>
              </div>
              <div v-if="showAnomaly[2]" class="mt-2 text-muted" style="font-size: 0.9rem;">
                <b>👉 범인 메뉴: 브로콜리 젤리 (선호도 10점, 잔반 500kg)</b><br>
                선호도 점수가 10점 만점인데, 잔반(버려지는 양)이 500kg이나 됩니다. AI가 브로콜리를 강제로 먹이려고 선호도 점수를 조작(오염)한 겁니다!
              </div>
            </li>
            <li class="list-group-item">
              <div class="d-flex align-items-center justify-content-between mt-2" @click="toggleAnomaly(3)" style="cursor: pointer;">
                <span class="fs-5 fw-bold text-danger">🔍 사건 4. "1학년 동생이 불을 뿜으며 다 먹었다고?"</span>
                <span style="font-size: 1.2rem; transition: transform 0.3s;" :style="{ transform: showAnomaly[3] ? 'rotate(180deg)' : 'rotate(0deg)' }">⬇️</span>
              </div>
              <div v-if="showAnomaly[3]" class="mt-2 text-muted" style="font-size: 0.9rem;">
                <b>👉 범인 메뉴: 핵불닭볶음면 (보편성 10점)</b><br>
                전교생 누구나 잘 먹는다는 뜻인 '보편성' 점수가 만점입니다. 아주 매운 음식인데 1학년 동생들까지 다 잘 먹는다는 건 완전한 거짓 데이터입니다.
              </div>
            </li>
          </ul>
        </div>
      </section>

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

        <div class="row align-items-center mt-4">
          <div class="col-5">
            <div class="card bg-dark text-white p-2 shadow-sm" style="font-size: 0.75rem;">
              <table class="table table-dark table-sm mb-0">
                <thead><tr><th>메뉴</th><th>선호도</th></tr></thead>
                <tbody>
                  <tr><td>마라탕</td><td>9</td></tr>
                  <tr><td>민초청국장</td><td>2</td></tr>
                  <tr><td>돈가스</td><td>10</td></tr>
                  <tr><td>가지무침</td><td>3</td></tr>
                </tbody>
              </table>
            </div>
            <div class="mt-2 text-muted fw-bold">어지러운 숫자 데이터 😵</div>
          </div>
          <div class="col-2 text-center">
            <i class="fa fa-arrow-right fa-3x text-success"></i><br>
            <span class="badge bg-success mt-2 fs-6">CODAP</span>
          </div>
          <div class="col-5">
            <div class="card bg-white p-3 shadow-sm border-success d-flex align-items-center justify-content-center" style="height: 140px;">
              <div class="d-flex align-items-end gap-2" style="height: 80px;">
                <div class="bg-primary rounded-top" style="width: 20px; height: 90%;"></div>
                <div class="bg-danger rounded-top" style="width: 20px; height: 20%;"></div>
                <div class="bg-info rounded-top" style="width: 20px; height: 100%;"></div>
                <div class="bg-warning rounded-top" style="width: 20px; height: 30%;"></div>
              </div>
            </div>
            <div class="mt-2 text-muted fw-bold">한눈에 보이는 그래프 🤩</div>
          </div>
        </div>
        <div class="alert alert-warning mt-4 fw-bold shadow-sm" style="font-size: 0.9rem;">
          👉 선호도가 낮은 메뉴를 찾아내려면, 엑셀 표를 뚫어져라 보는 것보다 <b>그래프에서 뚝 떨어진 점</b>을 찾는 게 훨씬 빠릅니다! 다음 페이지에서 직접 해볼까요?
        </div>
      </section>

      <section>
        <h2>📈 CODAP: 그래프로 범인 몽타주 그리기</h2>

        <div class="d-flex justify-content-center gap-3 mb-4">
          <button @click="downloadData('csv')" class="btn btn-primary px-4 py-2 fw-bold shadow">
            <i class="fa fa-file-alt me-2"></i> 식단 장부 다운로드 (CSV)
          </button>
          <a href="https://codap.concord.org/beta" target="_blank" class="btn btn-danger text-white px-4 py-2 fw-bold shadow d-flex align-items-center">
            <i class="fa fa-external-link-alt me-2"></i> CODAP 탐험 도구 열기
          </a>
        </div>

        <p style="font-size: 0.9rem;">태블릿이나 PC에서 CODAP을 열고, 아까 다운받은 식단 장부(CSV)를 마법처럼 끌어다 놓아봅시다.</p>
        
        <div style="display:flex; justify-content:center; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; font-size: 0.75rem;">
          <div style="padding:8px; background-color:#E6E6FA; border-radius:5px; text-align:center;">
            <b>CODAP 열기</b><br>새 문서 만들기
          </div>
          <div>➡️</div>
          <div style="padding:8px; background-color:#FFE4B5; border-radius:5px; text-align:center;">
            바탕화면에 있는<br><b>CSV 파일 마우스로 드래그!</b>
          </div>
          <div>➡️</div>
          <div style="padding:8px; background-color:#FFB6C1; border-radius:5px; text-align:center;">
            가운데 <b>[그래프]</b> 누르고<br>X축, Y축에 글자 끌어놓기
          </div>
          <div>➡️</div>
          <div style="padding:8px; background-color:#98FB98; border-radius:5px; text-align:center; font-weight:bold;">
            탐정의 돋보기 기술로<br>진짜 몽타주 찾기!
          </div>
        </div>

        <div class="card mt-3 mb-3 text-left border-dark shadow-sm">
          <div class="card-header bg-dark text-white fw-bold py-2" style="font-size: 0.85rem;">
            🕵️ 필수 기술: 가짜 데이터 지우고 돋보기 들이대기 (Rescale)
          </div>
          <div class="card-body bg-light p-2" style="font-size: 0.8rem;">
            <p class="mb-2">저 멀리 도망가 있는 '이상한 점(가짜 데이터)' 때문에 그래프가 너무 작아져서 안 보이나요? 이렇게 해결하세요!</p>
            <ol class="mb-0">
              <li class="mb-1">이상한 점을 클릭해서 선택합니다. (예: 가격이 하늘 끝에 있는 점)</li>
              <li class="mb-1">그래프 옆 <b>눈 모양 아이콘(👁️)</b>을 누르고 <b>[선택한 데이터 숨기기]</b>를 클릭하세요.</li>
              <li class="text-danger fw-bold">가장 중요! 그래프 오른쪽 위 <b>[모든 데이터를 표시하도록 화면크기조정(십자 화살표 🔀)]</b> 버튼을 누르세요.</li>
            </ol>
          </div>
        </div>

        <div class="card text-left border-primary">
          <div class="card-header bg-primary text-white fw-bold py-2" style="font-size: 0.9rem;">🎯 탐험대의 미션 2가지</div>
          <ul class="list-group list-group-flush" style="font-size: 0.85rem;">
            <li class="list-group-item">
              <div class="d-flex align-items-center justify-content-between" @click="toggleMission(0)" style="cursor: pointer;">
                <b>🔥 미션 1. 하늘 끝에 있는 가격과 시간 찾기</b>
                <span class="badge bg-secondary">힌트 보기 ⬇️</span>
              </div>
              <p class="mb-1 text-muted" style="font-size: 0.75rem;">예산과 조리 시간을 파괴하는 엄청난 점 두 개를 찾아서 숨겨보세요.</p>
              <div v-if="showMission[0]" class="alert alert-primary p-2 mt-2 mb-0" style="font-size: 0.75rem;">
                👉 <b>[설정]</b> 가로축(X): 가격 / 세로축(Y): 조리시간
              </div>
            </li>
            <li class="list-group-item">
              <div class="d-flex align-items-center justify-content-between" @click="toggleMission(1)" style="cursor: pointer;">
                <b>🔥 미션 2. 좋아한다며? 근데 왜 버려! (모순 찾기)</b>
                <span class="badge bg-secondary">힌트 보기 ⬇️</span>
              </div>
              <p class="mb-1 text-muted" style="font-size: 0.75rem;">보통은 점이 왼쪽 위에서 오른쪽 아래로 내려가야 정상입니다. 혼자 엉뚱한 곳에 있는 점을 클릭해 보세요.</p>
              <div v-if="showMission[1]" class="alert alert-primary p-2 mt-2 mb-0" style="font-size: 0.75rem;">
                👉 <b>[설정]</b> 가로축(X): 선호도 / 세로축(Y): 예상잔반량
              </div>
            </li>
          </ul>
        </div>
      </section>
      
      <section>
        <h2>🕵️ CODAP 심화: 우리는 데이터 과학자!</h2>
        <p>그래프를 다룰 줄 알게 되었다면, 이제 진짜 데이터를 요리해볼 시간입니다.</p>
        
        <div class="card text-left mt-3 border-info shadow-sm">
          <div class="card-header bg-info text-white fw-bold py-2">
            💡 데이터 추가 미션
          </div>
          <ul class="list-group list-group-flush" style="font-size: 0.85rem;">
            <li class="list-group-item">
              <div class="d-flex align-items-center justify-content-between" @click="toggleDataScience(0)" style="cursor: pointer;">
                <b>Q1. 1학년이 못 먹는 음식을 체크하려면 어떤 데이터를 추가해야 할까요?</b>
                <span class="badge bg-secondary">정답 보기 ⬇️</span>
              </div>
              <div v-if="showDataScience[0]" class="alert alert-primary p-2 mt-2 mb-0" style="font-size: 0.8rem;">
                👉 <b>[매운맛 단계]</b> 데이터가 필요합니다! (예: 1단계~5단계로 표시해서 필터링)
              </div>
            </li>
            <li class="list-group-item">
              <div class="d-flex align-items-center justify-content-between" @click="toggleDataScience(1)" style="cursor: pointer;">
                <b>Q2. 알레르기 음식을 피하려면 어떤 데이터를 추가해야 할까요?</b>
                <span class="badge bg-secondary">정답 보기 ⬇️</span>
              </div>
              <div v-if="showDataScience[1]" class="alert alert-primary p-2 mt-2 mb-0" style="font-size: 0.8rem;">
                👉 <b>[알레르기 유발 물질]</b> 성분 데이터가 필요합니다! (예: 땅콩 포함 O/X, 우유 포함 O/X)
              </div>
            </li>
          </ul>
        </div>

        <h4 class="mt-4 mb-3 fw-bold text-success text-start">🏅 이건 진짜 데이터과학자!</h4>
        <div class="card text-left border-success shadow-sm">
          <div class="card-header bg-success text-white fw-bold py-2">
            🤔 질문: "선호도가 가장 높은 진짜 메뉴들을 찾아내려면 어떻게 해야 할까요?"
          </div>
          <ul class="list-group list-group-flush" style="font-size: 0.85rem;">
            <li class="list-group-item" @click="toggleDataScience(2)" style="cursor: pointer;">
              <div class="d-flex justify-content-between">
                <b>[Step 1] 거짓말하는 점 지우기 (이상치 제거)</b>
                <span class="badge bg-secondary">자세히 ⬇️</span>
              </div>
              <div v-if="showDataScience[2]" class="mt-2 text-muted">
                선호도는 높다면서 잔반이 엄청나게 많은 가짜 데이터(예: 브로콜리 젤리)를 먼저 <b>'선택한 데이터 숨기기'</b>로 지워야 합니다. 안 그러면 가짜 1등 메뉴가 뽑히거든요!
              </div>
            </li>
            <li class="list-group-item" @click="toggleDataScience(3)" style="cursor: pointer;">
              <div class="d-flex justify-content-between">
                <b>[Step 2] 진짜 1등 찾기 (새로운 그래프 그리기)</b>
                <span class="badge bg-secondary">자세히 ⬇️</span>
              </div>
              <div v-if="showDataScience[3]" class="mt-2 text-muted">
                가짜를 치웠으니, 이제 가로축(X)에 <b>'메뉴이름'</b>을 넣고, 세로축(Y)에 <b>'선호도'</b>를 넣어서 어느 메뉴가 가장 꼭대기에 있는지 확인하면 됩니다!
              </div>
            </li>
          </ul>
        </div>
      </section>

      <section>
        <h2>☁️ 워드클라우드: 잔반통에서 찾은 속마음</h2>

        <div class="d-flex justify-content-center gap-3 mb-4">
          <a href="https://wordcloud.kr/v2/index.php" target="_blank" class="btn btn-danger text-white px-4 py-2 fw-bold shadow d-flex align-items-center">
            <i class="fa fa-external-link-alt me-2"></i> 워드클라우드 열기
          </a>
        </div>

        <p>숫자로 범인을 찾았다면, 이번엔 <b>급식 게시판에 달린 학생들의 불만 리뷰</b>를 한눈에 알아보기 쉽게 그림으로 만들어봅시다!</p>

        <div style="display:flex; justify-content:center; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; font-size: 0.8rem;">
          <div style="padding:10px; background-color:#E6E6FA; border-radius:5px; text-align:center;">
            아래 버튼을 눌러<br><b>리뷰 100개 복사하기</b>
          </div>
          <div>➡️</div>
          <div style="padding:10px; background-color:#FFE4B5; border-radius:5px; text-align:center;">
            <b>워드클라우드 사이트</b><br>새 창으로 열기
          </div>
          <div>➡️</div>
          <div style="padding:10px; background-color:#FFB6C1; border-radius:5px; text-align:center;">
            '텍스트' 입력 칸에<br><b>마우스 우클릭 -> 붙여넣기</b>
          </div>
          <div>➡️</div>
          <div style="padding:10px; background-color:#98FB98; border-radius:5px; text-align:center; font-weight:bold;">
            [워드클라우드 만들기]<br>버튼 클릭!
          </div>
        </div>

        <div class="card mt-4 mb-3 text-center border-danger">
          <div class="card-header bg-danger text-white fw-bold">🚨 급식실 건의함 리뷰 100개 모음</div>
          <div class="card-body bg-light">
            <p style="font-size: 0.85rem;" class="text-muted mb-3">"너무 매워요", "알레르기 무서워요", "고기 더 주세요" 등 학생들이 남긴 리뷰입니다. 무엇이 가장 큰 문제인지 워드클라우드로 변신시켜 보세요!</p>
            <button @click="copyReviews($event)" class="btn btn-lg btn-danger fw-bold shadow">
              <i class="fa fa-copy me-2"></i> 불만 리뷰 100개 복사하기
            </button>
          </div>
        </div>
      </section>

      <section data-background="#2c3e50" class="text-white">
        <h2 class="text-warning fw-bold">📢 특공대의 결단 (급식 작전 변경 발표)</h2>
        <p class="mb-4">우리는 그래프와 워드클라우드를 통해 AI 식단의 치명적인 문제점을 완벽하게 찾아냈습니다. 이제 작전을 바꿀 시간입니다!</p>
        
        <div class="bg-light text-dark p-4 rounded shadow text-left mx-auto border" style="width: 90%;">
          <h5 class="fw-bold mb-3 border-bottom pb-2 text-primary">💡 데이터 기반으로 어떤 작전을 쓸까? (팀별 회의)</h5>
          <p class="text-muted mb-2" style="font-size: 0.8rem;">
            아래 작전들을 읽어보고, <span class="text-primary fw-bold">AI에게 더 기발한 급식 이벤트나 레시피를 내달라고 부탁해서 우리 팀만의 멋진 작전을 발표하세요!</span>
          </p>

          <div class="border rounded p-2 mb-2 bg-white" @click="togglePivot(0)" style="cursor: pointer;">
            <div class="d-flex justify-content-between align-items-center fw-bold text-dark">
              <span>📍 작전 1. 매운 음식 대참사 해결하기</span>
              <span>🔻</span>
            </div>
            <div v-if="showPivot[0]" class="mt-2 text-muted" style="font-size: 0.85rem;">
              ✔️ 1학년 동생들이 매워서 못 먹는다면? 👉 "6학년을 위한 떡볶이와 1학년을 위한 궁중 떡볶이를 나누어서 배식하자!"
            </div>
          </div>

          <div class="border rounded p-2 mb-2 bg-white" @click="togglePivot(1)" style="cursor: pointer;">
            <div class="d-flex justify-content-between align-items-center fw-bold text-dark">
              <span>📍 작전 2. 잔반 없는 날(수다날) 아이디어</span>
              <span>🔻</span>
            </div>
            <div v-if="showPivot[1]" class="mt-2 text-muted" style="font-size: 0.85rem;">
              ✔️ 야채를 너무 많이 버린다면? 👉 "다 먹고 식판에 스티커를 받으면, 다음 달에 우리 반이 원하는 메뉴를 특식으로 주자!"
            </div>
          </div>

          <div class="border rounded p-2 bg-white" @click="togglePivot(2)" style="cursor: pointer;">
            <div class="d-flex justify-content-between align-items-center fw-bold text-dark">
              <span>📍 작전 3. 예산 부족 방어 작전</span>
              <span>🔻</span>
            </div>
            <div v-if="showPivot[2]" class="mt-2 text-muted" style="font-size: 0.85rem;">
              ✔️ 비싼 소고기만 먹을 수 없다면? 👉 "돼지고기와 두부를 절반씩 섞어 만든 가성비 만점 함박스테이크를 개발하자!"
            </div>
          </div>

        </div>
      </section>

      <section>
        <img data-src="/vibe/ai-sequence.png" style="height: 600px; max-height: 100%; object-fit: contain;" />
        <div class="fw-bold mt-3 text-primary" style="font-size: 2rem;">
          전처리란?
        </div>
      </section>

      <section data-background="#1e293b" class="text-white">
        <h3 class="text-warning fw-bold mb-2">🤖 미니게임: 우리 학교 '급식 배식 로봇' 만들기</h3>
        <p class="text-light mb-3" style="font-size: 0.85rem;">로봇이 맛있는 급식을 나눠주려면 어떤 과정을 거칠까요? 직접 버튼을 눌러 완성해보세요!</p>

        <div class="ai-game-console shadow-lg rounded-4 overflow-hidden border border-warning" style="max-width: 900px; margin: 0 auto; background-color: #2c3e50;">
          
          <div class="d-flex justify-content-center align-items-center gap-2 p-2 bg-dark border-bottom border-secondary" style="font-size: 0.75rem; font-weight: bold;">
            <span class="px-3 py-1 rounded-pill" :class="step >= 1 ? 'bg-primary text-white' : 'text-secondary'">1. 정보 모으기</span>
            <i class="fa fa-chevron-right text-secondary"></i>
            <span class="px-3 py-1 rounded-pill" :class="step >= 2 ? 'bg-danger text-white' : 'text-secondary'">2. 상한 것 고르기</span>
            <i class="fa fa-chevron-right text-secondary"></i>
            <span class="px-3 py-1 rounded-pill" :class="step >= 3 ? 'bg-success text-white' : 'text-secondary'">3. 재료 다듬기</span>
            <i class="fa fa-chevron-right text-secondary"></i>
            <span class="px-3 py-1 rounded-pill" :class="step >= 4 ? 'bg-warning text-dark' : 'text-secondary'">4. 로봇 공부(학습)</span>
            <i class="fa fa-chevron-right text-secondary"></i>
            <span class="px-3 py-1 rounded-pill" :class="step >= 5 ? 'bg-info text-dark' : 'text-secondary'">5. 배식 시작!</span>
          </div>

          <div class="ai-game-screen p-3" style="height: 450px; background-color: #0b0f19; position: relative; overflow: hidden;">
            
            <div v-if="step === 0" class="h-100 d-flex flex-column justify-content-center align-items-center">
              <i class="fa fa-robot text-warning mb-3" style="font-size: 5rem;"></i>
              <h4 class="fw-bold">인공지능 급식 로봇 시스템</h4>
              <p class="text-muted text-center">급식실에 새로운 로봇 사원 '영양봇'이 왔어요!<br>로봇이 일을 할 수 있게 <b>[수집 시작]</b> 버튼을 눌러주세요.</p>
            </div>

            <div v-else-if="step === 1" class="h-100 d-flex flex-column justify-content-center align-items-center">
              <h5 class="text-primary fw-bold mb-4">🍱 전국의 맛있는 급식 정보를 모으는 중...</h5>
              <div class="d-flex gap-3 mb-4">
                <div class="card bg-secondary text-white p-2 text-center slide-up-anim" style="width: 80px;"><i class="fa fa-drumstick-bite mb-1"></i><br>고기</div>
                <div class="card bg-secondary text-white p-2 text-center slide-up-anim" style="width: 80px; animation-delay: 0.2s;"><i class="fa fa-apple-alt mb-1"></i><br>과일</div>
                <div class="card bg-secondary text-white p-2 text-center slide-up-anim" style="width: 80px; animation-delay: 0.4s;"><i class="fa fa-carrot mb-1"></i><br>야채</div>
                <div class="card bg-secondary text-white p-2 text-center slide-up-anim" style="width: 80px; animation-delay: 0.6s;"><i class="fa fa-ice-cream mb-1"></i><br>디저트</div>
              </div>
              <div class="progress w-50 bg-dark" style="height: 20px;">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" style="width: 100%;"></div>
              </div>
              <p class="mt-3 text-info">수집 완료! <b>(수집 = 인공지능의 식사 시간)</b></p>
            </div>

            <div v-else-if="step === 2" class="h-100">
              <h5 class="text-danger fw-bold text-center mb-3">🤢 "윽! 이건 못 먹어!" 상한 재료 2개를 클릭해 버리세요!</h5>
              <div class="d-flex justify-content-center flex-wrap gap-3 mt-4">
                <div v-for="item in foodItems" :key="item.id" 
                    class="card p-2 text-center transition-all" 
                    :class="item.removed ? 'opacity-0 scale-down' : 'bg-white text-dark'"
                    style="width: 130px; cursor: pointer;" @click="removeBadFood(item)">
                  <i class="fa mb-2" :class="[item.icon, item.isBad ? 'text-success' : 'text-primary']" style="font-size: 2rem;"></i>
                  <div class="fw-bold">{{ item.name }}</div>
                  <div class="badge" :class="item.isBad ? 'bg-danger' : 'bg-primary'">{{ item.status }}</div>
                </div>
              </div>
              <div class="text-center mt-3 text-warning" v-if="badFoodCount > 0">남은 상한 재료: {{ badFoodCount }}개</div>
            </div>

            <div v-else-if="step === 3" class="h-100 d-flex flex-column justify-content-center align-items-center">
              <h5 class="text-success fw-bold mb-3">🧼 로봇이 이해하기 쉽게 재료 다듬기 (전처리)</h5>
              <div class="d-flex gap-5 align-items-center">
                <div class="text-center">
                  <div class="badge bg-secondary mb-2">사람의 언어</div>
                  <div class="card p-3 text-dark fw-bold">"맵지 않은<br>돈가스 A급"</div>
                </div>
                <i class="fa fa-arrow-right fa-2x text-success"></i>
                <div class="text-center">
                  <div class="badge bg-success mb-2">로봇의 언어 (숫자)</div>
                  <div class="card p-3 bg-dark text-success font-monospace">매운맛: 0<br>고기: 1<br>점수: 100</div>
                </div>
              </div>
              <p class="mt-4 text-center text-muted">로봇은 글자보다 <b>'숫자'</b>를 훨씬 좋아해요!</p>
            </div>

            <div v-else-if="step === 4" class="h-100 d-flex flex-column justify-content-center align-items-center">
              <h5 class="text-warning fw-bold mb-3">📖 영양봇이 열공 중입니다!</h5>
              <div class="robot-study-box p-4 border border-warning rounded-circle position-relative">
                <i class="fa fa-robot text-warning fa-4x" :class="{'pulse-btn': training}"></i>
                <div class="position-absolute" style="top:-20px; right:-20px;"><i class="fa fa-book text-light fa-2x"></i></div>
              </div>
              <div class="mt-4 w-50">
                <div class="d-flex justify-content-between mb-1" style="font-size: 0.8rem;">
                  <span>학습 진도 (지능 지수)</span>
                  <span>{{ studyProgress }}%</span>
                </div>
                <div class="progress bg-dark" style="height: 10px;">
                  <div class="progress-bar bg-warning" :style="{width: studyProgress + '%'}"></div>
                </div>
              </div>
              <p class="mt-3 text-warning" v-if="studyProgress < 100">열심히 공부해서 규칙을 찾아내고 있어요!</p>
              <p class="mt-3 text-success fw-bold" v-else>학습 완료! 이제 완벽하게 배식할 수 있어요!</p>
            </div>

            <div v-else-if="step === 5" class="h-100 d-flex flex-column justify-content-center align-items-center">
              <h5 class="text-info fw-bold mb-4">🍽️ 실전! 학생에게 딱 맞는 급식 배식하기</h5>
              <div class="d-flex gap-5 align-items-center">
                <div class="text-center">
                  <i class="fa fa-child fa-3x mb-2 text-white"></i>
                  <div class="badge bg-info">1학년 어린이</div>
                </div>
                <div class="ai-brain-scan">
                  <i class="fa fa-microchip text-warning fa-3x"></i>
                  <div class="text-info mt-2" style="font-size: 0.7rem;">데이터 분석 중...</div>
                </div>
                <div class="card p-3 bg-white text-dark shadow-lg slide-in-right">
                  <div class="fw-bold text-primary">추천 메뉴</div>
                  <hr class="my-1">
                  <div style="font-size: 1.2rem;">🍗 달콤 간장치킨</div>
                  <div class="text-muted" style="font-size: 0.7rem;">(안 매운맛 100% 예측)</div>
                </div>
              </div>
            </div>

          </div>

          <div class="ai-game-controls p-3 bg-secondary d-flex justify-content-between align-items-center border-top border-dark">
            <div class="badge bg-dark px-3 py-2 fs-6">영양봇 제작 중</div>
            
            <div class="d-flex gap-2">
              <button v-if="step === 0" class="btn btn-primary fw-bold pulse-btn" @click="step = 1">수집 시작!</button>
              <button v-if="step === 1" class="btn btn-warning text-dark fw-bold" @click="step = 2">상한 재료 고르기</button>
              <button v-if="step === 2" class="btn btn-success fw-bold" :disabled="badFoodCount > 0" @click="step = 3">재료 다듬기</button>
              <button v-if="step === 3" class="btn btn-warning text-dark fw-bold" @click="startStudy">공부 시키기</button>
              <button v-if="step === 4" class="btn btn-info text-dark fw-bold" :disabled="studyProgress < 100" @click="step = 5">배식 시작하기!</button>
              <button v-if="step === 5" class="btn btn-light fw-bold" @click="resetGame">처음부터 다시</button>
            </div>

            <div class="text-white" style="font-size: 0.8rem;">단계: {{ step }} / 5</div>
          </div>
        </div>
      </section>

      <section>
        <h2 class="text-primary fw-bold mb-4">🧒 AI 로봇 만들기 퀴즈 대잔치!</h2>
        <div style="height: 500px; overflow-y: auto; padding: 10px;">
          
          <div class="card mb-4 text-left shadow-sm border-primary">
            <div class="card-body">
              <h5 class="fw-bold">Q1. [데이터 수집] AI 로봇이 똑똑해지려면 가장 먼저 무엇을 해야 할까요?</h5>
              <div class="list-group mt-3" style="font-size: 0.9rem;">
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_e1 === 1}" @click="ans_e1 = 1">1. 잠자기</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-success text-white': ans_e1 === 2}" @click="ans_e1 = 2">2. 데이터(정보) 모으기</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_e1 === 3}" @click="ans_e1 = 3">3. 놀이터 가기</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_e1 === 4}" @click="ans_e1 = 4">4. 그림 그리기</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_e1 === 5}" @click="ans_e1 = 5">5. 노래 부르기</button>
              </div>
              <div v-if="ans_e1 === 2" class="alert alert-success mt-2 mb-0 fw-bold">🎉 정답! 밥을 먹어야 힘이 나듯, AI는 데이터를 모아야 똑똑해져요.</div>
              <div v-if="ans_e1 !== null && ans_e1 !== 2" class="alert alert-danger mt-2 mb-0 fw-bold">❌ 오답입니다. 로봇이 지식을 얻으려면 무엇이 필요할까요?</div>
            </div>
          </div>

          <div class="card mb-4 text-left shadow-sm border-primary">
            <div class="card-body">
              <h5 class="fw-bold">Q2. [이상치 제거] 고장난 온도계가 잰 '100도' 같은 이상한 데이터가 섞여 있으면 어떻게 할까요?</h5>
              <div class="list-group mt-3" style="font-size: 0.9rem;">
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_e2 === 1}" @click="ans_e2 = 1">1. 예쁘게 포장한다</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_e2 === 2}" @click="ans_e2 = 2">2. 냉장고에 넣는다</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_e2 === 3}" @click="ans_e2 = 3">3. 친구에게 준다</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-success text-white': ans_e2 === 4}" @click="ans_e2 = 4">4. 쓰레기통에 버린다(지운다)</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_e2 === 5}" @click="ans_e2 = 5">5. 무조건 믿는다</button>
              </div>
              <div v-if="ans_e2 === 4" class="alert alert-success mt-2 mb-0 fw-bold">🎉 정답! 이상한 데이터(이상치)를 지워야 AI가 헷갈리지 않아요.</div>
              <div v-if="ans_e2 !== null && ans_e2 !== 4" class="alert alert-danger mt-2 mb-0 fw-bold">❌ 오답입니다. 상한 음식은 어떻게 해야 할지 생각해보세요!</div>
            </div>
          </div>

          <div class="card mb-4 text-left shadow-sm border-primary">
            <div class="card-body">
              <h5 class="fw-bold">Q3. [데이터 전처리] 삐뚤빼뚤한 상자들을 로봇이 보기 좋게 똑같은 모양으로 다듬는 과정은?</h5>
              <div class="list-group mt-3" style="font-size: 0.9rem;">
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_e3 === 1}" @click="ans_e3 = 1">1. 데이터 파괴</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-success text-white': ans_e3 === 2}" @click="ans_e3 = 2">2. 데이터 전처리</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_e3 === 3}" @click="ans_e3 = 3">3. 숨바꼭질</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_e3 === 4}" @click="ans_e3 = 4">4. 데이터 복사</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_e3 === 5}" @click="ans_e3 = 5">5. 로봇 조립</button>
              </div>
              <div v-if="ans_e3 === 2" class="alert alert-success mt-2 mb-0 fw-bold">🎉 정답! 요리하기 전에 채소를 씻고 써는 것처럼 데이터를 다듬는 것을 전처리라고 해요.</div>
              <div v-if="ans_e3 !== null && ans_e3 !== 2" class="alert alert-danger mt-2 mb-0 fw-bold">❌ 오답입니다. '미리(전) 처리한다'는 뜻을 가진 단어를 찾아보세요.</div>
            </div>
          </div>

          <div class="card mb-4 text-left shadow-sm border-primary">
            <div class="card-body">
              <h5 class="fw-bold">Q4. [모델 학습] 깨끗해진 데이터를 보고 로봇 뇌가 스스로 규칙을 찾아내는 과정은?</h5>
              <div class="list-group mt-3" style="font-size: 0.9rem;">
                <button class="list-group-item list-group-item-action" :class="{'bg-success text-white': ans_e4 === 1}" @click="ans_e4 = 1">1. AI 모델 학습 (공부)</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_e4 === 2}" @click="ans_e4 = 2">2. 노래 부르기</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_e4 === 3}" @click="ans_e4 = 3">3. 체조하기</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_e4 === 4}" @click="ans_e4 = 4">4. 전원 끄기</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_e4 === 5}" @click="ans_e4 = 5">5. 청소하기</button>
              </div>
              <div v-if="ans_e4 === 1" class="alert alert-success mt-2 mb-0 fw-bold">🎉 정답! 컴퓨터가 규칙을 배우는 것을 '학습(Learning)'이라고 해요.</div>
              <div v-if="ans_e4 !== null && ans_e4 !== 1" class="alert alert-danger mt-2 mb-0 fw-bold">❌ 오답입니다. 여러분이 학교에서 하는 일과 똑같아요!</div>
            </div>
          </div>

          <div class="card mb-4 text-left shadow-sm border-primary">
            <div class="card-body">
              <h5 class="fw-bold">Q5. [예측 및 활용] 공부를 100점 맞은 AI 로봇은 우리 생활에서 어떻게 도와줄까요?</h5>
              <div class="list-group mt-3" style="font-size: 0.9rem;">
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_e5 === 1}" @click="ans_e5 = 1">1. 내 간식을 뺏어 먹는다</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_e5 === 2}" @click="ans_e5 = 2">2. 숙제를 찢어버린다</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-success text-white': ans_e5 === 3}" @click="ans_e5 = 3">3. 내가 좋아할 만한 영상을 추천해 준다</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_e5 === 4}" @click="ans_e5 = 4">4. 길을 잃어버리게 한다</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_e5 === 5}" @click="ans_e5 = 5">5. 컴퓨터를 고장 낸다</button>
              </div>
              <div v-if="ans_e5 === 3" class="alert alert-success mt-2 mb-0 fw-bold">🎉 정답! 유튜브 추천, 자율주행 등 배운 것을 실생활에 '활용'합니다.</div>
              <div v-if="ans_e5 !== null && ans_e5 !== 3" class="alert alert-danger mt-2 mb-0 fw-bold">❌ 오답입니다. AI는 우리를 편안하게 해주는 기술이에요.</div>
            </div>
          </div>

        </div>
      </section>

      <section>
        <h2 class="text-primary fw-bold mb-4" style="font-size: 2.5rem;">🛠️ 3차시: 조립 전 필독! 주의사항</h2>
        
        <div class="card border-0 shadow-lg mx-auto" style="width: 95%; background-color: #fdfdfe;">
          <div class="card-body p-4">
            <div class="text-left" style="line-height: 2; font-size: 1.6rem; word-break: keep-all;">
              
              <div class="mb-4 d-flex align-items-start">
                <span class="badge bg-danger me-3 mt-2" style="font-size: 1.2rem;">1</span>
                <span>
                  전선 조립 시 <b class="text-danger" style="font-size: 1.8rem;">'색깔'</b> 주의! 
                  <b class="text-danger" style="font-size: 1.8rem;">'피복을 벗겨서'</b> 꼬은 후 구멍에 넣고, 접어서 
                  또 <b class="text-danger" style="font-size: 1.8rem;">'꼬아주면'</b> 고정됩니다.
                </span>
              </div>

              <div class="mb-4 d-flex align-items-start border-top pt-3">
                <span class="badge bg-danger me-3 mt-2" style="font-size: 1.2rem;">2</span>
                <span>
                  (나) 블록은 <b class="text-danger" style="font-size: 1.8rem;">'부러지기 쉬우니'</b> 조심해서 다뤄주세요.
                </span>
              </div>

              <div class="mb-4 d-flex align-items-start border-top pt-3">
                <span class="badge bg-danger me-3 mt-2" style="font-size: 1.2rem;">3</span>
                <span>
                  (나) 블록은 <b class="text-danger" style="font-size: 1.8rem;">'끼우는 방향'</b>을 꼼꼼히 살피세요.
                </span>
              </div>

              <div class="mb-4 d-flex align-items-start border-top pt-3">
                <span class="badge bg-danger me-3 mt-2" style="font-size: 1.2rem;">4</span>
                <span>
                  (다) 블록을 <b class="text-danger" style="font-size: 1.8rem;">'꼭 끼워주세요'</b>.
                </span>
              </div>

              <div class="mb-3 d-flex align-items-start border-top pt-3">
                <span class="badge bg-danger me-3 mt-2" style="font-size: 1.2rem;">5</span>
                <span>
                  건전지는 <b class="text-danger" style="font-size: 1.8rem;">'스프링'</b>이 있는 쪽에 
                  <b class="text-danger" style="font-size: 1.8rem;">'음극'</b>이 와야 합니다.
                </span>
              </div>

            </div>
          </div>
        </div>

        <div class="mt-4">
          <p class="text-muted fw-bold" style="font-size: 1.2rem;">※ 위 규칙을 지키지 않으면 부품이 고장 날 수 있습니다!</p>
        </div>
      </section>
      <section class="text-center">
        <h2 class="text-primary fw-bold mb-4" style="font-size: 2.5rem;">🚘 자율주행차를 알아봅시다</h2>
        
        <div class="container" style="max-width: 900px;">
          
          <div class="card mb-4 shadow-sm" style="border-radius: 20px; background-color: #eef7ff; border: 3px solid #add8e6;">
            <div class="card-body p-4">
              <span class="badge bg-primary mb-3 shadow-sm" style="font-size: 1.1rem; padding: 8px 20px; border-radius: 50px;">Question 01</span>
              <h3 class="fw-bold text-dark mb-0" style="font-size: 1.7rem; line-height: 1.6;">
                교구는 어떤 <b class="text-danger" style="font-size: 2.1rem;">'원리'</b>로 동작하나요?<br>
                실제 자율주행차와의 <b class="text-danger" style="font-size: 2.1rem;">'차이'</b>는 무엇인가요?
              </h3>
            </div>
          </div>

          <div class="card mb-4 shadow-sm" style="border-radius: 20px; background-color: #f2fff5; border: 3px solid #b2ebbc;">
            <div class="card-body p-4">
              <span class="badge bg-success mb-3 shadow-sm" style="font-size: 1.1rem; padding: 8px 20px; border-radius: 50px;">Question 02</span>
              <h3 class="fw-bold text-dark mb-0" style="font-size: 1.7rem; line-height: 1.6;">
                자율주행차에 어떤 <b class="text-danger" style="font-size: 2.1rem;">'필수 기능'</b>이 필요할까요?<br>
                이 기능은 <b class="text-danger" style="font-size: 2.1rem;">'어떻게'</b> 만들어야 할까요?
              </h3>
            </div>
          </div>

        </div>

        <div class="mt-3">
          <h4 class="text-muted fw-bold" style="font-size: 1.2rem; opacity: 0.7;">"여러분의 생각을 자유롭게 나누어 보세요!"</h4>
        </div>
      </section>

      <section>
        <h2>🚘 자동차는 어떻게 혼자 달릴까?</h2>
        <p>여러분이 방금 만든 자동차는 어떤 원리로 달리는 걸까요? 영상으로 확인해 봐요!</p>
        
        <div class="card shadow-sm border-0 bg-light p-2 mb-3">
          <iframe width="100%" height="320" src="https://www.youtube.com/embed/6f_joanlON4" frameborder="0" allowfullscreen></iframe>
        </div>

        <div class="alert alert-warning text-start" style="font-size: 0.85rem;">
          <b>💡 3가지 핵심 비밀</b><br>
          1️⃣ <b>센서(Sensor):</b> 방금 부착한 자동차의 '눈' (길을 보고 위험을 감지해요)<br>
          2️⃣ <b>소프트웨어(SW):</b> 전선을 꽂은 '두뇌' (인공지능이 스스로 운전법을 배워요)<br>
          3️⃣ <b>도로와 통신:</b> 멀리서 오는 위험을 알려주는 무선 통신(인터넷)
        </div>
      </section>

      <section>
        <h2>👀 자동차의 세 가지 마법의 눈 (센서)</h2>
        <p style="font-size: 0.9rem;">자율주행 자동차는 사람보다 시력이 좋을까요? 사실 기계들도 약점이 있어요.</p>
        
        <div class="row mt-3 text-start" style="font-size: 0.85rem;">
          <div class="col-md-4">
            <div class="card h-100 border-primary shadow-sm" @click="toggleSensor(0)" style="cursor: pointer;">
              <div class="card-header bg-primary text-white fw-bold d-flex justify-content-between">
                <span>📷 첫째 눈. 카메라</span> <span>🔻</span>
              </div>
              <div v-if="showSensor[0]" class="card-body bg-white">
                ✔️ <b>특징:</b> 우리 핸드폰 카메라와 같아요! 신호등이 빨간색인지 초록색인지 구분할 수 있어요.<br>
                <hr class="my-2">
                <span class="text-danger">❌ <b>약점:</b> 밤이 되거나 안개가 끼면 우리처럼 앞이 안 보여요. 강한 햇빛에도 눈이 부셔서 안 보여요.</span>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card h-100 border-success shadow-sm" @click="toggleSensor(1)" style="cursor: pointer;">
              <div class="card-header bg-success text-white fw-bold d-flex justify-content-between">
                <span>📡 둘째 눈. 레이더</span> <span>🔻</span>
              </div>
              <div v-if="showSensor[1]" class="card-body bg-white">
                ✔️ <b>특징:</b> 박쥐처럼 전파를 쏴서 물체가 얼마나 멀리 있는지 알아내요. 눈이나 비가 와도 끄떡없어요!<br>
                <hr class="my-2">
                <span class="text-danger">❌ <b>약점:</b> 자동차 같은 큰 쇳덩이는 잘 찾지만, 사람은 잘 못 봐요. 모양 구별을 잘 못해요.</span>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card h-100 border-danger shadow-sm" @click="toggleSensor(2)" style="cursor: pointer;">
              <div class="card-header bg-danger text-white fw-bold d-flex justify-content-between">
                <span>🔦 셋째 눈. 라이다(LiDAR)</span> <span>🔻</span>
              </div>
              <div v-if="showSensor[2]" class="card-body bg-white">
                ✔️ <b>특징:</b> 레이저를 사방으로 쏴서 3D 게임처럼 주변 세상을 입체로 스캔해요. 엄청나게 똑똑해요!<br>
                <hr class="my-2">
                <span class="text-danger">❌ <b>약점:</b> 기계값이 천만 원이 넘게 엄청나게 비싸요! 그리고 눈송이가 날리면 레이저가 부딪혀서 고장 나요.</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section>
        <h2>🚨 X-파일: 똑똑한 AI는 왜 사고를 냈을까?</h2>
        <p style="font-size: 0.9rem;">완벽해 보이는 인공지능도 바보 같은 실수를 합니다. <b>왜 기계가 속았는지</b> 탐정이 되어 추리해보세요.</p>

        <div class="card text-left mt-3 border-dark" style="max-height: 400px; overflow-y: auto;">
          <div class="card-header bg-danger text-white fw-bold">📂 기밀 문서: 자동차 어리둥절 사건 4가지</div>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">
              <div class="d-flex align-items-center justify-content-between" @click="toggleCrash(0)" style="cursor: pointer;">
                <span class="fs-6 fw-bold text-dark">사건 1. 하얀색 트럭을 향해 전속력으로 돌진!</span>
                <span class="badge bg-secondary">정답 보기 ⬇️</span>
              </div>
              <div v-if="showCrash[0]" class="mt-2 text-danger fw-bold bg-light p-2 rounded" style="font-size: 0.8rem;">
                👉 [카메라의 착각]<br>
                너무 화창하고 밝은 날, 카메라는 거대한 하얀색 트럭을 <b>'하얗고 맑은 구름'</b>으로 착각해서 브레이크를 밟지 않았어요.
              </div>
            </li>
            <li class="list-group-item">
              <div class="d-flex align-items-center justify-content-between mt-2" @click="toggleCrash(1)" style="cursor: pointer;">
                <span class="fs-6 fw-bold text-dark">사건 2. 아무것도 없는데 끼기기긱! 급브레이크!</span>
                <span class="badge bg-secondary">정답 보기 ⬇️</span>
              </div>
              <div v-if="showCrash[1]" class="mt-2 text-danger fw-bold bg-light p-2 rounded" style="font-size: 0.8rem;">
                👉 [레이더의 헛것 보기]<br>
                고가도로 밑에 생긴 시커먼 그림자를 보고, 레이더는 엄청나게 큰 콘크리트 벽이 길을 막고 있다고 착각했어요.
              </div>
            </li>
            <li class="list-group-item">
              <div class="d-flex align-items-center justify-content-between mt-2" @click="toggleCrash(2)" style="cursor: pointer;">
                <span class="fs-6 fw-bold text-dark">사건 3. 낙서를 보고 쌩쌩 달려버린 자동차</span>
                <span class="badge bg-secondary">정답 보기 ⬇️</span>
              </div>
              <div v-if="showCrash[2]" class="mt-2 text-danger fw-bold bg-light p-2 rounded" style="font-size: 0.8rem;">
                👉 [AI의 단순함]<br>
                '멈춤(STOP)' 표지판에 누가 까만 테이프를 붙여서 낙서해놨어요. 우리는 낙서인 줄 알지만, AI는 그걸 '100km로 밟으라는 속도 표지판'으로 잘못 읽었답니다.
              </div>
            </li>
            <li class="list-group-item">
              <div class="d-flex align-items-center justify-content-between mt-2" @click="toggleCrash(3)" style="cursor: pointer;">
                <span class="fs-6 fw-bold text-dark">사건 4. 아직 굳지도 않은 말랑말랑한 시멘트 길에 풍덩!</span>
                <span class="badge bg-secondary">정답 보기 ⬇️</span>
              </div>
              <div v-if="showCrash[3]" class="mt-2 text-danger fw-bold bg-light p-2 rounded" style="font-size: 0.8rem;">
                👉 [상식 부족]<br>
                사람은 옆에 공사 중 표지판을 보면 "아, 시멘트가 덜 말랐구나" 하고 피하지만, AI에게는 그런 '사회적 눈치'가 없어요. 그냥 텅 빈 길이라고 밟아버렸죠!
              </div>
            </li>
          </ul>
        </div>
      </section>
      
      <section>
        <h2>⚖️ 3차시 2교시: 트롤리 딜레마 (당신의 선택은?)</h2>
        <p>여러분이 이 자율주행 자동차를 만든 프로그래머입니다. <b>브레이크가 고장 난 상황에서 자동차에게 어떤 명령을 코딩하시겠습니까?</b></p>

        <div class="alert alert-secondary mt-3 p-3 text-start shadow-sm position-relative" style="font-size: 0.95rem; border-left: 6px solid #d9534f;">
          <h5 class="fw-bold text-danger mb-2">🤔 피할 수 없는 선택의 순간</h5>
          자동차가 빠른 속도로 달리고 있는데 브레이크가 고장 났습니다. 앞에는 무단횡단을 하는 보행자 3명이 있습니다.<br><br>
          <b>[선택 A] 그대로 직진한다.</b><br>
          👉 무단횡단을 한 보행자 3명이 다칩니다. (차에 탄 탑승자는 안전함)<br><br>
          <b>[선택 B] 방향을 꺾어 벽에 부딪힌다.</b><br>
          👉 차에 타고 있는 탑승자 1명(본인)이 크게 다칩니다. (보행자 3명은 안전함)
        </div>

        <div class="mt-4 pt-2">
          <a href="https://science.seoul.go.kr/RAIM/aiPlaygrnd/list.do?key=2310160006" target="_blank" class="btn btn-danger fw-bold shadow-lg px-4 py-3" style="font-size: 1.1rem; border-radius: 50px; text-decoration: none;">
            🎮 직접 체험하기: 트롤리 딜레마 시뮬레이터 (클릭)
          </a>
          <p class="mt-2 text-muted fw-bold" style="font-size: 0.8rem;">* 서울시립과학관 사이트로 이동해서 직접 게임처럼 선택을 해보세요!</p>
        </div>
        
        <div class="mt-3 pt-2">
          <p class="mt-2 text-muted fw-bold" style="font-size: 0.9rem;">* 인공지능은 감정이 없기 때문에 돌발 상황에서 어떤 선택을 해야 하는지 미리 코딩으로 가르쳐 주어야 합니다. 짝꿍과 열띤 토론을 해보세요!</p>
        </div>
      </section>

      <section>
        <h2 class="text-danger fw-bold mb-3">⚖️ AI 윤리 토론: 운명의 갈림길</h2>
        
        <div class="card border-0 shadow-sm mb-3" style="background-color: #f8f9fa;">
          <div class="card-body p-3">
            <div class="row align-items-center text-left">
              <div class="col-md-9">
                <h5 class="fw-bold mb-1"><i class="fa fa-car-crash me-2"></i> 긴급 상황 (The 3:1 Dilemma)</h5>
                <p class="small mb-0">비 내리는 오후, 자율주행차 앞 도로에 <b>아이 1명</b>이 뛰어들었습니다. <br>
                핸들을 꺾으면 <b>탑승자 3명(가족)</b>이, 직진하면 <b>보행자 1명</b>이 희생되는 절박한 순간입니다.</p>
              </div>
              <div class="col-md-3 text-right">
                <div class="badge bg-danger p-2 px-3">누구를 구할 것인가?</div>
              </div>
            </div>
          </div>
        </div>

        <div class="text-center mb-2">
          <h6 class="fw-bold text-primary"><i class="fa fa-hand-pointer me-2"></i>세 개의 윤리 칩 중 하나를 반드시 선택해야 합니다!</h6>
        </div>
        <div class="row g-2 mb-4">
          <div class="col-md-4">
            <div class="p-2 rounded-4 bg-white shadow-sm border-top border-success border-5 h-100">
              <h6 class="fw-bold text-success mb-1">A. 보행자 보호</h6>
              <p style="font-size: 0.7rem;" class="text-muted mb-2">"보행자를 최우선 보호한다."</p>
              <div class="badge bg-light text-success w-100">보행자(1) 생존</div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="p-2 rounded-4 bg-white shadow-sm border-top border-danger border-5 h-100">
              <h6 class="fw-bold text-danger mb-1">B. 사용자 보호</h6>
              <p style="font-size: 0.7rem;" class="text-muted mb-2">"고객의 안전이 최우선이다."</p>
              <div class="badge bg-light text-danger w-100">탑승자(3) 생존</div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="p-2 rounded-4 bg-white shadow-sm border-top border-info border-5 h-100">
              <h6 class="fw-bold text-info mb-1">C. 피해 최소화</h6>
              <p style="font-size: 0.7rem;" class="text-muted mb-2">"더 많은 생명을 보존한다."</p>
              <div class="badge bg-light text-info w-100">탑승자(3) 생존</div>
            </div>
          </div>
        </div>

        <div class="row g-2 text-left">
          <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm bg-dark text-white">
              <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-center border-bottom border-warning pb-2 mb-2">
                  <h6 class="fw-bold text-warning mb-0">🤴 사장</h6>
                  <span class="badge bg-warning text-dark">AI 찬스 1회</span>
                </div>
                <p class="p-2 bg-white rounded text-dark text-center fw-bold small mb-2">
                  "우리 회사의 모토는 소비자와의 신뢰!"
                </p>
                <p style="font-size: 0.65rem;" class="text-light opacity-75 mb-0">팀의 최종 결정을 내리고 발표합니다. 회사의 철학을 결단하세요.</p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm bg-primary text-white">
              <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-center border-bottom pb-2 mb-2">
                  <h6 class="fw-bold mb-0">💻 프로그래머</h6>
                  <span class="badge bg-white text-primary">AI 찬스 1회</span>
                </div>
                <p class="p-2 bg-white rounded text-primary text-center fw-bold small mb-2" style="min-height: 45px; display: flex; align-items: center; justify-content: center;">
                  "어차피 사고나면 <br>피해자는 발생하는거 아닌가요?"
                </p>
                <p style="font-size: 0.65rem;" class="text-light opacity-75 mb-0">감정보다는 데이터 효율을 강조하세요. 알고리즘의 정당성을 주장합니다.</p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm bg-danger text-white">
              <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-center border-bottom pb-2 mb-2">
                  <h6 class="fw-bold mb-0">👨‍👩‍👧 운전자 가족</h6>
                  <span class="badge bg-white text-danger">AI 찬스 1회</span>
                </div>
                <p class="p-2 bg-white rounded text-danger text-center fw-bold small mb-2" style="min-height: 45px; display: flex; align-items: center; justify-content: center;">
                  "난 믿고 산건데 <br>피해보상을 하든 우리 가족이 죽으란거야?"
                </p>
                <p style="font-size: 0.65rem;" class="text-light opacity-75 mb-0">생존권과 소비자 신뢰를 주장하세요. 나를 죽이는 차는 살 수 없습니다.</p>
              </div>
            </div>
          </div>
        </div>

        <div class="mt-4">
          <div class="p-2 bg-light rounded-3 text-center border mb-4">
            <h6 class="fw-bold mb-0 small">발표: <span class="text-primary">"우리 회사는 [ ] 칩을 선택한다. 이유는 [ ] 때문이다."</span></h6>
          </div>
          
          <div class="py-3 text-center">
            <h2 class="text-danger fw-bold blink-anim" style="font-size: 3rem; letter-spacing: -1px;">🚨 설문 꼭 참여해주세요! 🚨</h2>
          </div>
        </div>
      </section>

      <section data-background="#1e293b" class="text-white">
        <h2 class="text-warning fw-bold mb-2" style="font-size: 2.2rem;">📢 [최종 피칭] 자율주행 기업 윤리 선언문</h2>
        <p class="mb-3 text-light" style="font-size: 0.85rem; opacity: 0.9;">글로벌 기업의 CEO로서 우리 회사의 윤리 알고리즘을 세상에 발표합시다.</p>

        <div class="bg-white text-dark p-3 rounded-4 shadow-lg mx-auto border-0" style="width: 95%; max-width: 1000px;">
          
          <h6 class="fw-bold mb-3 border-bottom pb-2 text-primary text-left">
            <i class="fa fa-microphone-alt me-2"></i> 조별 토의 및 프롬프트 미션
          </h6>

          <div class="row g-2 mb-3 text-left">
            <div class="col-md-4">
              <div class="card h-100 border-0 shadow-sm" style="background-color: #fff5f5;">
                <div class="card-body p-2">
                  <span class="badge bg-danger mb-1" style="font-size: 0.7rem;">Step 1-1. 보호 대상</span>
                  <p class="fw-bold mb-1" style="font-size: 0.8rem;">누구를 우선 보호할까?</p>
                  <div class="p-2 bg-white rounded border" style="font-size: 0.75rem; line-height: 1.4;">
                    • 탑승객 보호 / 다수 보행자<br>
                    • 교통 법규 준수자 보호
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card h-100 border-0 shadow-sm" style="background-color: #f5fff5;">
                <div class="card-body p-2">
                  <span class="badge bg-success mb-1" style="font-size: 0.7rem;">Step 1-2. 대응 태도</span>
                  <p class="fw-bold mb-1" style="font-size: 0.8rem;">사고 시 우리 회사는?</p>
                  <div class="p-2 bg-white rounded border" style="font-size: 0.75rem; line-height: 1.4;">
                    • 투명한 책임 인정 및 사과<br>
                    • 신속하고 적극적인 보상
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card h-100 border-0 shadow-sm" style="background-color: #f5faff;">
                <div class="card-body p-2">
                  <span class="badge bg-primary mb-1" style="font-size: 0.7rem;">Step 1-3. 기업 방향</span>
                  <p class="fw-bold mb-1" style="font-size: 0.8rem;">어떤 가치로 발전할까?</p>
                  <div class="p-2 bg-white rounded border" style="font-size: 0.75rem; line-height: 1.4;">
                    • 안전 강화 / 사람 중심 혁신<br>
                    • 사회적 신뢰 확보
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="text-left px-1">
            <div class="mb-3">
              <div class="mb-1">
                <span class="badge bg-primary me-1">Step 2</span> 
                <b style="font-size: 0.9rem;">AI 선언문 초안 요청하기</b>
              </div>
              <div class="text-dark bg-light p-2 rounded-3 border-start border-primary border-4" style="font-size: 0.8rem; line-height: 1.5;">
                "우리는 피할 수 없는 사고 상황에서 <b>[ 선택한 기준 ]</b>을 최우선으로 보호하기로 한 자율주행 기업의 CEO야. <br>소비자를 설득할 수 있는 감동적인 기업 윤리 선언문을 300자로 작성해 줘."
              </div>
            </div>
            
            <div class="mb-3">
              <div class="mb-1">
                <span class="badge bg-success me-1">Step 3</span> 
                <b style="font-size: 0.9rem;">생동감 불어넣기 (피칭 준비)</b>
              </div>
              <p class="text-muted mb-0" style="font-size: 0.8rem; line-height: 1.4;">
                '책임', '노력' 같은 단어에 <b>구체적인 사례</b>(예: 사고 보상 기금 마련, 매일 1만 번의 가상 시뮬레이션 등)를 붙여서 우리 팀만의 진심이 느껴지도록 내용을 다듬어보세요.
              </p>
            </div>
          </div>

          <div class="mt-2 pt-2 border-top">
            <h3 class="text-danger fw-bold blink-anim mb-0" style="font-size: 2.2rem; letter-spacing: -1px;">
              🚨 설문 꼭 참여해주세요! 🚨
            </h3>
          </div>
        </div>
      </section>

      <section>
        <h1 style="font-size: 4rem;">👏🏽</h1>
        <h2 class="fw-bold mt-3">건강한 식단부터 비밀 장부 추리,<br>그리고 따뜻한 마음을 가진 AI 윤리까지!<br>급식 특공대 여러분, 진심으로 수고하셨습니다!</h2>
        <h1 class="text-danger fw-bold mt-5" style="font-size: 3.5rem;">🚨 설문 꼭 참여해주세요! 🚨</h1>
      </section>

      <section data-background="#1e293b" class="text-white">
        <h3 class="text-warning fw-bold mb-3">🪄 AI 프롬프트 마법 기계 (가챠 게임)</h3>
        <p class="text-muted mb-4" style="font-size: 0.9rem;">똑같은 AI라도 사장님이 어떻게 말하느냐에 따라 결과는 천지차이! 버튼을 여러 번 눌러보세요.</p>

        <div class="pr-container d-flex align-items-center justify-content-center gap-4" style="min-height: 400px;">
          
          <div class="pr-input-zone bg-dark p-3 rounded-4 border border-secondary shadow" style="width: 300px;">
            <h6 class="text-info mb-3"><i class="fa fa-comment-dots me-2"></i>사장님의 명령</h6>
            <button class="btn btn-outline-danger w-100 mb-3 pr-btn" @click="runPrompt('bad')" :disabled="pr_loading">
              "대충 300만원 벌게 써줘"
            </button>
            <button class="btn btn-outline-success w-100 pr-btn" @click="runPrompt('good')" :disabled="pr_loading">
              "6가지 조건 맞춰서 자세히 써줘"
            </button>
            <div class="mt-4 p-2 bg-black rounded text-start font-monospace" style="font-size: 0.7rem; color: #0f0;">
              > Status: {{ pr_status }}<br>
              > Mode: {{ pr_mode }}<br>
              > Attempts: {{ pr_attempts }}
            </div>
          </div>

          <div class="pr-machine-zone text-center" style="width: 150px;">
            <div :class="{'pr-spin': pr_loading}">
              <i class="fa fa-cog fa-4x text-secondary mb-2"></i><br>
              <i class="fa fa-brain fa-3x text-info"></i>
            </div>
            <div class="mt-3 text-warning fw-bold" v-if="pr_loading">AI 생각 중...</div>
            <i class="fa fa-arrow-right fa-2x text-white mt-3" v-else></i>
          </div>

          <div class="pr-output-zone position-relative" style="width: 400px; height: 350px;">
            
            <div v-if="!pr_current_result" class="h-100 d-flex align-items-center justify-content-center border border-dashed border-secondary rounded-4 text-muted">
              왼쪽 버튼을 눌러보세요!
            </div>

            <div v-else class="card h-100 bg-white text-dark pop-in-anim" :class="pr_result_type === 'bad' ? 'border-danger' : 'border-success'">
              
              <div class="card-header text-white py-1 fw-bold" :class="pr_result_type === 'bad' ? 'bg-danger' : 'bg-success'">
                {{ pr_result_type === 'bad' ? '❌ 엉터리 AI 계획서' : '✅ 똑똑한 AI 계획서' }}
              </div>
              
              <div class="card-body p-3 text-start d-flex flex-column" style="font-size: 0.8rem;">
                <p class="fw-bold mb-2 fs-6" :class="pr_result_type === 'bad' ? 'text-danger' : 'text-success'">
                  [{{ pr_current_result.title }}]
                </p>
                <ul class="mb-auto ps-3" style="line-height: 1.6;">
                  <li v-for="(point, idx) in pr_current_result.points" :key="idx">{{ point }}</li>
                </ul>
                <div class="alert py-2 mb-0 text-center" :class="pr_result_type === 'bad' ? 'alert-danger' : 'alert-success'">
                  <b>{{ pr_current_result.alert }}</b>
                </div>
              </div>

            </div>

          </div>
        </div>
      </section>

    </div>
  </div>
</template>

<script>
import HomeButton from "@/components/HomeButton.vue";
import Reveal from "reveal.js/dist/reveal.js";
import "reveal.js/dist/reveal.css";
import initializeReveal from "@/assets/js/revealSetup.js";

export default {
  components: { HomeButton },
  data() {
    return {
      // OX 퀴즈용 변수
      ans_ox1: null, ans_ox2: null, ans_ox3: null,

      // 초등용 퀴즈 상태 (1~5번)
      ans_e1: null, ans_e2: null, ans_e3: null, ans_e4: null, ans_e5: null,
      
      // === [NEW] 신규 세션(슬라이드) 추가용 변수 ===
      vote_mincho: null, // 민초청국장 투표 점수
      showDataHint1: false, // 필요 데이터 힌트 1 (가격)
      showDataHint2: false, // 필요 데이터 힌트 2 (매운맛)

      // === [NEW] CODAP 심화 질문 변수 ===
      showDataScience: [false, false, false, false],

      // 1차시: Trap 토글
      showTrap: [false, false, false, false, false, false], 
      // 2차시: 육안/논리적 오류 찾기, 미션, 피봇팅 등
      showAnomaly: [false, false, false, false], 
      showMission: [false, false],
      showPivot: [false, false, false],
      // 3차시: 센서 장단점 및 사고 조사반 아코디언 토글용
      showSensor: [false, false, false],
      showCrash: [false, false, false, false], 

      // ==========================================
      // 3. 급식 게임
      // ==========================================
      chef_status: 'crazy',
      spy_count: 2,
      memory_data: [],
      
      // ==========================================
      // 4. 급식 배식 로봇 (1~5단계 파이프라인)
      // ==========================================
      step: 0,
      foodItems: [
        { id: 1, name: "싱싱한 고기", icon: "fa-drumstick-bite", status: "신선", isBad: false, removed: false },
        { id: 2, name: "곰팡이 식빵", icon: "fa-bread-slice", status: "상함", isBad: true, removed: false },
        { id: 3, name: "달콤한 사과", icon: "fa-apple-alt", status: "신선", isBad: false, removed: false },
        { id: 4, name: "썩은 감자", icon: "fa-potato", status: "상함", isBad: true, removed: false },
        { id: 5, name: "아삭한 당근", icon: "fa-carrot", status: "신선", isBad: false, removed: false },
      ],
      badFoodCount: 2,
      studyProgress: 0,
      training: false,

      // 프롬프트 마법 기계 변수
      pr_loading: false,
      pr_result_type: null,
      pr_current_result: null,
      pr_status: "Ready",
      pr_mode: "Waiting",
      pr_attempts: 0,
      
      // 나쁜 예시 / 좋은 예시 데이터 (원래 코드와 동일)
      pr_bad_cases: [
        { title: "기적의 1분 식사", points: ["손님이 1분에 1명씩 들어옴", "음식 나오자마자 3분 만에 다 먹고 나감", "테이블 4개로 하루 1,000명 소화"], alert: "손님이 진공청소기입니까? 3일 만에 망함!" },
        { title: "좀비 알바생", points: ["알바생 1명이 잠도 안 자고 24시간 일함", "시급은 5천원으로 계산함", "주휴수당, 야간수당 아예 0원"], alert: "노동법 위반으로 경찰서 갑니다!" },
        { title: "숨은 비용 실종", points: ["월세 0원 (건물주가 천사?)", "전기세, 수도세 아예 계산 안 함", "번 돈이 100% 사장님 통장으로 감"], alert: "다음 달에 월세 못 내서 쫓겨남!" },
        { title: "배달앱 자선사업", points: ["배달로 100그릇 팔았다고 가정", "배달 수수료 0원으로 계산함", "포장 용기 값 0원으로 계산함"], alert: "팔수록 적자 나는 기적의 마이너스 장사!" },
        { title: "마법의 식재료", points: ["버리는 음식물 쓰레기 0%", "상한 채소도 무조건 다 판다고 가정", "재료 원가를 판매가의 5%로 잡음"], alert: "식중독 걸려서 뉴스에 나옵니다!" },
        { title: "무한 체력 사장님", points: ["사장님이 1년 365일 단 하루도 안 쉼", "하루 20시간씩 불 앞에서 요리함", "병원비는 계산 안 함"], alert: "돈 벌기 전에 사장님이 쓰러짐!" },
        { title: "이세계(異世界) 물가", points: ["학교 앞 떡볶이 1인분에 5만 원으로 책정", "콜라 1캔에 1만 원 책정", "이렇게 하루 10명만 팔면 300만원 번다고 함"], alert: "아무도 안 사 먹어서 첫날 폐업!" },
        { title: "투명인간 손님", points: ["테이블도 없고 의자도 없는데 홀 매출 발생", "손님들이 공중에 떠서 떡볶이를 먹음", "인테리어 비용 0원"], alert: "가게에 손님이 들어올 수가 없음!" },
        { title: "독점의 착각", points: ["옆집에 반값 떡볶이집 생겨도 무시함", "동네 사람들이 무조건 우리 집만 온다고 함", "경쟁사 분석 0%"], alert: "옆집에 손님 다 뺏기고 파리 날림!" },
        { title: "계절 파괴자", points: ["한여름 35도에 뜨거운 호빵 떡볶이 대박남", "여름 에어컨 전기세 반영 안 함", "계절 영향 1도 없다고 우김"], alert: "여름에 매출 반의 반토막!" },
        { title: "메뉴판의 지배자", points: ["메뉴가 100가지인데 주방장(사장님) 혼자 다 함", "주문 들어오면 1초 만에 요리 완성", "재료 보관할 냉장고 크기 무시"], alert: "주문 밀려서 손님들 다 화내고 나감!" },
        { title: "셀프 서비스의 극의", points: ["손님이 직접 떡볶이 만들고 설거지까지 함", "그래서 주방 알바생 필요 없음", "손님이 돈 내고 일도 함"], alert: "여기가 식당인가요, 요 학원인가요?" },
        { title: "텔레포트 배달", points: ["주문 들어오면 1분 만에 고객 집 도착", "오토바이 기름값, 배달원 월급 0원", "배달 중에 음식이 식지 않는 마법 보온"], alert: "배달 기사님이 슈퍼맨입니까?" },
        { title: "외계인 타겟팅", points: ["지구인이 아니라 외계인이 사 먹는다고 함", "결제를 비트코인으로만 받음", "세금 낼 필요 없다고 우김"], alert: "완벽한 할루시네이션(헛소리)입니다!" },
        { title: "공기 흡입형 식당", points: ["재료를 아예 안 사고 공기로 요리함", "원가율 0% 달성", "수익률 100%의 기적"], alert: "AI가 소설을 쓰기 시작했습니다." },
        { title: "전교생 강제 동원", points: ["근처 중학교 전교생이 매일 3끼를 여기서 먹음", "학교 급식소가 망했다고 가정함", "학생들 용돈을 무한대로 잡음"], alert: "학생들이 떡볶이만 먹고 삽니까?" },
        { title: "슈퍼스타 사장님", points: ["오픈하자마자 BTS가 방문해서 홍보해줌", "광고비 0원으로 전국 맛집 등극", "마케팅 예산 아예 안 잡음"], alert: "로또 당첨될 확률로 사업을 짬!" },
        { title: "무한 확장 인테리어", points: ["15평 가게인데 100명이 앉아서 먹음", "주방 크기 0평으로 잡고 홀만 늘림", "화장실도 없음"], alert: "물리 법칙을 무시한 공간 설계!" },
        { title: "마이너스 금리", points: ["초기 창업 대출금 이자가 없다고 함", "오히려 은행이 사장님한테 이자를 줌", "금융 지식 0점"], alert: "이자 못 내서 가게 넘어갑니다!" },
        { title: "초능력 마케터", points: ["사장님 혼자서 전단지 10만 장을 1시간에 돌림", "인건비 안 들이고 홍보 완료", "전단지 인쇄비 0원"], alert: "사장님이 플래시(Flash)인가요?" },
        { title: "기승전 프랜차이즈", points: ["한 달 만에 전국에 체인점 100개 생김", "월 300만원 목표라더니 300억 벌었다고 함", "질문 의도 완전 무시"], alert: "AI가 허세에 잔뜩 찌들었습니다!" }
      ],
      pr_good_cases: [
        { title: "현실적인 인건비 계산", points: ["이천시 평균 시급 11,000원 적용", "알바생 주휴수당 포함하여 실질 시급 13,200원 반영", "사장님 근무 시간과 교대 시간 명확히 분리"], alert: "안전하고 합법적인 노무 계획입니다!" },
        { title: "버리는 재료(Loss) 반영", points: ["채소 및 신선식품 폐기율 15% 비용에 선반영", "재고 관리를 위해 당일 소진 메뉴 할인 계획 추가", "원가율을 35%로 안전하게 셋팅"], alert: "적자를 막는 아주 똑똑한 재무 설계!" },
        { title: "배달 수수료 방어전", points: ["배달앱 수수료 30%를 제외한 '진짜 순수익' 계산", "홀 매출 60% / 배달 매출 40%의 황금 비율 제안", "포장 손님 유도 1,000원 할인 이벤트 추가"], alert: "수수료 폭탄을 피하는 완벽한 전략!" },
        { title: "공간의 한계 극복", points: ["15평 4개 테이블 한계 인정 (피크타임 최대 3회전)", "테이블 부족을 만회할 테이크아웃 전용 세트 기획", "회전율을 높이는 '선결제 시스템' 도입"], alert: "물리적 공간을 100% 활용한 똑똑한 설계!" },
        { title: "타겟 맞춤형 이벤트", points: ["주변 중/고등학교 하교 시간(3~5시) 타임세일", "학생 주머니 사정에 맞춘 3,000원짜리 컵떡볶이 추가", "객단가 8,000원에 맞춘 세트 메뉴 구성"], alert: "상권을 정확히 꿰뚫어 본 마케팅!" },
        { title: "숨은 고정비 챙기기", points: ["월세 100만원, 전기/수도/가스비 50만원 미리 차감", "인터넷, 정수기 렌탈비 등 자잘한 비용 월 10만 원 반영", "이 모든 걸 빼고 순수익 300만원 역산"], alert: "숨만 쉬어도 나가는 돈을 잘 잡았습니다!" },
        { title: "경쟁사 꺾기 전략", points: ["옆집 반값 가게와 가격 경쟁 금지 (출혈 경쟁 방지)", "대신 '치즈 폭탄' 등 퀄리티를 높인 프리미엄 전략", "인스타 감성 조명으로 10대 여학생 타겟팅"], alert: "대기업과 싸워 이기는 골목대장 전략!" },
        { title: "초기 광고비의 현실화", points: ["당근마켓 동네 광고비 월 10만 원 배정", "오픈 첫 달 전단지 인쇄 및 알바 비용 30만 원 책정", "리뷰 이벤트용 쿨피스 원가 계산 완료"], alert: "돈 쓰는 법을 아는 진짜 사장님!" },
        { title: "계절을 타지 않는 메뉴", points: ["여름철 매출 하락 방어용 '살얼음 식혜' 추가", "겨울철 객단가를 높일 '어묵 꼬치 우동' 배치", "계절별 에어컨/히터 전기세 변동분 예산안 반영"], alert: "사계절 내내 안전한 수익 모델!" },
        { title: "사장님 워라밸 보장", points: ["주 1회(월요일) 정기 휴무일 반영하여 월 26일 영업 계산", "브레이크 타임(오후 3~4시) 설정하여 재료 준비 시간 확보", "사장님 과로 방지를 위한 피크타임 파트타이머 고용"], alert: "오래오래 장사할 수 있는 건강한 계획!" },
        { title: "스마트한 동선 설계", points: ["15평 중 주방 5평, 홀 10평으로 현실적 배분", "조리 시간을 5분으로 단축하는 반조리 밀키트 활용", "알바생 1명이 홀과 포장을 다 쳐낼 수 있는 동선"], alert: "효율성 200%의 주방 설계!" },
        { title: "객단가(1인 매출) 끌어올리기", points: ["단품만 시키지 않게 튀김+음료 묶음 세트 기본화", "테이블당 평균 결제 금액 15,000원 달성 플랜", "매운맛 단계별 요금 추가로 마진 확보"], alert: "적게 팔아도 돈이 남는 마법의 메뉴판!" },
        { title: "잔반 제로 마케팅", points: ["남은 떡볶이 국물에 볶아먹는 '셀프 날치알 볶음밥' 2천원", "버려지는 식재료 최소화로 원가율 3% 추가 절감", "손님 만족도와 마진을 동시에 챙김"], alert: "버릴 게 없는 친환경+수익성 전략!" },
        { title: "비상금(예비비) 확보", points: ["갑자기 에어컨이 고장날 상황을 대비한 예비비 월 20만원 저축", "식자재 가격(파, 양배추) 폭등 시 방어할 버퍼 자금 마련", "순수익 300만원과 별도로 잉여 자금 계산"], alert: "위기에 강한 철벽 방어 재무제표!" },
        { title: "디지털 무인화 도입", points: ["인건비 절감을 위한 테이블 QR 주문(오더) 도입", "초기 설치비 30만원이 들지만 월 알바비 50만원 절감 효과 증명", "주문 누락 0% 달성"], alert: "기술을 이용해 돈을 버는 스마트 식당!" },
        { title: "효율적인 재고 관리", points: ["이천 로컬 농산물 시장 직거래로 채소 원가 10% 절감", "유통기한 긴 소스와 짧은 신선식품 분리 발주 계획", "냉장고 파먹기 요일 지정"], alert: "원가를 꽉 잡는 백종원급 솔루션!" },
        { title: "리뷰 관리 예산안", points: ["배달앱 5점 리뷰 유지를 위한 서비스 튀김 원가(건당 300원) 계산", "악플 발생 시 대응 매뉴얼 및 환불 대비 비용 5% 세팅", "단골 확보를 최우선으로 함"], alert: "고객 관리가 곧 매출 방어입니다!" },
        { title: "플랫폼 분산 전략", points: ["배달의민족, 요기요 외에 수수료가 싼 공공 배달앱 동시 입점", "매장 번호로 직접 주문 시 배달비 무료 혜택 제공", "수수료 지출 15% 감소 기대"], alert: "배달앱의 노예가 되지 않는 독립 전략!" },
        { title: "피크타임 극대화", points: ["점심(12-1시), 저녁(6-8시) 피크타임 매출 70% 집중 현상 분석", "이 시간에만 알바생 2명 투입해 병목 현상 해소", "나머지 시간은 사장님 혼자 운영"], alert: "돈 쓸 때와 아낄 때를 정확히 아네요!" },
        { title: "단골 스탬프의 마법", points: ["10번 먹으면 1번 무료 쿠폰 도입 시 원가 계산", "고객 재방문율 30% 증가를 통한 마케팅 비용 절감 효과 데이터 증명", "할인보다 덤을 주는 게 이득임을 입증"], alert: "숫자로 계산된 완벽한 프로모션!" },
        { title: "명확한 마진표 작성", points: ["떡볶이 1인분: 원가 1,500원, 인건비 1,000원, 임대/공과금 500원, 이익 2,000원", "1일 50인분 판매 시 일 이익 10만원 도출", "30일 기준 300만원 달성 완벽 증명"], alert: "숫자가 완벽하게 맞아떨어집니다. 💯" }
      ]
    };
  },
  methods: {
    goSlide(number) {
      if (this.deck) {
        this.deck.slide(number);
      } else {
        console.error("Reveal 인스턴스가 초기화되지 않았습니다.");
      }
    },

    //  첫번째 게임 (AI 셰프)
    initChefGame() {
      this.chef_status = 'crazy';
      this.spy_count = 2;

      const normalPool = [
        { name: "돈가스", val: "1,500원", icon: "fa-drumstick-bite", isSpy: false },
        { name: "된장찌개", val: "1,000원", icon: "fa-utensils", isSpy: false },
        { name: "제육볶음", val: "1,600원", icon: "fa-fire-alt", isSpy: false },
        { name: "오이무침", val: "400원", icon: "fa-leaf", isSpy: false },
        { name: "김치찌개", val: "1,200원", icon: "fa-hot-tub", isSpy: false },
        { name: "깍두기", val: "300원", icon: "fa-cube", isSpy: false },
        { name: "사과", val: "500원", icon: "fa-apple-alt", isSpy: false },
        { name: "바나나", val: "600원", icon: "fa-lemon", isSpy: false }
      ];

      const spyPool = [
        { name: "금가루 밥", val: "99만원", icon: "fa-gem", isSpy: true },
        { name: "다이아 김치", val: "500만원", icon: "fa-sketch", isSpy: true },
        { name: "고장난 무", val: "-500원", icon: "fa-bug", isSpy: true },
        { name: "상한 고기", val: "0원", icon: "fa-skull-crossbones", isSpy: true },
        { name: "독버섯 국", val: "100원", icon: "fa-biohazard", isSpy: true }
      ];

      const selectedNormals = normalPool.sort(() => 0.5 - Math.random()).slice(0, 4);
      const selectedSpies = spyPool.sort(() => 0.5 - Math.random()).slice(0, 2);

      let combined = [...selectedNormals, ...selectedSpies].map((item, index) => ({
        ...item,
        id: index + 1,
        removed: false,
        errorAnim: false 
      }));

      this.memory_data = combined.sort(() => 0.5 - Math.random());
    },

    cleanData(data) {
      if (data.removed) return; 

      if (data.isSpy) {
        data.removed = true;
        this.spy_count--;
        if (this.spy_count === 0) {
          this.chef_status = 'normal';
        }
      } else {
        data.errorAnim = true;
        setTimeout(() => {
          data.errorAnim = false;
        }, 500);
      }
    },

    resetChefGame() {
      this.initChefGame();
    },

    //  두번째 게임 (급식 로봇)
    removeBadFood(item) {
      if (item.isBad && !item.removed) {
        item.removed = true;
        this.badFoodCount--;
      } else if (!item.isBad) {
        alert("이건 싱싱한 재료예요! 버리면 안 돼요.");
      }
    },
    startStudy() {
      this.step = 4;
      this.training = true;
      let timer = setInterval(() => {
        if (this.studyProgress < 100) {
          this.studyProgress += 5;
        } else {
          this.training = false;
          clearInterval(timer);
        }
      }, 100);
    },
    resetGame() {
      this.step = 0;
      this.badFoodCount = 2;
      this.studyProgress = 0;
      this.foodItems.forEach(item => item.removed = false);
    },

    // 프롬프트 마법 기계 실행 함수
    runPrompt(type) {
      this.pr_loading = true;
      this.pr_current_result = null; 
      this.pr_result_type = type;
      this.pr_status = "데이터 분석 중...";
      this.pr_mode = type === 'bad' ? "생각 안 하고 답하기 모드" : "전문가 빙의 모드";
      this.pr_attempts++;

      setTimeout(() => {
        this.pr_loading = false;
        this.pr_status = "결과 도출 완료!";
        
        if (type === 'bad') {
          const randIdx = Math.floor(Math.random() * this.pr_bad_cases.length);
          this.pr_current_result = this.pr_bad_cases[randIdx];
        } else {
          const randIdx = Math.floor(Math.random() * this.pr_good_cases.length);
          this.pr_current_result = this.pr_good_cases[randIdx];
        }
      }, 1500);
    },

    // 레이아웃 깨짐(잘림) 방지용 토글 함수들
    toggleTrap(index) {
      this.showTrap[index] = !this.showTrap[index];
      this.$nextTick(() => { if (this.deck) this.deck.layout(); });
    },
    toggleAnomaly(index) {
      this.showAnomaly[index] = !this.showAnomaly[index];
      this.$nextTick(() => { if (this.deck) this.deck.layout(); });
    },
    toggleMission(index) {
      this.showMission[index] = !this.showMission[index];
      this.$nextTick(() => { if (this.deck) this.deck.layout(); });
    },
    togglePivot(index) {
      this.showPivot[index] = !this.showPivot[index];
      this.$nextTick(() => { if (this.deck) this.deck.layout(); });
    },
    toggleSensor(index) {
      this.showSensor[index] = !this.showSensor[index];
      this.$nextTick(() => { if (this.deck) this.deck.layout(); });
    },
    toggleCrash(index) {
      this.showCrash[index] = !this.showCrash[index];
      this.$nextTick(() => { if (this.deck) this.deck.layout(); });
    },
    toggleDataScience(index) {
      this.showDataScience[index] = !this.showDataScience[index];
      this.$nextTick(() => { if (this.deck) this.deck.layout(); });
    },

    // 파이썬 터틀 코드 복사 기능
    async copyCode(event) {
      const btn = event.target;
      const codeBlock = btn.closest('.code-card').querySelector('code');
      
      if (codeBlock) {
        try {
          await navigator.clipboard.writeText(codeBlock.innerText);
          const originalText = btn.innerText;
          btn.innerText = "복사 성공!";
          btn.classList.replace('btn-light', 'btn-success');
          
          setTimeout(() => {
            btn.innerText = originalText;
            btn.classList.replace('btn-success', 'btn-light');
          }, 2000);
        } catch (err) {
          console.error("복사 실패:", err);
          alert("복사에 실패했습니다. 인터넷 창 설정을 확인해 주세요.");
        }
      }
    },

    // 워드클라우드용 불만 리뷰 100개 복사 기능
    async copyReviews(event) {
      const btn = event.target.closest('button');
      
      const reviewList = [
        "메뉴가 너무 매워요. 1학년은 울면서 먹음.", "알레르기 표시가 안 보여서 무서워요.", "반찬이 너무 맛없어서 다 버려요.",
        "매워요.", "견과류 알레르기 있는데 호두강정 나왔어요 조심해주세요.", "시간이 너무 오래 걸려서 점심시간 다 지나가요.",
        "매운 음식이 너무 자주 나와요.", "고기 더 주세요. 매일 풀만 나와요.", "알레르기 너무 무서워요.", "반찬이 맛없어요 버림.",
        "시간이 너무 늦게 나와요 배식 늦어요.", "김치가 너무 매워요 매워요.", "맛없어요 다 버렸어요.", "고기 반찬이 적어요.",
        "배식 시간 너무 오래 걸려요.", "매워요 매워요 진짜 매워요.", "알레르기 있는 친구가 아팠어요 조심해요.", "잔반 너무 많이 나와요 버리는게 반.",
        "매워요.", "시간 오래 걸려요 배고파요.", "맛없어요.", "고기 더 주세요 고기고기고기.", "매워요 1학년 못 먹어요.", "알레르기 주의!",
        "매운거 그만 주세요.", "시간 오래 걸려요 배식 좀 빨리.", "맛없어서 다 버려요 잔반통 꽉참.", "매워요 떡볶이 너무 매워요.",
        "알레르기 표시 크게 해주세요.", "시간 오래 걸려요.", "버려요.", "고기 줘요.", "매워요 혀가 아파요.", "알레르기!", "시간 늦어요.",
        "맛없어요.", "버려요 다 버려요.", "매운 반찬 싫어요.", "배식 시간 너무 오래 걸려요 늦어요.", "알레르기 무서워요.", "고기 주세요.",
        "매워요.", "시간 늦어요 오래 걸려요.", "버려요 맛없어요.", "매운거 빼주세요.", "알레르기 조심 조심.", "고기 줘요 고기.",
        "매워요.", "매워요.", "매워요.", "시간 오래 걸려요.", "버려요.", "알레르기 무서워요.", "매워요.", "고기 더 줘요.",
        "매워요.", "시간 늦어요.", "버려요 잔반 많아요.", "알레르기 신경 써주세요.", "매워요 매운거 싫어.", "고기 줘.", "시간 오래 걸림.",
        "매워요.", "알레르기 무섭다.", "버림 버림 다 버림.", "매워요.", "고기 반찬 원해요.", "시간 늦다 늦어.", "매워요 너무 매워.",
        "알레르기 표시!", "버림.", "매워요.", "고기 줘요.", "시간 늦어요 배고파.", "매워요 ㅠㅠ.", "알레르기 조심해.", "버려요 ㅠㅠ.",
        "매워요 1학년 살려.", "매워요.", "매워요.", "시간 오래 걸려요 ㅠㅠ.", "버려요.", "알레르기 무서워 ㅠㅠ.", "고기 줘요 ㅠㅠ."
      ];
      const fullReviewsText = reviewList.join("\n");

      try {
        await navigator.clipboard.writeText(fullReviewsText);
        const originalHtml = btn.innerHTML;
        btn.innerHTML = '<i class="fa fa-check me-2"></i> 복사 성공! 사이트에 붙여넣으세요';
        btn.classList.replace('btn-danger', 'btn-success');
        
        setTimeout(() => {
          btn.innerHTML = originalHtml;
          btn.classList.replace('btn-success', 'btn-danger');
        }, 3000);
      } catch (err) {
        console.error("복사 실패:", err);
        alert("복사에 실패했습니다. 브라우저 설정을 확인해 주세요.");
      }
    },

    loadSheetJS() {
      return new Promise((resolve) => {
        if (window.XLSX) return resolve(window.XLSX);
        const script = document.createElement('script');
        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js';
        script.onload = () => resolve(window.XLSX);
        document.head.appendChild(script);
      });
    },

    async downloadData(type) {
      const headers = ["번호", "메뉴이름", "가격(원)", "조리시간(분)", "보편성(1-10)", "선호도(1-10)", "예상잔반량(kg)", "비고"];
      
      const dataRows = [
        "1,제육볶음,1500,40,8,9,5,정상",
        "2,시금치나물,500,20,6,4,20,정상",
        "3,계란말이,800,30,9,8,3,정상",
        "4,소고기무국,1200,45,8,7,10,정상",
        "5,배추김치,300,5,7,6,15,정상",
        "6,현미밥,400,60,9,7,8,정상",
        "7,야쿠르트,200,2,10,10,1,정상",
        "8,돈가스,1600,40,9,10,2,정상",
        "9,황금 멜론,45000,10,10,10,1,가격오류",
        "10,양배추샐러드,400,15,6,5,25,정상",
        "11,미역국,800,40,8,7,12,정상",
        "12,오징어볶음,1400,35,6,6,18,정상",
        "13,쌀밥,400,600,10,8,5,시간단위오류",
        "14,바나나,300,5,9,8,2,정상",
        "15,카레라이스,1500,45,8,9,4,정상",
        "16,단무지무침,300,10,8,7,8,정상",
        "17,치킨너겟,1200,25,9,10,1,정상",
        "18,콩나물국,600,30,7,5,15,정상",
        "19,깍두기,350,5,7,6,14,정상",
        "20,보리밥,400,60,9,6,10,정상",
        "21,사과,400,10,9,8,4,정상",
        "22,핵불닭볶음면,1200,20,10,9,1,거짓데이터",
        "23,멸치볶음,500,25,6,4,22,정상",
        "24,어묵볶음,700,20,8,7,6,정상",
        "25,된장찌개,900,40,7,6,15,정상",
        "26,잡곡밥,400,60,9,6,9,정상",
        "27,오렌지주스,300,2,10,9,1,정상",
        "28,탕수육,1700,45,9,9,3,정상",
        "29,브로콜리 젤리,500,30,2,10,500,논리모순",
        "30,건새우볶음,600,20,5,4,28,정상",
        "31,마늘쫑무침,500,15,4,3,35,정상",
        "32,순두부찌개,1100,35,6,6,16,정상",
        "33,흑미밥,400,60,9,7,7,정상",
        "34,파인애플,500,10,9,8,3,정상",
        "35,오리훈제,1800,25,9,9,2,정상",
        "36,부추무침,400,15,5,4,30,정상",
        "37,감자조림,600,30,8,7,8,정상",
        "38,콩자반,400,20,6,3,25,정상",
        "39,명품 랍스터,35000,40,10,10,0,가격오류2",
        "40,기장밥,400,60,9,6,9,정상",
        "41,수박,600,10,10,9,2,정상",
        "42,떡갈비,1500,30,9,9,3,정상",
        "43,숙주나물,500,15,7,5,18,정상",
        "44,진미채볶음,800,25,8,8,6,정상",
        "45,참치김치찌개,1200,40,8,8,8,정상",
        "46,흰쌀밥,400,60,10,8,5,정상",
        "47,방울토마토,300,5,8,7,6,정상",
        "48,지옥의 마라탕,1600,40,10,9,1,거짓데이터2",
        "49,오이무침,400,15,5,4,32,정상",
        "50,민트초코 떡볶이,1000,30,2,10,480,논리모순2"
      ];
      
      if (type === 'excel') {
        try {
          const XLSX = await this.loadSheetJS();
          const wb = XLSX.utils.book_new();
          const wsData = [headers, ...dataRows.map(row => row.split(','))];
          const ws = XLSX.utils.aoa_to_sheet(wsData);
          XLSX.utils.book_append_sheet(wb, ws, "AI급식장부");
          XLSX.writeFile(wb, "AI급식특공대_장부.xlsx");
        } catch (error) {
          console.error("Excel generation failed:", error);
          alert("엑셀 파일 다운로드에 실패했습니다.");
        }
      } else {
        const csvContent = headers.join(',') + '\n' + dataRows.join('\n');
        const blob = new Blob(["\uFEFF" + csvContent], { type: 'text/csv;charset=utf-8;' });
        const link = document.createElement("a");
        const url = URL.createObjectURL(blob);
        link.setAttribute("href", url);
        link.setAttribute("download", "AI급식특공대_장부.csv");
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    }
  },
  mounted() {
    this.deck = initializeReveal(this.$refs.revealRef, false);
    this.deck.on('slidechanged', (event) => {
      console.log("Slide is now " + event.indexh);
    });
    this.initChefGame();
  },
  unmounted() {
    if (this.deck) {
        this.deck.destroy();
    }
  }
};
</script>

<style scoped>
@import url('@/assets/js/plugins/reveal-js/css/reveal.css');
@import url('@/assets/js/plugins/reveal-js/css/theme/white.css');
@import url('@/assets/js/plugins/reveal-js/plugin/highlight/monokai.css');
@import url('@/assets/js/plugins/reveal-js/plugin/chalkboard/style.css');
@import url('@/assets/js/plugins/reveal-js/plugin/customcontrols/style.css');
@import url('@/assets/js/plugins/reveal-js/plugin/menu/menu.css');
@import url('@/assets/css/reveal-lecture.css');

.border-bottom-bold { border-bottom: 3px solid #dee2e6 !important; }
.fw-bold { font-weight: 700; }
.table-info { background-color: #f0faff; } 
.table-success { background-color: #f6fff8; } 
.table-warning { background-color: #fff8e1 !important; }

.card { border-radius: 10px; border: 1px solid #ddd; }
.list-group-item { text-align: left; background-color: transparent; }
.reveal section { font-size: 0.95em; }

.img-fluid { max-width: 100%; height: auto; }

.copy-btn { cursor: pointer; transition: all 0.3s ease; }
.copy-btn:hover { filter: brightness(0.9); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }


/* === 첫번째 미니게임 전용 추가 CSS === */
.shake-anim {
  animation: shake 0.5s infinite;
}
.btn-outline-light:hover {
  background-color: #f87171; 
  border-color: #f87171;
  color: white;
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-top-color: #ffffff;
  border-bottom: 0;
  margin-left: -20px;
  margin-bottom: -20px;
}

.data-chip:hover {
  transform: translateY(-5px);
  background-color: #f8fafc !important;
}
.bg-danger-subtle { background-color: #fee2e2 !important; }


/* === 두번째 미니게임 전용 추가 CSS === */
.slide-up-anim {
  animation: slideUp 0.5s ease-out forwards;
  opacity: 0;
}
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.scale-down {
  transform: scale(0);
  transition: all 0.4s ease-in;
}

.pulse-btn {
  animation: pulse-orange 1.5s infinite;
}
@keyframes pulse-orange {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}

.ai-brain-scan {
  position: relative;
  overflow: hidden;
}
.ai-brain-scan::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #0dcaf0;
  animation: scan 1.5s infinite linear;
  box-shadow: 0 0 10px #0dcaf0;
}
@keyframes scan {
  0% { top: 0%; }
  100% { top: 100%; }
}

.slide-in-right {
  animation: slideInRight 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slideInRight {
  0% { transform: translateX(50px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

.ai-game-screen {
  box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
  border: 2px solid #334155;
}

.robot-study-box {
  background: radial-gradient(circle, #334155 0%, #0b0f19 100%);
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* AI 프롬프트 게임 CSS */
.pr-spin {
  animation: pr-gear-rotate 2s linear infinite;
}
@keyframes pr-gear-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.pr-btn {
  transition: all 0.3s ease;
  font-weight: bold;
}
.pr-btn:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(255,255,255,0.2);
}

.pop-in-anim {
  animation: pr-pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes pr-pop-in {
  from { opacity: 0; transform: translateY(30px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.border-dashed {
  border: 2px dashed #444 !important;
}
</style>