<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;">중학교 1학년 ~ 중학교 2학년 대상 (총 3차시 / 270분)</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(31)" 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">25분</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="9" class="align-middle text-center fw-bold">2차시<br>(데이터 탐정)</td>
              <td class="align-middle text-center">정리</td>
              <td><div class="py-1 fw-bold text-primary">복습 퀴즈 및 데이터의 필요성 이해하기</div></td>
              <td class="align-middle text-center">15분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-primary" @click="goSlide(8)" 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">20분</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">1교시</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-success">심화 미션: 위기의 가게를 구해라!</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(17)" 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">15분</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">15분</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="5" 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">20분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-warning" @click="goSlide(24)" 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-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(28)" 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">20분</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="border-bottom-bold">
              <td class="align-middle text-center">2교시</td>
              <td><div class="py-1 fw-bold">착한 AI 선언문: 우리 회사의 약속 발표</div></td>
              <td class="align-middle text-center">25분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-warning" @click="goSlide(31)" style="cursor:pointer"></i></td>
            </tr>
          </tbody>
        </table>
      </section>

      <section>
        <h2>🤔 1차시: 상상 속 가게와 진짜 현실 (절대 규칙)</h2>
        <p class="mb-4">
          여러분은 오늘부터 진짜 
          <span class="badge bg-warning text-dark px-3 py-2 shadow-sm" style="font-size: 1.1rem; vertical-align: middle;">
            🍳 음식점 사장님
          </span> 
          입니다! 하지만 다음 <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" style="font-size: 0.95rem;">
            <div>🎯 <b>목표:</b> 한 달에 순수하게 내 통장에 <b>300만 원</b> 남기기</div>
            <div>📐 <b>크기:</b> 동네의 아담한 <b>15평</b> 짜리 가게</div>
            <div>🪑 <b>의자:</b> <b>4명이 앉는 테이블 딱 4개</b> (한 번에 16명만 식사 가능)</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야, 15평 떡볶이집을 열 건데, 테이블은 4개야. 떡볶이 1인분에 3천원씩 팔아서 한 달에 300만 원 버는 계획을 세워줘!"</p>
                <hr class="my-1">
                <p class="text-danger fw-bold mb-0">👉 AI의 거짓말: AI는 "한 달에 300만원을 벌려면, 손님이 5분 만에 먹고 나가야 합니다!"라고 로봇 같은 계산만 해줍니다.</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">"테이블이 꽉 차면 전부 배달로 팔면 되지! 배달비나 세금은 안 낼 거니까 뺀 상태로 300만원 버는 법 알려줘."</p>
                <hr class="my-1">
                <p class="text-danger fw-bold mb-0">👉 놓친 점: 배달 앱 수수료, 안 팔려서 상한 재료 버리는 값, 알바생 월급을 하나도 생각하지 않았어요!</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에게 묻기 전, 우리 가게의 6가지 비밀 무기 정하기!
          </div>
          <div class="card-body p-2" style="font-size: 0.85rem;">
            <p class="text-muted mb-2 text-center">조원들과 함께 아래 내용을 먼저 정해보세요.</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 class="col-4"><span class="badge bg-light text-dark border w-100 py-2">🙋 알바생 수 (몇 명?)</span></div>
              <div class="col-4"><span class="badge bg-light text-dark border w-100 py-2">🛌 쉬는 날 (언제 쉴까?)</span></div>
              <div class="col-4"><span class="badge bg-light text-dark border w-100 py-2">📢 홍보 방법 (당근마켓?)</span></div>
            </div>
            <hr class="my-2">
            <p class="mb-1 text-primary fw-bold text-center">
              👉 위 6가지 정보와 [절대 규칙]을 모두 섞어서 ChatGPT에게 첫 번째 사업 계획서를 써달라고 명령하세요!
            </p>
          </div>
        </div>
      </section>

      <section>
        <h2>🥊 AI 훈련시키기: Round 1 (숨은 돈의 비밀)</h2>
        <p>AI가 멋진 계획서를 줬나요? 하지만 현실은 그렇게 만만하지 않아요. AI에게 호통을 쳐보세요!</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;">
                아르바이트생에게 돈을 적게 주면 아무도 우리 가게에서 일하지 않아요. 열심히 일하면 '주휴수당'이라는 보너스도 줘야 해요.
                <br><strong class="text-danger">👉 AI에게 "알바생 월급을 진짜 현실처럼 1.3배 더 비싸게 계산해서 다시 계획 짜!"라고 명령하세요.</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. 버려지는 음식물 쓰레기</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;">
                재료를 사 오면 100% 다 요리해서 팔 수 있을까요? 상한 채소, 땅에 떨어진 떡 등 최소 <b>20%는 버려야 합니다.</b>
                <br><strong class="text-danger">👉 AI에게 "재료비에 '버려지는 재료 20%' 비용을 추가해서 이익을 깎아버려!"라고 압박하세요.</strong>
              </div>
            </li>
          </ul>
        </div>
      </section>

      <section>
        <h2>🥊 AI 훈련시키기: Round 2 (좁은 매장의 슬픔)</h2>
        <p>우리 가게는 테이블이 4개밖에 없습니다. 손님들이 안 나가면 어떻게 하죠?</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. 게임하며 안 나가는 손님들</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;">
                테이블이 딱 4개뿐인데, 손님들이 밥을 먹고 2시간 동안 폰 게임을 하면? 밖에서 기다리던 손님들은 화내며 집에 갑니다.
                <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(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;">
                장사가 안 돼도 한 달에 한 번씩 건물 주인에게 내는 월세와 에어컨/냉장고 전기세는 무조건 빠져나갑니다.
                <br><strong class="text-danger">👉 AI에게 "한 달 월세 150만 원, 전기/수도세 50만 원을 매달 무조건 나가는 돈으로 빼고 다시 계산해!"라고 명령하세요.</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;">
                오토바이 배달을 시작했나요? 배달앱 회사에 내는 수수료, 오토바이 배달 기사님께 주는 돈, 포장 박스 값을 빼면 남는 게 거의 없어요.
                <br><strong class="text-danger">👉 AI에게 "배달로 번 돈의 30%는 배달비로 날아간다고 치고 내 통장에 얼마 남는지 검사해봐!"라고 지시하세요.</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;">
                우리 가게 바로 맞은편에 떡볶이를 무려 '반값'에 파는 프랜차이즈가 문을 열었습니다. 손님들이 다 빼앗기게 생겼어요.
                <br><strong class="text-danger">👉 AI에게 "가격을 내리지 않고도 우리 가게에 손님이 올 수밖에 없는 특별한 '이벤트'나 '인테리어 비법'을 추가해!"라고 지시하세요.</strong>
              </div>
            </li>
          </ul>
        </div>
      </section>

      <section>
        <h2>🎨 2교시: 바이브 코딩 (숫자로 그리는 마법)</h2>
        <p>AI 사장님 훈련이 끝났다면, 이제 AI에게 코드를 짜달라고 해서 우리 가게 로고를 만듭니다!</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도 꺾어서 선 굵기 3으로 그려줘"</b>처럼 명확한 숫자(코드)로 AI를 통제해서 그림을 그리는 방법입니다.</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 = ["#1E90FF", "#00BFFF"] # 시원한 파란색 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("#8B4513")  # 진한 갈색
    t.pensize(5)
    
    for _ in range(2):
        t.forward(500)
        t.right(90)
        t.forward(300)
        t.right(90)
        
    # 2. 메인 글씨 쓰기
    t.penup()
    t.goto(0, 30)
    t.color("black")
    t.write("거북이 떡볶이", align="center", font=("Malgun Gothic", 40, "bold"))

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

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

draw_sign()
</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("#FF00FF") # 핑크색 네온
t.write("우주 최강 아이스크림", align="center", font=("Courier", 30, "bold"))

t.goto(0, -40)
t.color("#00FFFF")
t.write("OPEN 24 HOURS", align="center", font=("Courier", 15, "normal"))</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="fw-bold text-success mb-4">💡 2차시 시작 전! 1차시 복습 OX 퀴즈</h2>
        <div style="height: 500px; overflow-y: auto; padding: 10px;">
          
          <div class="card mb-3 text-left shadow-sm border-primary">
            <div class="card-body">
              <h5 class="fw-bold">Q1. AI 사장님에게 "한 달에 300만원 벌게 해줘"라고 아주 짧게 질문해도 알아서 완벽한 계획을 세워준다?</h5>
              <div class="d-flex justify-content-center gap-3 mt-3">
                <button class="btn btn-lg px-4" :class="ans_ox1 === 'O' ? 'btn-danger text-white' : 'btn-outline-secondary'" @click="ans_ox1 = 'O'">⭕ 그렇다</button>
                <button class="btn btn-lg px-4" :class="ans_ox1 === 'X' ? 'btn-primary text-white' : 'btn-outline-secondary'" @click="ans_ox1 = 'X'">❌ 아니다</button>
              </div>
              <div v-if="ans_ox1 === 'X'" class="alert alert-success mt-3 mb-0 fw-bold">🎉 정답! 가게 크기, 테이블 수 등 구체적인 조건을 줘야 속지 않아요.</div>
              <div v-if="ans_ox1 === 'O'" class="alert alert-danger mt-3 mb-0 fw-bold">땡! AI는 조건을 주지 않으면 로봇처럼 비현실적인 계산만 해버려요.</div>
            </div>
          </div>

          <div class="card mb-3 text-left shadow-sm border-primary">
            <div class="card-body">
              <h5 class="fw-bold">Q2. 테이블이 4개뿐인 우리 가게에서, 손님들이 밥을 먹고 2시간 동안 폰 게임을 하면 가게 매출이 쑥쑥 오른다?</h5>
              <div class="d-flex justify-content-center gap-3 mt-3">
                <button class="btn btn-lg px-4" :class="ans_ox2 === 'O' ? 'btn-danger text-white' : 'btn-outline-secondary'" @click="ans_ox2 = 'O'">⭕ 그렇다</button>
                <button class="btn btn-lg px-4" :class="ans_ox2 === 'X' ? 'btn-primary text-white' : 'btn-outline-secondary'" @click="ans_ox2 = '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">땡! 자리가 없어서 다른 손님을 못 받게 되니 손해를 봅니다.</div>
            </div>
          </div>

          <div class="card mb-3 text-left shadow-sm border-primary">
            <div class="card-body">
              <h5 class="fw-bold">Q3. 컴퓨터에게 "거북아, 앞으로 50만큼 가고 90도 꺾어줘"처럼 명확한 숫자 코드로 명령해 그림을 그리는 것을 '바이브 코딩'이라고 한다?</h5>
              <div class="d-flex justify-content-center gap-3 mt-3">
                <button class="btn btn-lg px-4" :class="ans_ox3 === 'O' ? 'btn-primary text-white' : 'btn-outline-secondary'" @click="ans_ox3 = 'O'">⭕ 그렇다</button>
                <button class="btn btn-lg px-4" :class="ans_ox3 === 'X' ? 'btn-danger text-white' : 'btn-outline-secondary'" @click="ans_ox3 = 'X'">❌ 아니다</button>
              </div>
              <div v-if="ans_ox3 === 'O'" class="alert alert-success mt-3 mb-0 fw-bold">🎉 정답! 파이썬 터틀과 숫자를 이용해 우리가 직접 멋진 간판을 만들었죠!</div>
              <div v-if="ans_ox3 === 'X'" class="alert alert-danger mt-3 mb-0 fw-bold">땡! 코드로 기계를 통제해서 그리는 마법을 바이브 코딩이라고 해요.</div>
            </div>
          </div>

        </div>
      </section>

      <section>
        <h2 class="text-success fw-bold">🌿 민초청국장 선호도 조사</h2>
        <p>우리가 좋아하는 것, 싫어하는 것도 훌륭한 데이터가 될 수 있어요!<br>여러분의 <b>'민초청국장' 선호도</b>는 1점부터 10점 중 몇 점인가요?</p>
        <div class="d-flex justify-content-center gap-2 mt-4 flex-wrap">
          <button v-for="i in 10" :key="'mincho'+i" class="btn btn-lg fw-bold"
                  :class="mincho_score === i ? 'btn-success' : 'btn-outline-success'"
                  @click="mincho_score = i">
            {{ i }}점
          </button>
        </div>
        <div v-if="mincho_score" class="alert alert-info mt-4 fw-bold pop-in-anim">
          내가 선택한 점수: {{ mincho_score }}점! <br>이것도 아주 훌륭한 <strong>'데이터'</strong>입니다.
        </div>
      </section>

      <section>
        <h2 class="text-primary fw-bold">📊 성공한 음식점이 되려면 어떤 데이터가 필요할까?</h2>
        <p class="text-muted">대박 맛집 사장님이 되기 위해 우리가 꼼꼼하게 모아야 할 '숫자'들을 힌트를 보고 추리해 봅시다!</p>
        <div class="row mt-4">
          <div class="col-md-4">
            <div class="card border-primary h-100 shadow-sm">
              <div class="card-header bg-primary text-white fw-bold">🧑‍🤝‍🧑 손님에 대한 궁금증</div>
              <div class="card-body" style="font-size: 0.9rem;">
                <ul class="text-start list-unstyled">
                  <li class="mb-3">🤔 "우리 가게는 몇 시에 젤 바쁘지?"<br> <span class="text-primary fw-bold">👉 [ ⏰ _ _ 시간대 ]</span></li>
                  <li class="mb-3">🤔 "학생이 많을까, 어른이 많을까?"<br> <span class="text-primary fw-bold">👉 [ 📊 손님 _ _ _ ]</span></li>
                  <li>🤔 "어제 온 손님이 오늘 또 왔을까?"<br> <span class="text-primary fw-bold">👉 [ 🔁 _ _ _ _ ]</span></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card border-success h-100 shadow-sm">
              <div class="card-header bg-success text-white fw-bold">🍔 메뉴에 대한 궁금증</div>
              <div class="card-body" style="font-size: 0.9rem;">
                <ul class="text-start list-unstyled">
                  <li class="mb-3">🤔 "가장 많이 팔린 메뉴 1등은?"<br> <span class="text-success fw-bold">👉 [ 🏆 인기 _ _ _ _ ]</span></li>
                  <li class="mb-3">🤔 "손님들이 자꾸 남기는 반찬은?"<br> <span class="text-success fw-bold">👉 [ 🗑️ _ _ 비율 ]</span></li>
                  <li>🤔 "주문받고 요리 완성까지의 시간은?"<br> <span class="text-success fw-bold">👉 [ ⏱️ 평균 _ _ 시간 ]</span></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card border-danger h-100 shadow-sm">
              <div class="card-header bg-danger text-white fw-bold">💰 돈에 대한 궁금증</div>
              <div class="card-body" style="font-size: 0.9rem;">
                <ul class="text-start list-unstyled">
                  <li class="mb-3">🤔 "오늘 카드로 긁힌 전체 금액은?"<br> <span class="text-danger fw-bold">👉 [ 💳 총 _ _ _ ]</span></li>
                  <li class="mb-3">🤔 "배달비 다 떼고 내 통장에 남는 돈은?"<br> <span class="text-danger fw-bold">👉 [ 💵 _ _ _ ]</span></li>
                  <li>🤔 "문 닫아도 매달 건물주에게 내는 돈은?"<br> <span class="text-danger fw-bold">👉 [ 🏢 _ _ ]</span></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="alert alert-warning mt-4 fw-bold">
          💡 정답을 조원들과 함께 상상해 보세요! 이런 일상적인 질문들을 '숫자'로 바꾼 것이 바로 데이터입니다.
        </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="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="m_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="mb-3">
                <i class="fa fa-robot fa-4x" :class="m_chef_status === 'crazy' ? 'text-danger chef-robot-vibrate' : 'text-info'"></i>
                <i class="fa fa-money-bill-wave text-warning ms-2 fs-2"></i>
              </div>
              
              <div class="chef-bubble p-3 bg-white text-dark rounded-3" style="width: 85%;">
                <div v-if="m_chef_status === 'crazy'" class="fw-bold text-center" style="font-size: 0.95rem;">
                  "사장님, 분석 결과... <br> 
                  <span class="text-danger fs-5">떡볶이 1인분을 50만원</span>에 파세요! <br>
                  그럼 하루에 하나만 팔아도 부자!!"
                </div>
                <div v-else class="fw-bold text-center" style="font-size: 0.95rem;">
                  "데이터를 청소하니 정신이 드네요. <br> 
                  <span class="text-primary fs-5">떡볶이 적정가는 5,500원</span> 입니다. <br>
                  이제 진짜 장사를 시작해볼까요?"
                </div>
              </div>
            </div>

            <div class="p-3 bg-dark" style="width: 450px;">
              <h6 class="text-warning fw-bold mb-3" style="font-size: 0.9rem;"><i class="fa fa-broom me-2"></i>가짜 데이터를 클릭해서 제거!</h6>
              <div class="d-flex flex-wrap gap-2 justify-content-center">
                <div v-for="data in m_memory_data" :key="data.id" 
                    class="chef-data-chip p-2 rounded-3 text-center transition-all shadow-sm"
                    :class="{'chef-removed': data.removed, 'bg-light': !data.removed}"
                    @click="m_cleanData(data)"
                    style="width: 130px; cursor: pointer;">
                  <div class="text-dark fw-bold" style="font-size: 0.75rem;">{{ data.name }}</div>
                  <div class="text-primary fw-bold font-monospace" style="font-size: 0.85rem;">{{ data.val }}</div>
                  <div class="text-muted" style="font-size: 0.65rem; border-top: 1px solid #ddd; margin-top:4px;">{{ data.desc }}</div>
                </div>
              </div>
              
              <div class="mt-4 p-3 rounded-3 text-center" :class="m_spy_count > 0 ? 'bg-secondary text-white' : 'bg-success text-white'" style="font-size: 0.85rem;">
                <div v-if="m_spy_count > 0">
                  🔎 <b>범인(이상치) 찾기:</b> {{ m_spy_count }}개 남음 <br>
                  <small>(말도 안 되게 큰 숫자나 에러값을 찾으세요!)</small>
                </div>
                <div v-else class="fw-bold">
                  ✨ 나쁜 데이터를 다 치웠어요! AI 사장님이 부활했습니다!
                </div>
              </div>
            </div>
          </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="m_resetChefGame">
              <i class="fa fa-redo me-1"></i> 데이터 다시 섞기
            </button>
          </div>
        </div>
      </section>

      <section>
        <h2>📥 2차시: 오픈 6개월, 가게에 도둑이 들었다?</h2>
        <p>열심히 장사를 했는데 통장에 돈이 텅텅 비었습니다. 누군가 장부를 조작했거나 컴퓨터가 고장 난 것 같아요!</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">🚨 긴급 입수: 우리 가게 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>손님 수:</b> 하루에 대충 150명쯤 옵니다.<br>
              ✔️ <b>매출액:</b> 하루에 약 50만 원쯤 법니다.<br>
              ✔️ <b>테이블:</b> 여전히 딱 4개뿐입니다.
            </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> 번호, 날짜, 최고기온, 방문객수, 총매출액, 배달비, 순이익
            </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>👉 범인: 5번, 32번 (계산기 0을 잘못 누름)</b><br>
                평균 50만 원 벌던 가게가 갑자기 5,000만 원을 벌었다고 적혀있네요! 직원이 영수증을 찍을 때 실수로 0을 두 번 더 누른 <b>단순 오타</b>입니다.
              </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. "손님이 300명이나 왔는데, 돈은 0원?"</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>👉 범인: 9번, 41번 (인터넷 고장)</b><br>
                카드 결제기가 고장 나거나 인터넷이 끊기면 결제가 안 됩니다. 손님들은 음식을 못 먹고 0원만 찍힌 채 화내며 돌아간 날입니다.
              </div>
            </li>
            <li class="list-group-item">
              <div class="d-flex align-items-center justify-content-between mt-2" @click="toggleAnomaly(2)" style="cursor: pointer;">
                <span class="fs-5 fw-bold text-primary">🔍 사건 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>👉 범인: 19번, 38번 (온도 센서 고장)</b><br>
                기온이 100도, 혹은 영하 40도로 기록되어 있습니다. 이건 날씨를 재는 온도계(센서)가 완전히 고장 난 거예요!
              </div>
            </li>
          </ul>
        </div>
      </section>

      <section>
        <h2>🕵️ 명탐정 추리: 말이 안 되는 가짜 손님 찾기</h2>
        <p>이번엔 머리를 써야 합니다. 1차시의 규칙 <b>[테이블 4개, 배달비 조심, 옆집 반값 가게]</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(3)" style="cursor: pointer;">
                <span class="fs-5 fw-bold text-danger">🔍 사건 4. 귀신 손님 1,000명이 왔다 갔다?</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>👉 범인: 14번, 45번</b><br>
                우리 가게는 한 번에 16명만 앉을 수 있어요. 하루에 1,000명이 넘게 먹고 갔다는 건 물리적으로 불가능한 가짜 데이터입니다!
              </div>
            </li>
            <li class="list-group-item">
              <div class="d-flex align-items-center justify-content-between mt-2" @click="toggleAnomaly(4)" style="cursor: pointer;">
                <span class="fs-5 fw-bold text-danger">🔍 사건 5. 죽도록 팔았는데 내 돈은 어디에?</span>
                <span style="font-size: 1.2rem; transition: transform 0.3s;" :style="{ transform: showAnomaly[4] ? 'rotate(180deg)' : 'rotate(0deg)' }">⬇️</span>
              </div>
              <div v-if="showAnomaly[4]" class="mt-2 text-muted" style="font-size: 0.9rem;">
                <b>👉 범인: 23번, 48번 (배달비 폭탄)</b><br>
                매출은 100만 원이나 되는데 통장에 남은 돈(순이익)은 5만 원뿐입니다. 배달비로만 60만 원이 나갔네요. 많이 판다고 다 좋은 게 아닙니다.
              </div>
            </li>
            <li class="list-group-item">
              <div class="d-flex align-items-center justify-content-between mt-2" @click="toggleAnomaly(5)" style="cursor: pointer;">
                <span class="fs-5 fw-bold text-danger">🔍 사건 6. 옆집에 괴물이 나타났다!</span>
                <span style="font-size: 1.2rem; transition: transform 0.3s;" :style="{ transform: showAnomaly[5] ? 'rotate(180deg)' : 'rotate(0deg)' }">⬇️</span>
              </div>
              <div v-if="showAnomaly[5]" class="mt-2 text-muted" style="font-size: 0.9rem;">
                <b>👉 범인: 29번, 50번</b><br>
                날씨도 좋은데 손님이 갑자기 20명으로 줄어든 날이 있습니다. 맞아요, 길 건너에 '반값 떡볶이' 가게가 문을 열어서 손님을 다 빼앗긴 날입니다.
              </div>
            </li>
          </ul>
        </div>
      </section>

      <section>
        <h2 class="text-info fw-bold">📈 CODAP, 넌 누구냐?!</h2>
        <p>어려운 숫자 데이터들을 한눈에 쏙 들어오게 예쁜 그래프로 그려주는 마법의 도구입니다.</p>
        <div class="card bg-light shadow-sm mt-4 p-4 border-info">
          <div class="row align-items-center">
            <div class="col-md-8 text-start">
              <h5 class="fw-bold text-dark">💡 방금 우리가 했던 '민초청국장 선호도'를 CODAP에 넣는다면?</h5>
              <p class="text-muted" style="font-size: 0.9rem;">
                반 친구들 30명의 점수를 표로 보면 누가 몇 점인지 헷갈리지만,<br>
                CODAP으로 <strong>점수별 학생 수</strong>를 그래프로 만들면<br>
                "아! 우리 반은 1점이 제일 많구나!" 하고 1초 만에 알 수 있어요.
              </p>
            </div>
            <div class="col-md-4">
              <i class="fa fa-chart-bar text-info" style="font-size: 5rem;"></i>
            </div>
          </div>
        </div>
        <div class="mt-4 fw-bold text-primary">
          이제 진짜 데이터 탐정이 되어서 CODAP을 직접 다뤄볼까요?
        </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> CODAP 탐험용 (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;">
            왼쪽 위 <b>[☰ 메뉴]</b> 누르고<br><b>[가져오기]</b>로 CSV 선택
          </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">이상한 점을 마우스나 손가락으로 <b>클릭</b>하거나 드래그해서 선택합니다.</li>
              <li class="mb-1">그래프 옆 <b>눈 모양 아이콘(👁️)</b>을 누르고 <b>[선택한 데이터 숨기기]</b>를 클릭하세요.</li>
              <li class="text-danger fw-bold">가장 중요! 그래프 오른쪽 위 <b>[모든 데이터를 표시하도록 화면크기조정(십자 화살표 🔀)]</b> 버튼을 누르세요.</li>
            </ol>
            <div class="mt-2 text-primary fw-bold text-center">
              👉 짠! 가짜 데이터가 사라지고, 진짜 데이터들만 화면에 꽉 차게 예뻐집니다!
            </div>
          </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;">🎯 탐험대의 미션 3가지</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;">온도가 100도인 가짜 데이터를 찾아서 숨기고 화면크기조정(Rescale)을 해보세요. 추울 때 많이 오는지 확인!</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): 순이익 / <b>가운데 색칠하기(Legend):</b> 배달비
              </div>
            </li>
            <li class="list-group-item">
              <div class="d-flex align-items-center justify-content-between" @click="toggleMission(2)" style="cursor: pointer;">
                <b>🔥 미션 3. 손님이 절벽처럼 떨어진 날 찾기</b>
                <span class="badge bg-secondary">힌트 보기 ⬇️</span>
              </div>
              <p class="mb-1 text-muted" style="font-size: 0.75rem;">점들을 선으로 연결해보면, 절벽처럼 뚝 떨어지는 곳이 보일 겁니다.</p>
              <div v-if="showMission[2]" 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 class="text-danger fw-bold mb-4">🕵️ 심화 미션: 위기의 가게를 구해라!</h2>

        <div class="card border-warning text-start mb-4 shadow-sm" style="font-size: 0.9rem;">
          <div class="card-header bg-warning text-dark fw-bold">
            Q. 가게 사정이 어려워져 홀을 계속 유지할지 고민입니다. 장부에 어떤 데이터를 추가해야 결정을 내릴 수 있을까요?
          </div>
          <div class="card-body bg-light">
            <select class="form-select border-warning" v-model="ans_mission4">
              <option :value="null" disabled>정답을 선택하세요</option>
              <option value="1">오늘의 날씨 (맑음/흐림/비)</option>
              <option value="2">알바생의 기분 점수</option>
              <option value="3">홀 결제건수, 배달 결제건수, 포장 결제건수</option>
              <option value="4">가게 배경음악 플레이리스트</option>
            </select>
            <div v-if="ans_mission4 === '3'" class="alert alert-success mt-3 mb-0 fw-bold py-2">
              🎉 정답! 결제 방식별 건수를 보면 홀을 유지할지 배달 전문으로 바꿀지 알 수 있어요!
            </div>
            <div v-else-if="ans_mission4 && ans_mission4 !== '3'" class="alert alert-danger mt-3 mb-0 fw-bold py-2">
              ❌ 땡! 공간 유지 여부를 결정하려면, 공간별로 돈이 얼마나 들어오는지 구분해야 해요.
            </div>
          </div>
        </div>

        <div class="card border-success text-start shadow-sm" style="font-size: 0.9rem;">
          <div class="card-header bg-success text-white fw-bold">
            🏅 이건 진짜 데이터과학자! 손님들이 시키는 '평균 금액'을 정확히 알고 싶다면?
          </div>
          <div class="card-body bg-light">
            <p class="text-muted mb-3" style="font-size: 0.85rem;">올바른 분석 순서를 드롭다운에서 차례대로 선택하세요.</p>
            
            <div class="d-flex align-items-center mb-2">
              <span class="badge bg-secondary me-2">Step 1</span>
              <select class="form-select form-select-sm" v-model="ans_step1" style="font-size: 0.8rem;">
                <option :value="null" disabled>첫 번째 할 일</option>
                <option value="wrong">무조건 방문객수-총매출 그래프부터 그린다</option>
                <option value="correct">날짜-총매출액 그래프에서 5,000만 원짜리 오타(이상치) 숨기기</option>
              </select>
            </div>

            <div class="d-flex align-items-center mb-2" v-if="ans_step1 === 'correct'">
              <span class="badge bg-secondary me-2">Step 2</span>
              <select class="form-select form-select-sm" v-model="ans_step2" style="font-size: 0.8rem;">
                <option :value="null" disabled>두 번째 할 일</option>
                <option value="correct">날짜-방문객수 그래프에서 귀신 손님 1,000명(이상치) 숨기기</option>
                <option value="wrong">에어컨 온도를 낮춘다</option>
              </select>
            </div>

            <div class="d-flex align-items-center" v-if="ans_step2 === 'correct'">
              <span class="badge bg-secondary me-2">Step 3</span>
              <select class="form-select form-select-sm" v-model="ans_step3" style="font-size: 0.8rem;">
                <option :value="null" disabled>마지막 할 일</option>
                <option value="wrong">엑셀을 끄고 퇴근한다</option>
                <option value="correct">가로축(X)을 방문객수, 세로축(Y)을 총매출액으로 놓고 그래프 확인!</option>
              </select>
            </div>

            <div v-if="ans_step3 === 'correct'" class="alert alert-primary mt-3 mb-0 fw-bold py-2 pop-in-anim">
              🌟 완벽합니다! 가짜 데이터(이상치)를 모두 지운 후 X-Y 그래프를 그려야 진짜 평균을 구할 수 있죠! 당신은 진정한 데이터 과학자!
            </div>
          </div>
        </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">"배달이 늦어요", "가게가 좁아요" 등 손님들이 남긴 영수증 리뷰 100개입니다. 직접 읽기엔 너무 많죠? 워드클라우드로 변신시켜 보세요!</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">우리는 그래프와 워드클라우드를 통해 가게의 치명적인 문제점을 완벽하게 찾아냈습니다. 이제 작전을 바꿀 시간입니다!</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;">
              ✔️ 여름에 뜨거운 떡볶이를 안 먹는다면? 👉 "더운 날씨엔 시원한 팥빙수와 얼음 쿨피스 세트를 팔자!"
            </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>
        <h2 class="fw-bold text-primary mb-3">🎬 [보충 영상] AI는 세상을 어떻게 볼까?</h2>
        <p class="text-muted" style="font-size: 0.9rem;">
          우리가 아까 본 '온도', '배달비' 같은 항목들을 인공지능은 <b>'피처(Feature)'</b>라고 부릅니다. 인공지능이 피처로 어떻게 똑똑해지는지 볼까요?
        </p>

        <div class="row g-4 mt-2">
          <div class="col-md-6">
            <div class="card shadow-sm border-0 h-100">
              <div class="card-header bg-primary text-white fw-bold">1. 데이터가 돈이 되는 마법</div>
              <div class="card-body p-2 bg-light">
                <iframe width="100%" height="220" src="https://www.youtube.com/embed/vc6heXAXqEs" frameborder="0" allowfullscreen></iframe>
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="card shadow-sm border-0 h-100">
              <div class="card-header bg-success text-white fw-bold">2. 인공지능의 눈, '피처' 찾기</div>
              <div class="card-body p-2 bg-light">
                <iframe width="100%" height="220" src="https://www.youtube.com/embed/Ym3IM9y4U5U" frameborder="0" allowfullscreen></iframe>
              </div>
            </div>
          </div>
        </div>
      </section>

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

      <section data-background="#0f172a" class="text-white pt-2">
        <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-game-console shadow-lg rounded-4 overflow-hidden border border-secondary" style="max-width: 950px; margin: 0 auto; background-color: #1e293b;">
          
          <div class="d-flex justify-content-center align-items-center gap-2 p-2 bg-dark border-bottom border-secondary" style="font-size: 0.8rem; font-weight: bold;">
            <span class="px-3 py-1 rounded-pill" :class="pipe_step >= 1 ? 'bg-primary text-white' : 'text-secondary'">1. 데이터 모으기</span>
            <i class="fa fa-chevron-right text-secondary" style="font-size: 0.6rem;"></i>
            <span class="px-3 py-1 rounded-pill" :class="pipe_step >= 2 ? 'bg-danger text-white' : 'text-secondary'">2. 가짜 골라내기</span>
            <i class="fa fa-chevron-right text-secondary" style="font-size: 0.6rem;"></i>
            <span class="px-3 py-1 rounded-pill" :class="pipe_step >= 3 ? 'bg-success text-white' : 'text-secondary'">3. 숫자로 바꾸기</span>
            <i class="fa fa-chevron-right text-secondary" style="font-size: 0.6rem;"></i>
            <span class="px-3 py-1 rounded-pill" :class="pipe_step >= 4 ? 'bg-warning text-dark' : 'text-secondary'">4. 패턴 공부하기</span>
            <i class="fa fa-chevron-right text-secondary" style="font-size: 0.6rem;"></i>
            <span class="px-3 py-1 rounded-pill" :class="pipe_step >= 5 ? 'bg-info text-dark' : 'text-secondary'">5. 가격 맞히기</span>
          </div>

          <div class="ai-game-screen position-relative p-3" style="height: 480px; background-color: #0b0f19; overflow: hidden;">
            
            <div v-if="pipe_feedback_msg" 
                   class="position-absolute top-50 start-50 translate-middle p-3 rounded-4 shadow-lg text-center text-white pop-in-anim" 
                   style="z-index: 100; min-width: 320px;" 
                   :class="pipe_feedback_type === 'success' ? 'bg-success' : 'bg-danger'">
                <h5 class="fw-bold mb-2">
                  <i class="fa" :class="pipe_feedback_type === 'success' ? 'fa-check-circle' : 'fa-times-circle'"></i>
                  {{ pipe_feedback_type === 'success' ? '정답입니다!' : '앗, 잠깐만요!' }}
                </h5>
                <p class="mb-0 lh-sm" style="font-size: 0.9rem;" v-html="pipe_feedback_msg"></p>
            </div>

            <div v-if="pipe_step === 1" class="h-100 d-flex flex-column justify-content-center align-items-center">
              <h5 class="text-primary fw-bold mb-4"><i class="fa fa-spider me-2"></i>웹 크롤링: 중고장터에서 '아이폰 14' 정보를 긁어오고 있어요!</h5>
              <div class="d-flex gap-3 mb-4 opacity-50">
                <div v-for="n in 5" :key="n" class="card bg-secondary text-white p-2 text-center shadow slide-up-anim" :style="{animationDelay: n*0.2+'s', width:'100px'}">
                  <i class="fa fa-box mb-1"></i><br>데이터 #{{n}}
                </div>
              </div>
              <div class="progress w-50 bg-dark" style="height: 15px;">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" style="width: 100%;"></div>
              </div>
            </div>

            <div v-else-if="pipe_step === 2" class="h-100 position-relative pt-2">
              <div class="text-center mb-3">
                <h5 class="text-danger fw-bold blink-anim">🚨 AI를 바보로 만드는 '가짜 매물' 2개를 찾아 클릭하세요!</h5>
                <p class="text-light" style="font-size: 0.85rem;">중고폰 가격이 아닌 **케이스**나 **사기 매물**을 학습하면 AI가 시세를 엉터리로 예측하게 됩니다.</p>
              </div>
              <div class="d-flex justify-content-center flex-wrap gap-2 mt-4">
                <div v-for="phone in pipe_phones" :key="'outlier'+phone.id" 
                     class="card bg-white text-dark shadow-sm phone-card transition-all"
                     :class="{'opacity-0 scale-down': phone.removed, 'error-shake border-danger border-2': phone.errorAnim, 'border-primary border-3 wobble-anim': phone.showHint}"
                     style="width: 165px; cursor: pointer;"
                     @click="pipeClickOutlier(phone)">
                  <div class="bg-dark text-center text-white py-1"><i class="fa" :class="phone.icon"></i></div>
                  <div class="card-body p-2 text-start d-flex flex-column justify-content-between">
                    <div class="fw-bold mb-1" style="font-size: 0.8rem; line-height: 1.2; min-height: 38px;">{{ phone.title }}</div>
                    <div class="text-muted" style="font-size: 0.7rem;">배터리: {{ phone.bat }} | {{ phone.cond }}</div>
                    <hr class="my-1">
                    <div class="fw-bold text-primary">{{ phone.price }}</div>
                  </div>
                </div>
              </div>
            </div>

            <div v-else-if="pipe_step === 3" class="h-100 position-relative">
              <h5 class="text-success fw-bold text-center mt-3">데이터 전처리 (수학 나라의 언어로 변신!)</h5>
              <p class="text-light text-center" style="font-size: 0.85rem;">컴퓨터는 'S급', '만원' 같은 글자를 못 읽어요. **숫자와 행렬**로 예쁘게 정리해 줍시다.</p>
              <div class="d-flex justify-content-center flex-wrap gap-3 mt-4">
                <div v-for="phone in pipe_phones.filter(p => !p.removed)" :key="'prep'+phone.id" 
                     class="card shadow text-dark transition-all"
                     :class="pipe_preprocess_level >= 2 ? 'bg-success text-white border-0' : 'bg-light'"
                     style="width: 170px;">
                  <div class="card-body p-2 text-center font-monospace" style="font-size: 0.85rem;">
                    <div :class="pipe_preprocess_level >= 1 ? 'text-warning fw-bold' : ''">[Bat] {{ pipe_preprocess_level >= 1 ? phone.numBat : phone.bat }}</div>
                    <div :class="pipe_preprocess_level >= 2 ? 'text-warning fw-bold' : ''">[Cond] {{ pipe_preprocess_level >= 2 ? phone.vecCond : phone.cond }}</div>
                    <hr class="my-1 border-secondary">
                    <div :class="pipe_preprocess_level >= 1 ? 'text-warning fw-bold' : 'fw-bold'">[Price] {{ pipe_preprocess_level >= 1 ? phone.numPrice : phone.price }}</div>
                  </div>
                </div>
              </div>
              <div class="text-center mt-4" v-if="pipe_preprocess_level > 0">
                <span class="badge bg-warning text-dark fs-6 slide-up-anim">한글과 기호를 떼고 계산하기 편한 숫자로 변신 완료!</span>
              </div>
            </div>

            <div v-else-if="pipe_step === 4" class="h-100 position-relative pt-2">
              <h5 class="text-warning fw-bold text-center mb-3">AI 모델 학습 (최적의 규칙 찾기)</h5>
              <div class="d-flex justify-content-center gap-3 px-3">
                <div class="position-relative bg-dark rounded-2 p-1" style="width: 55%; height: 230px;">
                  <svg width="100%" height="100%" style="border-left: 2px solid #6c757d; border-bottom: 2px solid #6c757d; padding: 10px;">
                    <line x1="20%" y1="80%" x2="20%" :y2="50 + (pipe_epoch*0.3) + '%'" stroke="#dc3545" stroke-width="3" stroke-dasharray="5,5" style="transition: all 0.5s ease;" />
                    <line x1="80%" y1="15%" x2="80%" :y2="50 - (pipe_epoch*0.3) + '%'" stroke="#dc3545" stroke-width="3" stroke-dasharray="5,5" style="transition: all 0.5s ease;" />
                    <line x1="0%" :y1="50 + (pipe_epoch*0.5) + '%'" x2="100%" :y2="50 - (pipe_epoch*0.5) + '%'" stroke="#ffc107" stroke-width="4" style="transition: all 0.5s ease;" />
                    <circle v-for="p in [20,40,60,80]" :key="p" :cx="p+'%'" :cy="(100-p)+'%'" r="7" fill="#0dcaf0" :class="{'pulse-fast': pipe_is_training}" />
                  </svg>
                </div>
                <div class="text-start" style="width: 40%;">
                  <div class="card bg-secondary text-white p-2 mb-2 shadow-sm">
                    <div class="fw-bold text-warning" style="font-size:0.8rem;"><i class="fa fa-star me-1"></i>가중치 (중요도)</div>
                    <div style="font-size: 0.65rem;" class="mt-1">'상태'가 '가격'을 정할 때 얼마나 중요한지 스스로 깨닫는 수치입니다.</div>
                    <div class="fw-bold mt-2 text-end text-warning">W = {{ (0.2 + (pipe_epoch*0.006)).toFixed(2) }}</div>
                  </div>
                  <div class="card bg-secondary text-white p-2 shadow-sm">
                    <div class="fw-bold text-danger" style="font-size:0.8rem;"><i class="fa fa-times me-1"></i>오차율 (틀린 정도)</div>
                    <div style="font-size: 0.65rem;" class="mt-1">AI의 예측이 실제 정답과 얼마나 차이나는지 나타냅니다. 0이 되어야 똑똑해요!</div>
                    <div class="fw-bold mt-2 text-end" :class="pipe_epoch === 100 ? 'text-success' : 'text-danger'">{{ pipe_loss.toFixed(3) }}</div>
                  </div>
                </div>
              </div>
              <div class="text-center mt-3 text-info fw-bold transition-all" :class="{'opacity-0': !pipe_is_training}">
                <i class="fa fa-sync fa-spin me-2"></i> 전체 데이터를 {{ pipe_epoch }}번 반복해서 공부하고 있습니다!
              </div>
            </div>

            <div v-else-if="pipe_step === 5" class="h-100 d-flex flex-column justify-content-center align-items-center">
              <h4 class="text-info fw-bold mb-4">🎉 똑똑한 AI 가격 예측 모델 완성!</h4>
              <div class="d-flex align-items-center gap-4">
                <div v-if="pipe_test_state >= 1" class="card bg-white text-dark p-2 text-center slide-in-left shadow" style="width: 140px;">
                  <div class="badge bg-primary mb-2">새 매물 등장</div>
                  🔋 92% | ✨ A급
                </div>
                <div class="ai-scanner-box bg-dark border border-info rounded-3 p-4" style="width: 180px; height: 180px;">
                  <i class="fa fa-network-wired text-info fs-1" :class="{'pulse-fast': pipe_test_state === 2}"></i>
                  <div v-if="pipe_test_state === 2" class="scanner-laser"></div>
                  <span class="text-white mt-2 d-block" style="font-size: 0.7rem;">AI 시세 스캔 중</span>
                </div>
                <div v-if="pipe_test_state === 3" class="card bg-success text-white p-3 pop-in-anim border-0 shadow-lg">
                  <div style="font-size: 0.8rem;">예측된 적정가는?</div>
                  <h4 class="fw-bold mb-0">58만원</h4>
                </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">
            <span class="badge bg-dark fs-6 font-monospace">STEP 0{{ pipe_step }}</span>
            <div class="d-flex gap-2">
              <button v-if="pipe_step === 0" class="btn btn-primary fw-bold pulse-btn" @click="pipeStart">수집 시작!</button>
              <button v-if="pipe_step === 2" class="btn fw-bold" :class="pipe_outliers_left === 0 ? 'btn-success pulse-btn' : 'btn-dark disabled'" @click="pipeNext(3)">가짜 제거 완료 (다음)</button>
              <button v-if="pipe_step === 3" class="btn fw-bold" :class="pipe_preprocess_level < 2 ? 'btn-warning text-dark pulse-btn' : 'btn-dark disabled'" @click="pipePreprocess">데이터 정리 ({{ pipe_preprocess_level }}/2)</button>
              <button v-if="pipe_step === 3 && pipe_preprocess_level === 2" class="btn btn-success fw-bold" @click="pipeNext(4)">공부방(학습) 이동</button>
              <button v-if="pipe_step === 4" class="btn fw-bold" :class="pipe_epoch < 100 ? 'btn-danger pulse-btn' : 'btn-dark disabled'" @click="pipeTrainBatch">반복해서 공부시키기 (클릭!)</button>
              <button v-if="pipe_step === 4 && pipe_epoch >= 100" class="btn btn-success fw-bold" @click="pipeNext(5)">결과 보러 가기</button>
              <button v-if="pipe_step === 5" class="btn btn-info fw-bold text-dark pulse-btn" @click="pipeTestInfer" :disabled="pipe_test_state > 0">새 매물 가격 맞히기</button>
            </div>
            <button class="btn btn-sm btn-outline-dark text-white" @click="pipeReset"><i class="fa fa-redo"></i> 초기화</button>
          </div>
        </div>
      </section>

      <section>
        <h2 class="text-success fw-bold mb-4">🧑 데이터 탐정 실력 평가 (중등)</h2>
        <div style="height: 500px; overflow-y: auto; padding: 10px;">
          
          <div class="card mb-4 text-left shadow-sm border-success">
            <div class="card-body">
              <h5 class="fw-bold">Q1. AI 햄버거 가게를 만들 때 수집해야 할 데이터로 알맞지 <span class="text-danger">않은</span> 것은?</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_m1 === 1}" @click="ans_m1 = 1">1. 손님들이 남긴 영수증 리뷰</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_m1 === 2}" @click="ans_m1 = 2">2. 햄버거 메뉴별 가격</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-success text-white': ans_m1 === 3}" @click="ans_m1 = 3">3. 사장님의 초등학교 수학 점수</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_m1 === 4}" @click="ans_m1 = 4">4. 하루 방문객 수</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_m1 === 5}" @click="ans_m1 = 5">5. 가장 잘 팔리는 시간대</button>
              </div>
              <div v-if="ans_m1 === 3" class="alert alert-success mt-2 mb-0 fw-bold">🎉 정답! 데이터 수집 단계에서는 목적(가게 매출)과 관련 있는 데이터만 모아야 합니다.</div>
              <div v-if="ans_m1 !== null && ans_m1 !== 3" class="alert alert-danger mt-2 mb-0 fw-bold">❌ 오답입니다. 햄버거를 파는 것과 전혀 상관없는 정보가 하나 있어요.</div>
            </div>
          </div>

          <div class="card mb-4 text-left shadow-sm border-success">
            <div class="card-body">
              <h5 class="fw-bold">Q2. 그래프를 그렸을 때 다른 점들과 너무 멀리 떨어져서 분석을 방해하는 '튀는 값'을 무엇이라고 하나요?</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_m2 === 1}" @click="ans_m2 = 1">1. 평균값</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_m2 === 2}" @click="ans_m2 = 2">2. 결측치</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_m2 === 3}" @click="ans_m2 = 3">3. 중앙값</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_m2 === 4}" @click="ans_m2 = 4">4. 최댓값</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-success text-white': ans_m2 === 5}" @click="ans_m2 = 5">5. 이상치 (Outlier)</button>
              </div>
              <div v-if="ans_m2 === 5" class="alert alert-success mt-2 mb-0 fw-bold">🎉 정답! 정상 범위를 크게 벗어난 값을 '이상치'라고 하며, 반드시 확인 후 지워야 합니다.</div>
              <div v-if="ans_m2 !== null && ans_m2 !== 5" class="alert alert-danger mt-2 mb-0 fw-bold">❌ 오답입니다. 다를 이(異) 자를 쓰는 수학 용어를 떠올려보세요.</div>
            </div>
          </div>

          <div class="card mb-4 text-left shadow-sm border-success">
            <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_m3 === 1}" @click="ans_m3 = 1">1. 컴퓨터를 포맷한다</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-success text-white': ans_m3 === 2}" @click="ans_m3 = 2">2. 빈칸에 평균값이나 0을 채워 넣는다</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_m3 === 3}" @click="ans_m3 = 3">3. 빈칸을 알파벳 'X'로 채운다</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_m3 === 4}" @click="ans_m3 = 4">4. 모니터를 깨끗이 닦는다</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_m3 === 5}" @click="ans_m3 = 5">5. 빈칸이 있는 줄을 100번 복사한다</button>
              </div>
              <div v-if="ans_m3 === 2" class="alert alert-success mt-2 mb-0 fw-bold">🎉 정답! 빈칸(결측치)은 아예 지우거나, 남은 데이터들의 평균값을 채워 넣어야 합니다.</div>
              <div v-if="ans_m3 !== null && ans_m3 !== 2" class="alert alert-danger mt-2 mb-0 fw-bold">❌ 오답입니다. 빈칸을 숫자 데이터로 안전하게 메꾸는 방법이 무엇일까요?</div>
            </div>
          </div>

          <div class="card mb-4 text-left shadow-sm border-success">
            <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-danger text-white': ans_m4 === 1}" @click="ans_m4 = 1">1. 기계세탁</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_m4 === 2}" @click="ans_m4 = 2">2. 기계조립</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-success text-white': ans_m4 === 3}" @click="ans_m4 = 3">3. 머신러닝 (기계학습)</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_m4 === 4}" @click="ans_m4 = 4">4. 기계번역</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_m4 === 5}" @click="ans_m4 = 5">5. 기계체조</button>
              </div>
              <div v-if="ans_m4 === 3" class="alert alert-success mt-2 mb-0 fw-bold">🎉 정답! 기계(Machine)가 스스로 학습(Learning)한다는 뜻의 머신러닝입니다.</div>
              <div v-if="ans_m4 !== null && ans_m4 !== 3" class="alert alert-danger mt-2 mb-0 fw-bold">❌ 오답입니다. 컴퓨터가 공부를 한다는 의미의 영어 단어 조합을 생각해보세요!</div>
            </div>
          </div>

          <div class="card mb-4 text-left shadow-sm border-success">
            <div class="card-body">
              <h5 class="fw-bold">Q5. 학습을 마친 AI 모델을 실생활에 적용(활용)한 예시가 <span class="text-danger">아닌</span> 것은?</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_m5 === 1}" @click="ans_m5 = 1">1. 자율주행 자동차가 보행자를 인식함</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_m5 === 2}" @click="ans_m5 = 2">2. 넷플릭스가 영화를 추천함</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_m5 === 3}" @click="ans_m5 = 3">3. 스마트폰이 내 얼굴을 알아봄</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_m5 === 4}" @click="ans_m5 = 4">4. 기상청 AI가 내일 날씨를 맞춤</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-success text-white': ans_m5 === 5}" @click="ans_m5 = 5">5. 건전지를 넣으면 켜지는 손전등</button>
              </div>
              <div v-if="ans_m5 === 5" class="alert alert-success mt-2 mb-0 fw-bold">🎉 정답! 손전등은 인공지능이 아니라 단순한 전기 회로 장치입니다.</div>
              <div v-if="ans_m5 !== null && ans_m5 !== 5" class="alert alert-danger mt-2 mb-0 fw-bold">❌ 오답입니다. 스스로 생각하고 판단하지 않는 물건을 골라보세요.</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>⚖️ 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>
          차는 현재 엄청 빠른 속도로 달리고 있습니다.<br><br>
          <b>[선택 A]</b> 그대로 직진! (무단 횡단하는 <b>보행자 5명 다침</b>)<br>
          <b>[선택 B]</b> 운전대를 꺾어서 벽에 쾅! (이 차에 타고 있는 <b>운전자 1명 다침</b>)<br>
          <b>[선택 C]</b> 운전대를 꺾어 인도로 돌진! (신호를 잘 지키던 <b>무고한 사람 1명 다침</b>)
        </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" style="font-size: 0.8rem;">* 서울시립과학관 사이트로 이동해서 직접 게임처럼 선택을 해보세요!</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 {
      // 🌟 [추가] 1차시 복습 OX 퀴즈 상태 변수
      ans_ox1: null, 
      ans_ox2: null, 
      ans_ox3: null,

      // 🌟 [추가] 1차시 민초청국장 선호도 점수 변수
      mincho_score: null,

      // 🌟 [추가] 심화 미션 (위기의 가게 + 데이터과학자) 상태 변수
      ans_mission4: null,
      ans_step1: null,
      ans_step2: null,
      ans_step3: null,

      // 중등용 퀴즈 상태 (1~5번)
      ans_m1: null, ans_m2: null, ans_m3: null, ans_m4: null, ans_m5: null,
      
      // === AI 파이프라인 게임 변수 ===
      //  첫번째 게임
      m_chef_status: 'crazy',
      m_spy_count: 2,
      m_memory_data: [],

      //  두번째 게임
      pipe_step: 0, 
      pipe_phones: [], 
      pipe_outliers_left: 2, 
      pipe_preprocess_level: 0,
      pipe_epoch: 0, 
      pipe_loss: 2.500, 
      pipe_test_state: 0, 
      pipe_is_training: false,
      pipe_feedback_msg: "", 
      pipe_feedback_type: "",

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

      // 프롬프트 마법 기계 변수
      pr_loading: false,
      pr_result_type: null, // 'bad' or 'good'
      pr_current_result: null, // 현재 뽑힌 랜덤 객체
      pr_status: "Ready",
      pr_mode: "Waiting",
      pr_attempts: 0,
      
      // 나쁜 예시 21가지 (대충 말했을 때)
      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가 허세에 잔뜩 찌들었습니다!" }
      ],
      
      // 좋은 예시 21가지 (조건 맞춰서 잘 말했을 때)
      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 인스턴스가 초기화되지 않았습니다.");
      }
    },

    //  첫번째 게임
    m_initChefGame() {
      this.m_chef_status = 'crazy';
      this.m_spy_count = 2;
      const dataPool = [
        { id: 1, name: "평범한 동네가", val: "5,500원", desc: "주변 매장 평균가", isSpy: false, removed: false },
        { id: 2, name: "할인 행사 가격", val: "4,500원", desc: "오픈 기념 세일가", isSpy: false, removed: false },
        { id: 3, name: "프리미엄 가격", val: "7,000원", desc: "차별화된 비싼 가격", isSpy: false, removed: false },
        { id: 4, name: "직원 실수(오타)", val: "500,000원", desc: "0을 두 번 더 누름!", isSpy: true, removed: false },
        { id: 5, name: "센서 고장 오류", val: "-9,999원", desc: "시스템 수치 오류", isSpy: true, removed: false }
      ];
      // 매번 순서를 섞어서 학생들이 외우지 못하게 함
      this.m_memory_data = dataPool.sort(() => Math.random() - 0.5);
    },
    m_cleanData(data) {
      if (data.removed) return;
      if (data.isSpy) {
        data.removed = true;
        this.m_spy_count--;
        if (this.m_spy_count === 0) {
          this.m_chef_status = 'smart';
        }
      } else {
        // 정상 데이터를 클릭하면 빨간색으로 깜빡이며 경고
        alert("잠깐! 이건 멀쩡한 가격 데이터예요. 지우면 AI가 공부할 자료가 부족해집니다!");
      }
    },
    m_resetChefGame() {
      this.m_initChefGame();
    },

    //  두번째 게임
    pipeStart() {
      this.pipe_step = 1; this.pipe_epoch = 0; this.pipe_loss = 2.5; this.pipe_outliers_left = 2;
      this.pipe_preprocess_level = 0; this.pipe_test_state = 0; this.pipe_feedback_msg = "";
      const normals = [
        { title: '아이폰 14 실버 (A급)', icon: 'fa-mobile-alt', bat: '88%', numBat: 0.88, cond: 'A급', vecCond: '[0,1,0]', price: '45만원', numPrice: 45, isOutlier: false },
        { title: '아이폰 14 프로 (S급)', icon: 'fa-mobile-alt', bat: '100%', numBat: 1.00, cond: 'S급', vecCond: '[1,0,0]', price: '80만원', numPrice: 80, isOutlier: false },
        { title: '아이폰 14 블랙 (B급)', icon: 'fa-mobile-alt', bat: '82%', numBat: 0.82, cond: 'B급', vecCond: '[0,0,1]', price: '35만원', numPrice: 35, isOutlier: false }
      ];
      const outliers = [
        { title: '아이폰 14 투명 케이스', icon: 'fa-box', bat: '-', numBat: 0, cond: '새것', vecCond: '[1,0,0]', price: '5천원', numPrice: 0.5, isOutlier: true, hint: '케이스 가격을 스마트폰 시세로<br>공부하면 AI가 바보가 돼요!' },
        { title: '선입금 급처 (사기주의)', icon: 'fa-exclamation-triangle', bat: '100%', numBat: 1.00, cond: 'S급', vecCond: '[1,0,0]', price: '5만원', numPrice: 5, isOutlier: true, hint: '너무 싼 사기 매물은<br>데이터의 논리적 오류예요.' }
      ];
      this.pipe_phones = [...normals, ...outliers].sort(() => 0.5 - Math.random());
      this.pipe_phones.forEach((p, i) => { p.id = i+1; p.removed = false; p.errorAnim = false; p.showHint = false; });
      setTimeout(() => { this.pipe_step = 2; }, 2000);
    },
    showPipeFeedback(type, msg) {
      this.pipe_feedback_type = type; this.pipe_feedback_msg = msg;
      if (this.feedbackTimer) clearTimeout(this.feedbackTimer);
      this.feedbackTimer = setTimeout(() => { this.pipe_feedback_msg = ""; }, 2500);
    },
    pipeClickOutlier(phone) {
      if (this.pipe_step !== 2) return;
      if (phone.isOutlier && !phone.removed) {
        this.showPipeFeedback('success', phone.hint); phone.removed = true; this.pipe_outliers_left--;
      } else if (!phone.isOutlier) {
        phone.errorAnim = true; setTimeout(() => phone.errorAnim = false, 500);
        this.showPipeFeedback('error', "이건 정상 매물이에요!<br>공부시켜야 할 데이터입니다.");
        this.pipe_phones.forEach(p => { if (p.isOutlier && !p.removed) { p.showHint = true; setTimeout(() => p.showHint = false, 2000); } });
      }
    },
    pipePreprocess() { if (this.pipe_preprocess_level < 2) this.pipe_preprocess_level++; },
    pipeTrainBatch() {
      if (this.pipe_step !== 4 || this.pipe_epoch >= 100) return;
      this.pipe_is_training = true; this.pipe_epoch += 25;
      this.pipe_loss = 2.5 * Math.pow(0.5, this.pipe_epoch / 25);
      if (this.pipe_epoch >= 100) { this.pipe_epoch = 100; this.pipe_loss = 0.042; }
      setTimeout(() => { this.pipe_is_training = false; }, 600);
    },
    pipeNext(s) { this.pipe_step = s; },
    pipeTestInfer() {
      this.pipe_test_state = 1; 
      setTimeout(() => { this.pipe_test_state = 2; setTimeout(() => { this.pipe_test_state = 3; }, 2000); }, 1000);
    },
    pipeReset() { this.pipe_step = 0; },


    // 프롬프트 마법 기계 실행 함수
    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++;

      // AI가 생각하는 척 1.5초 딜레이 후 랜덤 데이터 뽑기
      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(); // 인스턴스의 layout() 호출
      });
    },
    toggleAnomaly(index) {
      this.showAnomaly[index] = !this.showAnomaly[index];
      this.$nextTick(() => { 
        if (this.deck) this.deck.layout(); // 인스턴스의 layout() 호출
      });
    },
    toggleMission(index) {
      this.showMission[index] = !this.showMission[index];
      this.$nextTick(() => { 
        if (this.deck) this.deck.layout(); // 인스턴스의 layout() 호출
      });
    },
    togglePivot(index) {
      this.showPivot[index] = !this.showPivot[index];
      this.$nextTick(() => { 
        if (this.deck) this.deck.layout(); // 인스턴스의 layout() 호출
      });
    },
    toggleSensor(index) {
      this.showSensor[index] = !this.showSensor[index];
      this.$nextTick(() => { 
        if (this.deck) this.deck.layout(); // 인스턴스의 layout() 호출
      });
    },
    toggleCrash(index) {
      this.showCrash[index] = !this.showCrash[index];
      this.$nextTick(() => { 
        if (this.deck) this.deck.layout(); // 인스턴스의 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');
      
      // 배달 지연, 좁은 공간, 비싼 배달비 등 의도된 '함정' 키워드들이 많이 노출되도록 작성된 100개의 리뷰
      const reviewList = [
        "배달이 너무 늦어요. 1시간이나 기다렸습니다.", "배달 떡볶이가 다 식어서 왔어요.", "가게가 너무 좁아요. 먹기 불편함.",
        "기다리다가 지쳐서 그냥 갑니다. 가게가 좁아요.", "배달비가 너무 비싸요. 떡볶이값보다 배달비가 더 나옴.", "배달 늦어요.",
        "맛은 있는데 배달이 너무 늦어요.", "가게 테이블이 4개밖에 없어서 한참 밖에서 기다렸어요. 좁아요.", "비싸요. 배달비 좀 내려주세요.",
        "알바생 형이 바빠서 그런지 불친절해요.", "떡이 덜 익었어요. 배달도 늦고요.", "가게가 너무 좁아요 옆 사람과 부딪힘.",
        "치즈가 다 굳어서 왔어요. 배달 늦어요.", "배달비 비싸요.", "매장이 너무 좁아요.", "배달 늦어요.",
        "진짜 너무 늦어요. 배고파 죽는 줄.", "양은 많은데 매장이 좁아요.", "배달 늦어요 배달 늦어요.", "배달비가 너무너무 비싸요.",
        "맛있어요! 근데 좁아요.", "알바생 누나가 친절해요.", "가게가 너무너무 좁아요.", "배달이 늦어요 식었어요.",
        "비싸요.", "배달이 늦어요.", "좁아요.", "좁아요 대기가 길어요.", "대기 시간이 너무 길어요. 좁아요.",
        "치즈 떡볶이 맛있어요! 하지만 배달이 늦어요.", "배달비 비싸요.", "가게가 좁아요.", "식어서 왔어요.", "배달 늦어요.",
        "늦어요.", "좁아요.", "배달이 너무 늦어요 식었어요.", "테이블이 없어서 서서 기다림. 좁아요.", "배달비가 너무 비싸요.",
        "최악의 배달 속도. 늦어요.", "가게가 좁아요.", "맛있어요.", "맛있어요.", "비싸요.", "배달이 늦어요.",
        "배달비 비싸요.", "가게가 좁아요.", "식었어요 늦어요.", "매장이 좁아요.", "친절해요.", "떡볶이 최고! 근데 좁아요.",
        "배달이 늦어요.", "배달비 비싸요.", "좁아요.", "너무 좁아요.", "식었어요.", "늦어요.", "배달비 비싸요.", "가게 좁아요.",
        "늦어요.", "배달 늦어요.", "비싸요 배달비.", "좁아요.", "대기 시간이 길어요 좁아요.", "식었어요.", "늦어요 늦어요.",
        "배달비가 비싸요.", "가게가 좁아요.", "맛있어요.", "친절해요.", "알바생 불친절해요.", "좁아요.", "늦어요.", "식었어요.",
        "배달이 너무 늦어요.", "배달비 비싸요.", "가게가 좁아요.", "좁아요.", "비싸요.", "늦어요.", "식었어요.", "대기 길어요.",
        "배달 늦어요.", "배달비 비싸요.", "좁아요.", "너무 좁아요.", "맛있어요.", "늦어요.", "식었어요.", "비싸요.", "좁아요.",
        "배달이 늦어요.", "배달비 너무 비싸요.", "가게가 좁아요.", "좁아요.", "늦어요.", "식었어요.", "비싸요.", "대기가 길어요 좁아요."
      ];
      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("복사에 실패했습니다. 브라우저 설정을 확인해 주세요.");
      }
    },

    // 엑셀 다운로드를 위한 SheetJS 준비
    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);
      });
    },

    // 거북이 떡볶이 비밀 장부 다운로드 (가상 데이터 50줄)
    async downloadData(type) {
      const headers = ["번호(ID)", "날짜", "최고기온(℃)", "방문객수(명)", "총매출액(원)", "배달비(원)", "순이익(원)", "비고"];
      
      const dataRows = [
        "1,2026-05-01,22,140,480000,30000,200000,정상",
        "2,2026-05-02,24,155,510000,40000,220000,정상",
        "3,2026-05-03,26,160,540000,45000,230000,정상",
        "4,2026-05-04,25,145,500000,35000,210000,정상",
        "5,2026-05-05,24,150,50000000,30000,49000000,오타", // Trap 1
        "6,2026-05-06,23,130,450000,20000,190000,정상",
        "7,2026-05-07,24,135,470000,25000,200000,정상",
        "8,2026-05-08,28,180,600000,50000,280000,정상",
        "9,2026-05-09,29,300,0,0,-150000,고장", // Trap 2 (인터넷 장애)
        "10,2026-05-10,27,165,550000,40000,240000,정상",
        "11,2026-05-11,25,140,490000,35000,210000,정상",
        "12,2026-05-12,23,130,450000,25000,190000,정상",
        "13,2026-05-13,22,125,430000,20000,180000,정상",
        "14,2026-05-14,26,1000,3500000,300000,2000000,가짜손님", // Trap 4 (테이블 부족)
        "15,2026-05-15,28,170,580000,55000,260000,정상",
        "16,2026-05-16,30,190,650000,60000,300000,정상",
        "17,2026-05-17,27,150,500000,35000,220000,정상",
        "18,2026-05-18,25,145,480000,30000,200000,정상",
        "19,2026-05-19,100,140,470000,25000,190000,센서오류", // Trap 3 (기온 100도)
        "20,2026-05-20,26,155,520000,40000,230000,정상",
        "21,2026-05-21,28,160,550000,45000,240000,정상",
        "22,2026-05-22,29,170,580000,50000,260000,정상",
        "23,2026-05-23,28,250,900000,600000,50000,배달비폭탄", // Trap 5
        "24,2026-05-24,25,135,460000,25000,190000,정상",
        "25,2026-05-25,24,130,440000,20000,180000,정상",
        "26,2026-05-26,25,145,500000,35000,210000,정상",
        "27,2026-05-27,27,150,520000,40000,230000,정상",
        "28,2026-05-28,29,165,560000,45000,250000,정상",
        "29,2026-05-29,30,20,70000,5000,-100000,옆집반값", // Trap 6
        "30,2026-05-30,28,155,530000,40000,240000,정상",
        "31,2026-05-31,26,145,490000,35000,210000,정상",
        "32,2026-06-01,25,150,50000000,30000,49000000,오타2", // Trap 1
        "33,2026-06-02,27,160,540000,45000,240000,정상",
        "34,2026-06-03,28,170,580000,50000,260000,정상",
        "35,2026-06-04,26,140,480000,35000,200000,정상",
        "36,2026-06-05,24,130,450000,25000,190000,정상",
        "37,2026-06-06,23,125,430000,20000,180000,정상",
        "38,2026-06-07,-40,120,400000,15000,160000,센서오류2", // Trap 3 (-40도)
        "39,2026-06-08,26,150,510000,35000,220000,정상",
        "40,2026-06-09,28,165,560000,45000,250000,정상",
        "41,2026-06-10,27,280,0,0,-150000,고장2", // Trap 2
        "42,2026-06-11,25,145,490000,30000,210000,정상",
        "43,2026-06-12,24,135,460000,25000,190000,정상",
        "44,2026-06-13,26,155,530000,40000,240000,정상",
        "45,2026-06-14,29,1200,4200000,400000,2500000,가짜손님2", // Trap 4
        "46,2026-06-15,30,180,620000,55000,280000,정상",
        "47,2026-06-16,28,160,550000,45000,240000,정상",
        "48,2026-06-17,29,280,1100000,750000,40000,배달비폭탄2", // Trap 5
        "49,2026-06-18,27,150,510000,35000,220000,정상",
        "50,2026-06-19,28,15,50000,5000,-120000,옆집반값2" // Trap 6
      ];
      
      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, "가게비밀장부");
          XLSX.writeFile(wb, "거북이떡볶이_비밀장부.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", "거북이떡볶이_비밀장부.csv");
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    }
  },
  mounted() {
    // ✅ 3. ref로 지정한 DOM 엘리먼트를 넘겨주고, 인스턴스를 this.deck에 저장합니다.
    this.deck = initializeReveal(this.$refs.revealRef, false);

    // ✅ 4. 전역 Reveal.addEventListener 대신 인스턴스의 on 메서드 사용
    this.deck.on('slidechanged', (event) => {
      console.log("Slide is now " + event.indexh);
    });

    this.m_initChefGame(); // 페이지 로드 시 게임 초기화

  },
  unmounted() {
        // ✅ 5. 여기가 핵심! 페이지를 벗어날 때 Reveal 객체를 메모리에서 완전히 파괴합니다.
        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; }


/* 중등 게임 전용: 로봇이 제정신이 아닐 때 떠는 애니메이션 */
/* 첫번째 게임 */
/* --- [중등 AI 사장님 게임] 전용 고유 스타일 --- */

/* 1. 로봇이 미쳤을 때 부르르 떠는 효과 */
.chef-robot-vibrate {
  animation: chef-vibrate-kf 0.2s infinite;
}
@keyframes chef-vibrate-kf {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  25% { transform: translate(-1px, -2px) rotate(-1deg); }
  50% { transform: translate(-3px, 0px) rotate(1deg); }
  100% { transform: translate(1px, -1px) rotate(-1deg); }
}

/* 2. 말풍선 디자인 (꼬리 포함) */
.chef-bubble {
  position: relative;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}
.chef-bubble::after {
  content: '';
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  border-right: 15px solid white;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* 3. 데이터 카드 호버 및 클릭 효과 */
.chef-data-chip {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.chef-data-chip:hover:not(.chef-removed) {
  transform: translateY(-5px);
  background-color: #f8f9fa !important;
}

/* 4. 데이터 삭제 효과 (기존 .scale-down과 이름 충돌 방지) */
.chef-removed {
  transform: scale(0); /* 아예 사라짐 */
  opacity: 0 !important;
  pointer-events: none;
}


/* 두번째 게임 */
.m-shake-anim {
  animation: m-shake 0.2s infinite;
}
@keyframes m-shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  25% { transform: translate(-1px, -2px) rotate(-1deg); }
  50% { transform: translate(-3px, 0px) rotate(1deg); }
  75% { transform: translate(3px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -1px) rotate(-1deg); }
}

/* 말풍선 디자인 */
.m-speech-bubble {
  position: relative;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}
.m-speech-bubble::after {
  content: '';
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  border-right: 15px solid white;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* 데이터 칩 호버 효과 */
.m-data-chip {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.m-data-chip:hover {
  transform: translateY(-5px);
  background-color: #f8f9fa !important;
}

/* 제거될 때 작아지면서 사라지는 효과 */
.scale-down {
  transform: scale(0);
}

/* --- 공통 애니메이션 및 상태 효과 --- */
.transition-all { transition: all 0.5s ease; }
.opacity-0 { opacity: 0 !important; pointer-events: none; }
.scale-down { transform: scale(0.1); }

/* 버튼이 둥둥 떠다니는 효과 */
.pulse-btn { animation: btn-pulse 1.5s infinite; }
@keyframes btn-pulse { 
  0% { transform: scale(1); } 
  50% { transform: scale(1.05); } 
  100% { transform: scale(1); } 
}

/* 경고 텍스트 깜빡임 */
.blink-anim { animation: blinker 1s linear infinite; }
@keyframes blinker { 50% { opacity: 0.3; } }

/* 틀렸을 때 카드가 덜덜 떨리는 효과 */
.error-shake { animation: errorShake 0.4s both; }
@keyframes errorShake { 
  10%, 90% { transform: translate3d(-2px, 0, 0); } 
  30%, 70% { transform: translate3d(-4px, 0, 0); } 
}

/* 학습 중 데이터 점들이 반짝이는 효과 (추가됨) */
.pulse-fast { animation: pulseFast 0.4s infinite alternate; }
@keyframes pulseFast {
  from { r: 7; fill-opacity: 1; }
  to { r: 10; fill-opacity: 0.5; }
}

/* 5단계: AI 스캐너 레이저 애니메이션 */
.ai-scanner-box { 
  overflow: hidden; 
  position: relative; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
.scanner-laser { 
  position: absolute; 
  width: 100%; 
  height: 4px; 
  background: rgba(0, 255, 255, 0.8); 
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
  animation: scanLaser 1.5s infinite; 
}
@keyframes scanLaser { 0% { top: 0; } 100% { top: 100%; } }

/* 결과가 짠! 하고 나타나는 효과 */
.pop-in-anim { animation: popIn 0.5s forwards; }
@keyframes popIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* 전처리 카드 슬라이드 업 효과 */
.slide-up-anim { animation: slideUp 0.5s ease-out forwards; }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }


/* AI 프롬프트 */
/* --- 프롬프트 마법 기계 애니메이션 --- */

/* 기계 톱니바퀴 회전 */
.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>