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

      <section>
        <h4>🚗 AI 창업 시뮬레이션 통합 과정</h4>
        <table class="table caption-top table-bordered card-1 p-4 shadow-sm" style="font-size: 0.7rem;">
          <caption class="mb-2" style="font-size: 0.6rem;">중학교 3학년 ~ 고등학교 3학년 심화 대상 (각 차시 90분)</caption>
          <thead class="table-light text-center">
            <tr>
              <th width="10%">구분</th>
              <th width="15%">교시</th>
              <th width="55%">학습 주제</th>
              <th width="10%">소요시간</th>
              <th width="10%">Action</th>
            </tr>
          </thead>
          <tbody>
            <tr class="table-dark text-white">
              <td class="align-middle text-center fw-bold">Prologue</td>
              <td class="align-middle text-center">오프닝</td>
              <td><div class="p-2 fw-bold text-warning">🪄 AI 프롬프트 마법 기계 (우리는 왜 질문을 잘해야 할까?)</div></td>
              <td class="align-middle text-center">10분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-warning" @click="goSlide(29)" style="cursor:pointer"></i></td>
            </tr>
            
            <tr class="table-info">
              <td rowspan="4" class="align-middle text-center fw-bold">1차시<br>(AI 디자인)</td>
              <td class="align-middle text-center">1교시</td>
              <td><div class="p-2 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="p-2 fw-bold">Round 1~3: 프롬프트 네고시에이션 (Trap)</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="p-2 fw-bold">바이브 코딩: 수치로 통제하는 로고 시스템 (코드 실습)</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="p-2 fw-bold">바이브 코딩: 텍스트와 좌표로 짓는 간판 시스템 (코드 실습)</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="6" class="align-middle text-center fw-bold">2차시<br>(데이터 분석)</td>
              <td class="align-middle text-center">1교시</td>
              <td><div class="p-2 fw-bold">1차시 복습 및 민초청국장 선호도 & Feature 정의</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(8)" style="cursor:pointer"></i></td>
            </tr>
            <tr>  
              <td class="align-middle text-center">1교시</td>
              <td><div class="p-2 fw-bold">오픈 6개월 차의 위기 & 장부 다운로드</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(11)" style="cursor:pointer"></i></td>
            </tr>
            <tr>
              <td class="align-middle text-center">1교시</td>
              <td><div class="p-2 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(12)" style="cursor:pointer"></i></td>
            </tr>
            <tr>
              <td class="align-middle text-center">2교시</td>
              <td><div class="p-2 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(14)" style="cursor:pointer"></i></td>
            </tr>
            <tr>
              <td class="align-middle text-center">2교시</td>
              <td><div class="p-2 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(16)" style="cursor:pointer"></i></td>
            </tr>
            <tr class="border-bottom-bold">
              <td class="align-middle text-center">2교시</td>
              <td><div class="p-2 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(17)" style="cursor:pointer"></i></td>
            </tr>
            
            <tr class="table-light">
              <td class="align-middle text-center fw-bold text-muted">보충</td>
              <td class="align-middle text-center">-</td>
              <td><div class="p-2 text-muted italic">심화 영상: 데이터 '피처(Feature)'의 중요성</div></td>
              <td class="align-middle text-center">10분</td>
              <td class="align-middle text-center"><i class="fa fa-play-circle text-secondary" @click="goSlide(18)" 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="p-2 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(23)" style="cursor:pointer"></i></td>
            </tr>
            <tr>
              <td class="align-middle text-center">1교시</td>
              <td><div class="p-2 fw-bold">자율주행차는 어떻게 달릴까? (3대 요소)</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(24)" style="cursor:pointer"></i></td>
            </tr>
            <tr>
              <td class="align-middle text-center">1교시</td>
              <td><div class="p-2 fw-bold">NTSB 사고 조사반: 기계는 왜 속았을까?</div></td>
              <td class="align-middle text-center">10분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-warning" @click="goSlide(27)" style="cursor:pointer"></i></td>
            </tr>
            <tr>
              <td class="align-middle text-center">2교시</td>
              <td><div class="p-2 fw-bold">AI 윤리 딜레마: 트롤리 딜레마 시뮬레이터</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(28)" style="cursor:pointer"></i></td>
            </tr>
            <tr class="border-bottom-bold">
              <td class="align-middle text-center">2교시</td>
              <td><div class="p-2 fw-bold">CEO 윤리 선언: 우리 회사의 자율주행 알고리즘 제정</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(29)" 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> 월 순수익(Net Profit) 딱 <b>1,000만 원</b></div>
            <div>📐 <b>매장 규모:</b> <b>35~40평</b> 내외</div>
            <div>🪑 <b>홀 좌석:</b> <b>4인 테이블 딱 6개</b> (최대 24명 수용)</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">❌ Bad 예시 1: 강남 감성 카페</div>
              <div class="card-body" style="font-size: 0.8rem;">
                <p class="fst-italic">"강남역 가로수길에 35평 감성 카페를 차릴 거야. 조건대로 4인 테이블은 딱 6개야. 아메리카노는 3,000원에 팔게. 알바생 1명만 쓰고, 월 순수익 1천만 원이 남는 사업 계획서와 하루 목표 판매량을 짜줘."</p>
                <hr class="my-1">
                <p class="text-danger fw-bold mb-0">👉 AI의 거짓말: 테이블 6개로 순수익 1천을 내려면, 손님이 10분 만에 마시고 나간다는 기적의 회전율을 계산해 줄 것입니다.</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">❌ Bad 예시 2: 이천시 식당/밀키트</div>
              <div class="card-body" style="font-size: 0.8rem;">
                <p class="fst-italic">"이천시 관고동에 40평 음식점을 열 거야. 테이블은 6개. 15,000원짜리 세트를 팔 건데, 테이블이 다 차면 나머진 배달로 넘길게. 재료비 50% 빼면 나머진 다 내 돈이지? 월 순수익 1,000만 원 달성 계획 세워줘."</p>
                <hr class="my-1">
                <p class="text-danger fw-bold mb-0">👉 간과한 것: 배달 수수료 30%, 식자재 폐기율, 이천시 구인난으로 인한 높은 인건비 누락.</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 d-flex justify-content-between align-items-center" @click="togglePromptHint" style="cursor: pointer;">
            <span>📝 Action: 막막하다면? AI 프롬프트 6가지 필수 조건 열어보기</span>
            <span style="font-size: 1.2rem; transition: transform 0.3s;" :style="{ transform: showPromptHint ? 'rotate(180deg)' : 'rotate(0deg)' }">🔻</span>
          </div>
          
          <div v-if="showPromptHint" 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가지 조건과 [절대 규칙]을 결합하여, AI에게 첫 사업 계획서를 요구하는 프롬프트를 작성하세요!
            </p>
          </div>
        </div>
      </section>

      <section>
        <h2>🥊 프롬프트 네고시에이션: Round 1</h2>
        <p>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">Trap 1. 숨겨진 인건비의 늪</span>
                <span style="font-size: 1.2rem; transition: transform 0.3s;" :style="{ transform: showTrap[0] ? 'rotate(180deg)' : 'rotate(0deg)' }">⬇️</span>
              </div>
              <div v-if="showTrap[0]" class="mt-2 text-muted" style="font-size: 0.9rem;">
                시급 1만 원? 주 15시간 이상 일하면 <b>'주휴수당'</b>과 <b>'4대 보험료(10%)'</b>를 내야 합니다. 실질 시급은 12,000원이 넘습니다. (특히 이천시나 지방은 알바생 구하기가 힘들어 시급을 더 높여야 합니다.)
                <br><strong class="text-danger">👉 AI에게 "주휴수당과 4대 보험을 반영해서 인건비를 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">Trap 2. 식자재 폐기율(Loss)의 배신</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>15~20%의 식자재 폐기율</b>이 발생합니다.
                <br><strong class="text-danger">👉 AI에게 "모든 식자재 원가에 폐기율 20%를 추가 비용으로 잡고 단가를 다시 설정해!"라고 압박하세요.</strong>
              </div>
            </li>
          </ul>
        </div>
      </section>

      <section>
        <h2>🥊 프롬프트 네고시에이션: Round 2</h2>
        <p>아직 목표수익 1,000만 원인가요? 공통 조건이었던 '테이블 6개'의 무서움을 보여드리죠.</p>

        <div class="card text-left mt-3">
          <div class="card-header bg-dark text-white fw-bold">🚨 2차 방어전: 공간의 한계 (테이블 6개의 저주)</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">Trap 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;">
                <b>테이블이 딱 6개뿐입니다.</b> 만약 4인 테이블에 손님 1명이 앉아 노트북을 3시간 쓴다면? 피크 타임에 남은 테이블은 4~5개뿐입니다. AI는 좌석 점유율 100%라는 거짓말을 하고 있습니다.
                <br><strong class="text-danger">👉 AI에게 "좌석 점유율을 최대 40%로 낮추고 매출을 보완할 '객단가 인상' 혹은 '테이크아웃 전문 메뉴' 전략을 세워봐!"라고 압박하세요.</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">Trap 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;">
                일반 대도시 35평 이상 월세는 250~400만 원입니다. 대형 냉/난방기와 업소용 냉장고를 돌리면 <b>전기세 누진세</b>로 한 달 수도광열비만 100만 원 이상 나옵니다.
                <br><strong class="text-danger">👉 AI에게 "우리 지역 대형 평수 현실 월세(000만 원)와 수도광열비 120만 원을 고정비로 추가 차감해!"라고 명령하세요.</strong>
              </div>
            </li>
          </ul>
        </div>
      </section>

      <section>
        <h2>🥊 프롬프트 네고시에이션: 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">Trap 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;">
                홀(테이블 6개) 매출로 부족해서 배달을 켰나요? 중개 수수료, 배달비, 포장비를 떼면 2만 원짜리 팔아도 내 손엔 1만 원 남짓입니다.
                <br><strong class="text-danger">👉 AI에게 "배달 매출의 40%를 제하고 순수익 1천만 원이 아직도 유지되는지 검증해!"라고 명령하세요.</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">Trap 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;">
                우리 가게 바로 맞은편에 아메리카노 1,500원짜리 메가커피나 24시간 초저가 할인 매장이 들어왔습니다!
                <br><strong class="text-danger">👉 AI에게 "가격 경쟁 대신 객단가를 방어할 '세트 메뉴'나 우리만의 '공간 서비스'를 기획서에 추가해서 최종본을 내놔!"라고 지시하세요.</strong>
              </div>
            </li>
          </ul>
        </div>
      </section>

      <section>
        <h2>🎨 2차시: 바이브 코딩 (디자인 시스템)</h2>
        <p>사업 계획을 세웠다면, 이제 AI에게 수치와 변수(Variable)를 명령하여 내 브랜드 로고를 설계합니다.</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;">"그냥 예쁘게 그려줘"라는 애매한 언어 대신, <b>"반지름(radius)은 50, 선 굵기(pensize)는 3, 30도씩 회전시켜 12번 반복해"</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. 다음 슬라이드의 코드 예시들을 복사하세요.<br>
                2. 왼쪽 <b>Trinket 에디터</b>에 붙여넣고 재생(▶)을 누르세요.<br>
                3. 색상(Hex), 반복 횟수(range), 각도를 내 브랜드에 맞게 수정하며 AI에게 명령해 보세요.
              </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>Type 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(2)

for i in range(12): # 12번 반복
  t.color("#8B4513") # 커피 브라운 색상
  t.circle(50)       # 반지름 50인 원
  t.left(30)         # 30도씩 회전 (360/12)
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>Type 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 = ["#00CED1", "#4682B4"] # 청록색 계열
for i in range(36):
  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>Type 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 = ['#FF5733', '#FFC300', '#DAF7A6'] 
for i in range(50):
  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>Type 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("#fdf5e6")  # 부드러운 크림색 배경

  t = turtle.Turtle()
  t.speed(0)  # 가장 빠른 속도
  t.hideturtle()  # 터틀 숨기기

  # 간판 테두리 그리기
  t.penup()
  t.goto(-250, 150)
  t.pendown()
  t.color("#a0522d")  # 갈색
  t.pensize(5)
          
  for _ in range(2):
    t.forward(500)
    t.right(90)
    t.forward(300)
    t.right(90)
              
  # 간판 안쪽 색상 채우기
  t.penup()
  t.goto(-245, 145)
  t.pendown()
  t.begin_fill()
  t.color("#fcfcfc")  # 깨끗한 흰색
  for _ in range(2):
    t.forward(490)
    t.right(90)
    t.forward(290)
    t.right(90)
  t.end_fill()

  # --- 가게 이름 (메인 텍스트) ---
  t.penup()
  t.goto(0, 50)
  t.color("black")
  t.write("터틀 커피", align="center", font=("Malgun Gothic", 40, "bold"))

  t.goto(0, 0)
  t.color("#8b4513")  # 진한 갈색
  t.write("TURTLE COFFEE", align="center", font=("Arial", 25, "bold"))

  # --- 슬로건 (서브 텍스트) ---
  t.goto(0, -40)
  t.color("#696969")  # 회색
  t.write("느림의 미학, 따뜻한 한 잔", align="center", font=("Malgun Gothic", 12, "normal"))

  # --- 아이콘 그리기 ---
  # 1. 터틀 아이콘
  t.penup()
  t.goto(-180, 80)
  t.pendown()
  t.color("#228b22")  # 초록색 (거북이 등껍질)
  t.pensize(2)
  t.begin_fill()
  t.circle(20)  # 등껍질
  t.end_fill()
          
  # 2. 커피 잔 아이콘
  t.penup()
  t.goto(150, 80)
  t.pendown()
  t.color("#8b4513")  # 갈색 (커피)
  t.begin_fill()
          
  t.forward(30)
  t.left(90)
  t.forward(40)
  t.left(90)
  t.forward(30)
  t.left(90)
  t.forward(40)
  t.left(90)
  t.end_fill()
          
  # 컵 손잡이
  t.penup()
  t.goto(180, 100)
  t.pendown()
  t.color("#a0522d")  # 갈색
  t.circle(10, 180)  # 반원

  # 김 오르는 모습 (커피)
  t.penup(); t.goto(165, 125); t.pendown()
  t.setheading(90); t.forward(15)
  t.penup(); t.goto(175, 125); t.pendown()
  t.setheading(90); t.forward(15)

  # --- 추가 정보 (작은 텍스트) ---
  t.penup()
  t.goto(-230, -130)
  t.color("#696969")
  t.write("SINCE 2023", align="left", font=("Arial", 10, "italic"))

  t.goto(230, -130)
  t.color("#696969")
  t.write("OPEN 09:00 - 22:00", align="right", font=("Arial", 10, "italic"))

  t.penup()
  t.goto(0, 0)
  print("간판 그리기 완료!")
  turtle.done()

# 실행
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>Type 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("#1a1a1a") # 다크 배경

# 네온 테두리
t.penup(); t.goto(-180, 80); t.pendown()
t.color("#00ffff"); t.pensize(3)
for _ in range(2):
  t.forward(360); t.right(90)
  t.forward(160); t.right(90)

# 사이버 텍스트
t.penup(); t.goto(0, -10)
t.color("#ff00ff")
t.write("CYBER MART", align="center", font=("Courier", 35, "bold"))

t.goto(0, -40)
t.color("#00ffff")
t.write("24/7 UNMANNED STORE", align="center", font=("Courier", 12, "normal"))
</code></pre>
              </div>
            </div>

            <div class="card mb-3 border-secondary code-card">
              <div class="card-header bg-secondary text-white fw-bold py-2 d-flex justify-content-between align-items-center">
                <span>Type 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.7rem; padding: 15px; background: #272822; color: #f8f8f2; display: block;">
import turtle
t = turtle.Turtle()
t.speed(0); t.hideturtle()
turtle.Screen().bgcolor("#e8f4f8") # 스카이블루 배경

# 둥근 테두리
t.penup(); t.goto(0, -100); t.pendown()
t.color("#2c3e50"); t.pensize(8)
t.circle(100) # 반지름 100인 원

# 중앙 텍스트 배치
t.penup(); t.goto(0, 10)
t.color("#e74c3c")
t.write("MOM'S", align="center", font=("Arial", 25, "bold"))

t.goto(0, -25)
t.color("#2c3e50")
t.write("MEAL KIT", align="center", font=("Arial", 20, "bold"))

t.goto(0, -50)
t.write("- since 2026 -", align="center", font=("Arial", 10, "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> 숫자를 조작하여 간판 안의 글자 위치를 변경해 보세요. 간판에 사용할 문구는 AI에게 "우리 가게 콘셉트에 맞는 10자 이내 슬로건 3개 추천해 줘"라고 명령해 얻어보세요!
        </div>
      </section>


      <section>
        <h2 class="text-primary fw-bold 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-info">
            <div class="card-body">
              <h6 class="fw-bold">Q1. 생성형 AI에게 사업 계획서를 요구할 때, '강남역 35평, 알바생 1명, 월 순수익 1천만 원'처럼 비현실적인 조건을 주면, AI는 스스로 판단하여 현실적인 목표로 수정하여 답변해 준다.</h6>
              <div class="d-flex justify-content-center gap-3 mt-3">
                <button class="btn btn-lg" :class="{'btn-primary': ox_q1 === 'O', 'btn-outline-primary': ox_q1 !== 'O'}" @click="ox_q1 = 'O'">⭕ 그렇다</button>
                <button class="btn btn-lg" :class="{'btn-danger': ox_q1 === 'X', 'btn-outline-danger': ox_q1 !== 'X'}" @click="ox_q1 = 'X'">❌ 아니다</button>
              </div>
              <div v-if="ox_q1 !== null" class="mt-3 text-start">
                <div v-if="ox_q1 === 'X'" class="alert alert-success mb-0 fw-bold py-2" style="font-size: 0.85rem;">🎉 정답! AI는 비현실성을 스스로 지적하기보다, 목표를 억지로 맞추기 위해 '10분마다 손님이 회전한다'는 식의 거짓말(할루시네이션)을 만들어냅니다. 명확한 제약 조건 통제가 필수입니다.</div><div v-else class="alert alert-danger mb-0 py-2" style="font-size: 0.85rem;"><b>❌ 오답입니다.</b> AI는 스스로 현실성을 판단하지 못하고, 주어진 조건(1천만 원 달성)을 억지로 맞추려 무리한 계산을 해버립니다.</div>
              </div>
            </div>
          </div>

          <div class="card mb-3 text-left shadow-sm border-info">
            <div class="card-body">
              <h6 class="fw-bold">Q2. 식당 운영 시 구매한 식자재는 100% 매출로 직결되지 않는다. 보관 중 무르거나 안 팔려서 버려지는 최소 15~20%의 '식자재 폐기율(Loss)'을 원가에 반드시 반영해야 한다.</h6>
              <div class="d-flex justify-content-center gap-3 mt-3">
                <button class="btn btn-lg" :class="{'btn-primary': ox_q2 === 'O', 'btn-outline-primary': ox_q2 !== 'O'}" @click="ox_q2 = 'O'">⭕ 그렇다</button>
                <button class="btn btn-lg" :class="{'btn-danger': ox_q2 === 'X', 'btn-outline-danger': ox_q2 !== 'X'}" @click="ox_q2 = 'X'">❌ 아니다</button>
              </div>
              <div v-if="ox_q2 !== null" class="mt-3 text-start">
                <div v-if="ox_q2 === 'O'" class="alert alert-success mb-0 fw-bold py-2" style="font-size: 0.85rem;">🎉 정답! 식자재 폐기율을 원가에 반영하지 않으면, 장부상으로는 흑자여도 실제로는 적자가 나는 치명적인 재무 트랩에 빠지게 됩니다.</div><div v-else class="alert alert-danger mb-0 py-2" style="font-size: 0.85rem;"><b>❌ 오답입니다.</b> 세상에 100% 버려지는 것 없이 소진되는 식자재는 없습니다. 폐기율은 필수 고려 대상입니다.</div>
              </div>
            </div>
          </div>

          <div class="card mb-3 text-left shadow-sm border-info">
            <div class="card-body">
              <h6 class="fw-bold">Q3. 매장 홀(테이블 6개)의 공간적 한계를 극복하기 위해 배달을 도입하여 '총매출액'이 증가하면, 매장의 마진율(순이익률)도 무조건 이전보다 높게 상승한다.</h6>
              <div class="d-flex justify-content-center gap-3 mt-3">
                <button class="btn btn-lg" :class="{'btn-primary': ox_q3 === 'O', 'btn-outline-primary': ox_q3 !== 'O'}" @click="ox_q3 = 'O'">⭕ 그렇다</button>
                <button class="btn btn-lg" :class="{'btn-danger': ox_q3 === 'X', 'btn-outline-danger': ox_q3 !== 'X'}" @click="ox_q3 = 'X'">❌ 아니다</button>
              </div>
              <div v-if="ox_q3 !== null" class="mt-3 text-start">
                <div v-if="ox_q3 === 'X'" class="alert alert-success mb-0 fw-bold py-2" style="font-size: 0.85rem;">🎉 정답! 총매출액 규모는 커질 수 있지만, 플랫폼 중개 수수료, 배달 대행비, 포장 용기 비용 등 '수수료 폭격' 때문에 마진율(%)은 오히려 홀 장사보다 크게 떨어질 수 있습니다.</div><div v-else class="alert alert-danger mb-0 py-2" style="font-size: 0.85rem;"><b>❌ 오답입니다.</b> 배달 매출은 겉보기(총매출)에는 커 보이지만, 배달 관련 수수료를 떼고 나면 남는 게 거의 없는 '빛 좋은 개살구'가 될 수 있습니다.</div>
              </div>
            </div>
          </div>

          <div class="card mb-3 text-left shadow-sm border-info">
            <div class="card-body">
              <h6 class="fw-bold">Q4. '바이브 코딩(Vibe Coding)'은 프로그래머처럼 문법을 완벽히 암기하여 직접 코드를 타이핑하는 방식이 아니라, AI에게 수학적 수치와 자연어로 의도를 명령하여 코드를 생성 및 통제하는 방식이다.</h6>
              <div class="d-flex justify-content-center gap-3 mt-3">
                <button class="btn btn-lg" :class="{'btn-primary': ox_q4 === 'O', 'btn-outline-primary': ox_q4 !== 'O'}" @click="ox_q4 = 'O'">⭕ 그렇다</button>
                <button class="btn btn-lg" :class="{'btn-danger': ox_q4 === 'X', 'btn-outline-danger': ox_q4 !== 'X'}" @click="ox_q4 = 'X'">❌ 아니다</button>
              </div>
              <div v-if="ox_q4 !== null" class="mt-3 text-start">
                <div v-if="ox_q4 === 'O'" class="alert alert-success mb-0 fw-bold py-2" style="font-size: 0.85rem;">🎉 정답! "그냥 예쁘게 그려줘"가 아니라, "반지름 50, 30도 회전"처럼 변수를 명확히 통제하여 결과를 도출하는 것이 핵심입니다.</div><div v-else class="alert alert-danger mb-0 py-2" style="font-size: 0.85rem;"><b>❌ 오답입니다.</b> 바이브 코딩은 복잡한 문법 암기보다는 AI를 디렉팅(Directing)하는 능력에 초점을 맞춥니다.</div>
              </div>
            </div>
          </div>

        </div>
      </section>
      <section data-background="#E6F4EA">
        <h2 class="fw-bold text-success">🍦 실시간 데이터 수집: 민초청국장 선호도</h2>
        <p>데이터 과학의 첫걸음은 <b>추상적 취향을 숫자로 정량화</b>하는 것입니다.</p>
        <div class="card bg-white p-4 shadow-sm mx-auto mt-4" style="width: 80%;">
          <h4 class="mb-4 text-dark">"신메뉴 '민초청국장'에 대한 당신의 선호도는?"</h4>
          <div class="d-flex justify-content-between px-3 fw-bold text-muted" style="font-size: 0.9rem;">
            <span>절대 안 먹음(1점)</span>
            <span>최고의 맛(10점)</span>
          </div>
          <input type="range" class="form-range custom-range" min="1" max="10" step="1" v-model="preference_score">
          
        </div>
      </section>

      <section>
        <h2 class="fw-bold">📊 음식점 운영에는 어떤 데이터가 필요할까?</h2>
        <p class="text-muted">컴퓨터는 '분위기'를 이해하지 못합니다. 모든 것을 <b>숫자(Feature)</b>로 바꿔봅시다.</p>
        <div class="row g-3 text-left mt-4" style="font-size: 0.85rem;">
          <div class="col-md-6">
            <div class="card h-100 border-primary shadow-sm bg-light">
              <div class="card-header bg-primary text-white fw-bold">추상적 개념 (Human)</div>
              <div class="card-body">
                <ul class="list-group list-group-flush bg-transparent">
                  <li class="list-group-item">"오늘따라 날씨 때문에 손님이 없네"</li>
                  <li class="list-group-item">"배달 수수료 떼면 남는 게 없어"</li>
                  <li class="list-group-item">"단골들이 가게를 좋아하는 것 같아"</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card h-100 border-success shadow-sm">
              <div class="card-header bg-success text-white fw-bold">데이터 항목 (AI Feature)</div>
              <div class="card-body text-dark">
                <ul class="list-group list-group-flush">
                  <li class="list-group-item"><b>[강수량/기온]</b> : 정밀도 높은 수치데이터</li>
                  <li class="list-group-item"><b>[순이익률]</b> : (순이익 / 총매출) * 100</li>
                  <li class="list-group-item"><b>[재방문율]</b> : (전체고객수 / 단골수)</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="alert alert-warning mt-4 py-2" style="font-size: 0.8rem;">
          <b>🎯 고딩용 미션:</b> 가게 '친절도'를 숫자로 측정하려면 포스기(POS)에 어떤 버튼을 추가해야 할까요?
        </div>
      </section>
      <section>
        <h2>📥 오픈 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> 약 500,000원 내외<br>
              ✔️ <b>매장 환경:</b> 4인 테이블 딱 6개 (1차시 룰 유지)
            </div>

            <p style="font-size: 0.9rem;" class="mb-4">
              아래 버튼을 눌러 데이터를 다운로드하고 열어보세요. <br>
              <b>첫 번째 열(ID 번호)</b>을 기준으로 기준점을 심각하게 벗어난 날짜를 찾아야 합니다.
            </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> ID, 날짜, 기온(℃), 방문객수, 결제건수, 총매출액(원), 환불건수, 배달수수료(원), 순이익(원)
            </div>
          </div>
        </div>
      </section>

      <section>
        <h2>🕵️ 1교시: 육안 검안 (데이터 탐정단)</h2>
        <p>시각화를 하기 전, 눈으로만 봐도 말이 안 되는 <b>'단순 시스템 오류'</b>를 찾으세요. <br>평균 매출(50만)과 방문객(150명)을 무시한 <b>이상한 ID 번호(각 2개씩)</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>👉 정답: ID 5번, 32번 (매출 입력 오타)</b><br>
                총매출액이 500만 원, 5,500만 원으로 부풀려져 있습니다. 직원이 포스기에 '0'을 한두 번 더 잘못 누른 <b>Human Error</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. "손님은 바글바글한데, 돈은 안 들어왔어"</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>👉 정답: ID 9번, 41번 (시스템 장애)</b><br>
                방문객은 많은데 총매출액이 '0원'입니다. <b>인터넷 통신이 끊겨</b> 결제가 안 돼서 손님들이 그냥 돌아간 날입니다. 
              </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>👉 정답: ID 19번(-40도), 38번(45도) (센서 오류)</b><br>
                기온이 비정상적입니다. 외부 온도 센서의 고장입니다. 날씨-매출 상관관계 그래프를 그릴 때 이 점(Point)들이 그래프의 축을 망가뜨립니다.
              </div>
            </li>
          </ul>
        </div>
      </section>

      <section>
        <h2>🕵️ 1교시: 논리적 모순 찾기 (심화)</h2>
        <p>단순 오타가 아닙니다. 1차시에서 배웠던 <b>[테이블 6개], [배달 수수료], [폐기율]</b> 룰을 기억하며 비즈니스적 모순이 발생한 <b>ID 번호(각 2개씩)</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. 물리법칙을 무시한 손님들</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>👉 정답: ID 14번(1500명), 45번(1800명) (허위/배달 몰빵 데이터)</b><br>
                우리 매장은 4인 테이블이 딱 6개(최대 24명)입니다. 아무리 회전율이 좋아도 1,500명이 홀에서 먹고 가는 것은 물리적으로 절대 불가능합니다.
              </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>👉 정답: ID 23번, 48번 (배달 수수료 폭탄)</b><br>
                매출은 100만 원 이상인데, <b>순이익은 5만 원, 8만 원</b>입니다. 배달 수수료와 포장비로 60~70만 원이 빠져나갔습니다. 매출이 높아도 적자가 날 수 있습니다.
              </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 & 7. 환불 폭탄과 대기업의 기습</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>👉 트랩 6 (ID 26, 35):</b> 환불건수가 60~85건으로 폭증하여 순이익 마이너스. (식자재 변질 사태)<br>
                <b>👉 트랩 7 (ID 29, 50):</b> 날씨가 좋은데 방문객이 20~30명으로 급감. (바로 앞 대기업 반값 매장 오픈일)
              </div>
            </li>
          </ul>
        </div>
      </section>

      <section>
        <h2>📈 2교시: 다차원 상관관계 분석 (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>축(Axis)에 지표 드래그
          </div>
          <div>➡️</div>
          <div style="padding:8px; background-color:#98FB98; border-radius:5px; text-align:center; font-weight:bold;">
            이상치 정제 및<br>추세선(LS Line) 확인
          </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">명백한 이상치(Outlier)나 표준편차가 너무 큰 데이터 때문에 그래프가 왜곡되어 보일 때 적용하는 필수 과정입니다.</p>
            <ol class="mb-0">
              <li class="mb-1">왜곡을 유발하는 이상치 데이터를 마우스나 터치로 <b>선택(드래그)</b>합니다.</li>
              <li class="mb-1">그래프 우측 <b>눈 모양 아이콘(👁️)</b>을 누르고 <b>[선택한 데이터 숨기기 (Hide Selected Cases)]</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;">센서 오류(-40도, 45도)를 그래프에서 찾아 숨기고 화면크기조정(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축: 방문객수 / 선으로 연결(Connecting Lines) 활성화
              </div>
            </li>
          </ul>
        </div>
      </section>
      <section data-background="#f8f9fa">
        <h3 class="fw-bold text-danger">🛑 CEO의 고민: "홀 영업을 유지해야 할까?"</h3>
        <p style="font-size: 0.9rem;">임대료는 오르는데 홀이 비어있습니다. 어떤 데이터를 추가해서 분석해야 할까요?</p>
        <div class="card border-danger mx-auto mt-4 shadow-sm" style="width: 85%;">
          <div class="card-body p-4 text-left">
            <h6 class="fw-bold mb-3 text-primary">📍 분석을 위한 핵심 지표(Feature) 선택하기</h6>
            <div class="mb-3">
              <label class="form-label text-muted small">A 데이터 (X축)</label>
              <select class="form-select border-primary" v-model="decision_x">
                <option value="null" disabled>항목 선택</option>
                <option value="date">날짜 (시간 흐름)</option>
                <option value="temp">오늘의 기온</option>
              </select>
            </div>
            <div class="mb-4">
              <label class="form-label text-muted small">B 데이터 (Y축 - 정답을 찾아보세요)</label>
              <select class="form-select border-danger" v-model="decision_y">
                <option value="null" disabled>항목 선택</option>
                <option value="total">총매출액</option>
                <option value="answer">홀 결제건수 vs 배달 결제건수</option>
                <option value="refund">환불 건수</option>
              </select>
            </div>
            <div v-if="decision_y === 'answer'" class="alert alert-success py-2 pop-in-anim">
              <b>🎉 인사이트 발견:</b> 매출이 동일해도 '홀 결제건수'가 급감하고 있다면, 과감하게 홀을 줄이고 <b>배달 전문점</b>으로 전환하는 피봇팅 전략이 필요합니다!
            </div>
          </div>
        </div>

        <div class="mt-5 pt-3 border-top">
          <h5 class="fw-bold text-primary"><i class="fa fa-flask me-2"></i>이건 진짜 데이터과학자! (객단가 분석)</h5>
          <div class="row mt-3 g-2">
            <div class="col-4" v-for="s in science_steps" :key="s.id">
              <div class="card border-0 shadow-sm bg-white p-2 h-100">
                <div class="badge bg-dark mb-1" style="width: fit-content;">{{ s.step }}</div>
                <p class="small fw-bold mb-0">{{ s.title }}</p>
              </div>
            </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>정량적 데이터(CODAP)로 문제의 현상을 파악했다면, 이제 <b>정성적 데이터(고객 리뷰)</b>를 통해 구체적인 원인을 시각화할 차례입니다.</p>

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

        <div class="card mt-4 mb-3 text-center border-danger">
          <div class="card-header bg-danger text-white fw-bold">🚨 우리 매장 리뷰 100건 데이터셋</div>
          <div class="card-body bg-light">
            <p style="font-size: 0.85rem;" class="text-muted mb-3">배달 지연, 협소한 매장 공간, 높은 배달 수수료 등 함정에 빠진 매장의 실제 고객 반응을 모아둔 데이터입니다. 클릭하여 텍스트 마이닝을 시작하세요.</p>
            <button @click="copyReviews($event)" class="btn btn-lg btn-danger fw-bold shadow">
              <i class="fa fa-copy me-2"></i> 고객 리뷰 100건 복사하기
            </button>
          </div>
        </div>
      </section>

      <section data-background="#2c3e50" class="text-white">
        <h2 class="text-warning fw-bold">📢 위기 탈출 최종 피칭 (Pitching)</h2>
        <p class="mb-4">CEO는 발견한 트랩을 근거로 다음 달 생존 전략(Pivoting)을 발표합니다.</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>
          <ul style="font-size: 0.95rem; line-height: 1.5; color: #333;">
            <li><b>1. 오염 보고:</b> "가장 치명적인 오류는 ID O번의 OOO(이유)이었습니다."</li>
            <li><b>2. 시각화 증명:</b> "CODAP으로 X축과 Y축을 비교해 보니 OOO한 현상을 확인했습니다."</li>
          </ul>

          <h6 class="fw-bold mt-4 mb-2 text-danger">💡 3. 미션별 피봇팅(전략 수정) 선택지</h6>
          <p class="text-muted mb-2" style="font-size: 0.8rem;">
            <b>※ 팀 미션:</b> 아래 항목을 눌러 예시를 확인한 후, <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 style="font-size: 1.2rem; transition: transform 0.3s;" :style="{ transform: showPivot[0] ? 'rotate(180deg)' : 'rotate(0deg)' }">🔻</span>
            </div>
            <div v-if="showPivot[0]" class="mt-2 text-muted" style="font-size: 0.85rem;">
              ✔️ <b>예시 A:</b> 비/눈 오는 날 한정 배달비 반값 이벤트로 홀 매출 감소 방어<br>
              ✔️ <b>예시 B:</b> 폭염(30도 이상) 대비 테이크아웃 전용 대용량 빙수 메뉴 도입
            </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 style="font-size: 1.2rem; transition: transform 0.3s;" :style="{ transform: showPivot[1] ? 'rotate(180deg)' : 'rotate(0deg)' }">🔻</span>
            </div>
            <div v-if="showPivot[1]" class="mt-2 text-muted" style="font-size: 0.85rem;">
              ✔️ <b>예시 A:</b> 배달앱 대신 매장 직접 전화/포장 주문 시 메뉴 10% 할인 (수수료 절감)<br>
              ✔️ <b>예시 B:</b> 배달 최소 주문금액을 상향하고, 마진율이 높은 음료 묶음 세트로만 배달 운영
            </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 style="font-size: 1.2rem; transition: transform 0.3s;" :style="{ transform: showPivot[2] ? 'rotate(180deg)' : 'rotate(0deg)' }">🔻</span>
            </div>
            <div v-if="showPivot[2]" class="mt-2 text-muted" style="font-size: 0.85rem;">
              ✔️ <b>예시 A:</b> 가격 인하 출혈경쟁 대신, 프리미엄 식재료를 강조하는 팝업 설명회 개최<br>
              ✔️ <b>예시 B:</b> 테이블 6개의 장점(조용함)을 살려 '카공족' 환영 공간으로 개편 및 정액제 도입
            </div>
          </div>

        </div>
      </section>

      <section>
        <h2 class="fw-bold text-primary mb-3">🎬 [심화] 인공지능이 데이터를 읽는 법: 피처(Feature)</h2>
        <p class="text-muted" style="font-size: 0.9rem;">
          우리가 장부에서 본 '기온', '방문객수' 같은 항목들을 인공지능은 <b>'피처(Feature)'</b>라고 부릅니다.<br>
          영상을 보고 인공지능이 어떻게 이 피처를 통해 세상을 이해하는지 알아봅시다.
        </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 class="mt-3 text-left p-2" @click="toggleVideoDesc(0)" style="cursor: pointer;">
                  <span class="fw-bold text-primary d-flex justify-content-between align-items-center">
                    📍 핵심 포인트 보기
                    <span style="font-size: 1.2rem; transition: transform 0.3s;" :style="{ transform: showVideoDesc[0] ? 'rotate(180deg)' : 'rotate(0deg)' }">🔻</span>
                  </span>
                  <div v-if="showVideoDesc[0]" class="mt-2 text-muted" style="font-size: 0.85rem;">
                    • <b>데이터 수집:</b> 가공되지 않은 원시 데이터(Raw Data)를 모으는 단계<br>
                    • <b>데이터 과학:</b> 데이터를 분석해 의미 있는 '정보'를 찾아내는 기술<br>
                    • <b>비즈니스 적용:</b> 우리가 장부를 분석해 전략을 짠 것이 바로 데이터 과학입니다.
                  </div>
                </div>
              </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 class="mt-3 text-left p-2" @click="toggleVideoDesc(1)" style="cursor: pointer;">
                  <span class="fw-bold text-success d-flex justify-content-between align-items-center">
                    📍 핵심 포인트 보기
                    <span style="font-size: 1.2rem; transition: transform 0.3s;" :style="{ transform: showVideoDesc[1] ? 'rotate(180deg)' : 'rotate(0deg)' }">🔻</span>
                  </span>
                  <div v-if="showVideoDesc[1]" class="mt-2 text-muted" style="font-size: 0.85rem;">
                    • <b>피처(Feature):</b> 데이터를 구분하는 결정적인 '특징' (예: 커피의 향, 온도)<br>
                    • <b>피처 추출:</b> 수많은 데이터 중 문제 해결에 꼭 필요한 항목만 골라내는 과정<br>
                    • <b>주의점:</b> 엉뚱한 피처(오염된 데이터)를 학습하면 AI는 바보가 됩니다.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section data-background="#f0f9ff">
        <h3 class="fw-bold text-dark">💡 오늘 우리가 다룬 '피처' 총정리</h3>
        <div class="row mt-4">
          <div class="col-md-7">
            
            <div class="card mt-3 border-0 shadow-sm text-left">
              <div class="card-body bg-white rounded">
                <h6 class="fw-bold text-primary mb-2">📌 CSV 장부의 열(Column) = 피처(Feature)</h6>
                <ul style="font-size: 0.9rem; line-height: 1.6;">
                  <li><b>기온 피처:</b> 방문객 수에 영향을 주는 외부 환경 변수</li>
                  <li><b>배달 수수료 피처:</b> 순이익을 결정짓는 핵심 경제 변수</li>
                  <li><b>환불 건수 피처:</b> 매장 운영의 품질을 보여주는 신뢰도 변수</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-md-5">
            <div class="alert alert-warning h-100 shadow-sm border-0">
              <h5 class="fw-bold">🕵️ 데이터 탐정의 결론</h5>
              <p style="font-size: 0.9rem;" class="mt-3">
                "데이터 분석이란, <br><span class="text-danger fw-bold">가장 중요한 피처</span>를 찾아내고, <br><span class="text-danger fw-bold">잘못된 피처(오류)</span>를 걸러내는 과정이다!"
              </p>
              <hr>
              <p style="font-size: 0.85rem;">
                이 능력이 있어야 AI를 도구로 써서 비즈니스를 성공시킬 수 있습니다.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section>
        <img data-src="/vibe/ai-sequence.png" style="height: 500px; max-height: 100%; object-fit: contain;" />
        <h1 class="fw-bold text-danger mt-3" style="font-size: 2rem;">"전처리(Preprocessing)란?"</h1>
        <p class="text-muted">데이터 과학의 80%를 차지하는, <br><b>지저분한 원본 데이터를 AI가 이해할 수 있는 깨끗한 숫자</b>로 가공하는 과정!</p>
      </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.8rem;">데이터 수집부터 추론(Inference)까지, 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.75rem; 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_step === 0" class="h-100 d-flex flex-column justify-content-center align-items-center">
              <i class="fa fa-robot text-muted mb-3" style="font-size: 6rem;"></i>
              <h4 class="fw-bold text-light">당근 AI 예측기: 시스템 대기 중</h4>
              <p class="text-muted text-center" style="font-size: 0.9rem;">웹에서 '아이폰 14' 거래 데이터를 수집해 최적의 가격을 예측합니다.<br>하단의 [수집 시작] 버튼을 누르세요.</p>
            </div><div v-else-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 class="card bg-secondary text-white p-2 text-center shadow slide-up-anim" style="width: 100px; font-size: 0.7rem;"><i class="fa fa-box mb-1"></i><br>데이터 #1</div>
                <div class="card bg-secondary text-white p-2 text-center shadow slide-up-anim" style="width: 100px; font-size: 0.7rem; animation-delay: 0.3s;"><i class="fa fa-box mb-1"></i><br>데이터 #2</div>
                <div class="card bg-secondary text-white p-2 text-center shadow slide-up-anim" style="width: 100px; font-size: 0.7rem; animation-delay: 0.6s;"><i class="fa fa-box mb-1"></i><br>데이터 #3</div>
                <div class="card bg-secondary text-white p-2 text-center shadow slide-up-anim" style="width: 100px; font-size: 0.7rem; animation-delay: 0.9s;"><i class="fa fa-file-alt mb-1"></i><br>데이터 #4</div>
                <div class="card bg-secondary text-white p-2 text-center shadow slide-up-anim" style="width: 100px; font-size: 0.7rem; animation-delay: 1.2s;"><i class="fa fa-box mb-1"></i><br>데이터 #5</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>
              <p class="text-muted mt-3" style="font-size: 0.8rem;">데이터 수집이 곧 완료됩니다.</p>

            </div>
            <div v-else-if="pipe_step === 2" class="h-100 position-relative pt-2">
              
              <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.85rem;" v-html="pipe_feedback_msg"></p>
              </div>

              <div class="text-center mb-3">
                <h5 class="text-danger fw-bold blink-anim">🚨 AI를 망치는 '스파이 매물(이상치)' 2개를 찾아 클릭(삭제)하세요!</h5>
                <div class="bg-secondary text-white p-2 rounded-3 mx-auto mt-2" style="width: 80%; font-size: 0.8rem;">
                  <i class="fa fa-question-circle text-warning me-1"></i> <b>현업에서도 눈으로 찾나요?</b> 아닙니다! 수만 개의 데이터는 눈으로 볼 수 없기 때문에,<br>앞서 우리가 직접 해봤던 <b>CODAP(산점도 그래프)</b> 도구를 써서 궤도를 벗어난 점을 기계적으로 걸러냅니다.
                </div>
              </div>

              <div class="d-flex justify-content-center flex-wrap gap-2 px-2 mt-3">
                <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, 
                       'border-danger border-3 wobble-anim': phone.showHint,
                       'error-shake border-danger border-2': phone.errorAnim
                     }"
                     style="width: 160px; cursor: pointer;"
                     @click="pipeClickOutlier(phone)">
                  <div class="bg-dark text-center text-white py-1" style="font-size: 1.5rem;">
                    <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.3; min-height: 32px;">{{ phone.title }}</div>
                    <div class="text-muted" style="font-size: 0.7rem;">배터리: {{ phone.bat }} | {{ phone.cond }}</div>
                    <hr class="my-1 border-secondary">
                    <div class="fw-bold text-primary" style="font-size: 1rem;">{{ phone.price }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else-if="pipe_step === 3" class="h-100 position-relative">
            <div class="text-center mb-3">
                <h5 class="text-success fw-bold">데이터 전처리 (Preprocessing)</h5>
                <p class="text-light" style="font-size: 0.85rem;">AI는 알파벳('A급')이나 특수기호('%', '만원')를 텍스트 그대로 이해하지 못합니다.<br>수학적으로 계산할 수 있도록 오직 '숫자와 행렬'로 규격화해야 합니다!</p>
              </div>

              <div class="d-flex justify-content-center flex-wrap gap-3">
                <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: 160px;">
                  <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">
                <span v-if="pipe_preprocess_level === 1" class="badge bg-warning text-dark fs-6 slide-up-anim">1단계: 단위 제거 및 스케일링 (%와 만원 글자를 떼어내고 소수로 변환)</span>
                <span v-if="pipe_preprocess_level === 2" class="badge bg-warning text-dark fs-6 slide-up-anim">2단계: 원-핫 인코딩 (A, B 같은 등급을 [1,0,0] 형태의 고유 벡터로 변환!)</span>
              </div>

            </div>
            <div v-else-if="pipe_step === 4" class="h-100 position-relative pt-2">
            <div class="text-center mb-3">
                <h5 class="text-warning fw-bold mb-1">인공신경망 학습 (최적의 패턴 선 찾기)</h5>
                <p class="text-light lh-sm" style="font-size: 0.8rem;">
                  하단의 <b>[학습 가속]</b> 버튼을 누르면 AI가 전체 데이터를 다시 보며 <b>스스로 가중치(선의 기울기)를 수정</b>합니다.<br>
                  수학을 몰라도 괜찮아요! <span class="text-danger">빨간 빗금(오차)</span>이 어떻게 줄어들고, <span class="text-warning">노란 선</span>이 어떻게 자리를 잡는지 보세요.
                </p>
              </div>

              <div class="d-flex justify-content-center gap-3 px-3">
                <div class="position-relative bg-dark rounded-2 shadow-sm p-1" style="width: 55%; height: 230px;">
                  <span class="position-absolute text-muted" style="top: 5px; left: 10px; font-size: 0.65rem;">예측 가격 (y)</span>
                  <span class="position-absolute text-muted" style="bottom: 5px; right: 10px; font-size: 0.65rem;">폰 상태 점수 (x)</span>

                  <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="40%" y1="60%" x2="40%" :y2="50 + (pipe_epoch*0.1) + '%'" stroke="#dc3545" stroke-width="3" stroke-dasharray="5,5" style="transition: all 0.5s ease;" />
                    <line x1="60%" y1="30%" x2="60%" :y2="50 - (pipe_epoch*0.1) + '%'" 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" stroke-linecap="round" style="transition: all 0.5s ease;" />

                    <circle cx="20%" cy="80%" r="7" fill="#0dcaf0" :class="{'pulse-fast': pipe_is_training}" />
                    <circle cx="40%" cy="60%" r="7" fill="#0dcaf0" :class="{'pulse-fast': pipe_is_training}" />
                    <circle cx="60%" cy="30%" r="7" fill="#0dcaf0" :class="{'pulse-fast': pipe_is_training}" />
                    <circle cx="80%" cy="15%" r="7" fill="#0dcaf0" :class="{'pulse-fast': pipe_is_training}" />
                  </svg>
                </div>

                <div class="d-flex flex-column justify-content-between" style="width: 40%;">
                  <div class="card bg-secondary border-0 text-white p-2 shadow-sm h-50 mb-2">
                    <div style="font-size: 0.75rem;" class="text-warning fw-bold"><i class="fa fa-balance-scale me-1"></i>가중치 (W) 란?</div>
                    <div style="font-size: 0.7rem;" class="mt-1 lh-sm">
                      폰 상태가 가격에 미치는 '중요도'입니다. <b>우리가 입력하는 게 아니라, AI가 버튼을 누를 때마다 스스로 고치는 값입니다!</b>
                    </div>
                    <div class="fw-bold font-monospace mt-auto text-end text-warning fs-5">
                      W = {{ (0.2 + (pipe_epoch*0.006)).toFixed(2) }}
                    </div>
                  </div>
                  <div class="card bg-secondary border-0 text-white p-2 shadow-sm h-50">
                    <div style="font-size: 0.75rem;" class="text-danger fw-bold"><i class="fa fa-bullseye me-1"></i>오차율 (Loss) 이란?</div>
                    <div style="font-size: 0.7rem;" class="mt-1 lh-sm">
                      정답(파란 점)과 AI의 예측(노란 선)이 빗나간 거리입니다. 저 <b>빨간 점선들이 사라져서 0에 가까워질수록 완벽한 모델</b>이 됩니다.
                    </div>
                    <div class="fw-bold font-monospace mt-auto text-end fs-5" :class="pipe_epoch === 100 ? 'text-success' : 'text-danger'">
                      Loss = {{ 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 }}번 학습하며 AI가 스스로 선을 고쳤습니다!
              </div>

            </div>
            <div v-else-if="pipe_step === 5" class="h-100 position-relative">
            <h5 class="text-info fw-bold text-center mb-3">실전 배포: 새로운 스마트폰 적정가 예측 (Inference)</h5>
              
              <div class="d-flex justify-content-center align-items-center h-75 gap-4">
                <div v-if="pipe_test_state >= 1" class="card bg-white text-dark shadow slide-in-left" style="width: 140px;">
                  <div class="card-header bg-primary text-white text-center py-1" style="font-size:0.8rem;">새 매물 등록됨</div>
                  <div class="card-body p-2 text-center fw-bold">
                    <div>🔋 92%</div>
                    <div>✨ A급</div>
                    <hr class="my-1">
                    <div class="text-muted" style="font-size:0.7rem;">가격 미정</div>
                  </div>
                </div>

                <div class="position-relative ai-scanner-box d-flex flex-column justify-content-center align-items-center bg-dark border border-2 border-info rounded-3" style="width: 180px; height: 180px;">
                  <i class="fa fa-network-wired text-info mb-2" :class="{'pulse-fast': pipe_test_state === 2}" style="font-size: 3rem;"></i>
                  <span class="text-white fw-bold" style="font-size: 0.85rem;">AI Price Model</span>
                  
                  <div v-if="pipe_test_state === 2" class="scanner-laser"></div>
                  <div v-if="pipe_test_state === 2" class="mt-2 badge bg-warning text-dark blink-anim">분석 중...</div>
                </div>

                <div v-if="pipe_test_state === 3" class="card bg-success text-white shadow-lg pop-in-anim border-0" style="width: 150px;">
                  <div class="card-header bg-dark text-center py-1" style="font-size:0.8rem;">AI 예측 적정가</div>
                  <div class="card-body p-3 text-center">
                    <div class="fw-bold" style="font-size: 1.8rem;">58만원</div>
                    <div style="font-size:0.7rem;" class="mt-2">오차범위 ±2만원</div>
                  </div>
                </div>
              </div>

            </div>

          </div>

          <div class="ai-game-controls p-3 bg-secondary d-flex justify-content-between align-items-center border-top border-dark">
            <div class="text-start" style="width: 150px;">
              <span class="badge bg-dark fs-6 font-monospace">STEP 0{{ pipe_step }}</span>
            </div>
            
            <div class="d-flex gap-2">
              <button v-if="pipe_step === 0" class="btn btn-primary fw-bold pulse-btn" @click="pipeStart">
                <i class="fa fa-magnet me-1"></i> 데이터 수집 시작
              </button>
              
              <button v-if="pipe_step === 1" class="btn btn-dark fw-bold disabled">
                수집 중...
              </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)">
                <i class="fa fa-check me-1"></i> 클리닝 완료 (다음)
              </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">
                <i class="fa fa-magic me-1"></i> 데이터 규격화 ({{ pipe_preprocess_level }}/2)
              </button>

              <button v-if="pipe_step === 3 && pipe_preprocess_level === 2" class="btn btn-success fw-bold pulse-btn" @click="pipeNext(4)">
                <i class="fa fa-forward me-1"></i> AI 학습장 이동
              </button>

              <button v-if="pipe_step === 4" class="btn fw-bold" :class="pipe_epoch < 100 ? 'btn-danger pulse-btn' : 'btn-dark disabled'" @click="pipeTrain">
                <i class="fa fa-dumbbell me-1"></i> 학습 가속 (Click!)
              </button>

              <button v-if="pipe_step === 4 && pipe_epoch >= 100" class="btn btn-success fw-bold pulse-btn" @click="pipeNext(5)">
                <i class="fa fa-rocket me-1"></i> AI 배포하기
              </button>

              <button v-if="pipe_step === 5" class="btn btn-info fw-bold text-dark pulse-btn" @click="pipeTestInfer" :disabled="pipe_test_state > 0">
                <i class="fa fa-search-dollar me-1"></i> 새 매물 가격 예측하기
              </button>
            </div>
            
            <div class="text-end" style="width: 150px;">
              <button class="btn btn-sm btn-outline-dark text-white" @click="pipeReset"><i class="fa fa-redo"></i> 초기화</button>
            </div>
          </div>
        </div>
      </section>

      <section>
        <h2 class="text-warning fw-bold mb-4 text-dark">👩‍🎓 AI 파이프라인 개념 평가 (고등)</h2>
        <div style="height: 500px; overflow-y: auto; padding: 10px;">
          
          <div class="card mb-4 text-left shadow-sm border-warning">
            <div class="card-body">
              <h5 class="fw-bold">Q1. 엑셀이나 표로 예쁘게 정리하기 어려운 사진, 영상, 오디오 형태의 데이터를 무엇이라고 하나요?</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_h1 === 1}" @click="ans_h1 = 1">1. 정형 데이터 (Structured)</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_h1 === 2}" @click="ans_h1 = 2">2. 시계열 데이터 (Time-series)</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-success text-white': ans_h1 === 3}" @click="ans_h1 = 3">3. 비정형 데이터 (Unstructured)</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_h1 === 4}" @click="ans_h1 = 4">4. 관계형 데이터 (Relational)</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_h1 === 5}" @click="ans_h1 = 5">5. 메타 데이터 (Meta)</button>
              </div>
              
              <div v-if="ans_h1 !== null" class="mt-2 text-start">
                <div v-if="ans_h1 === 3" class="alert alert-success mb-0 fw-bold">
                  🎉 정답! 형태가 규격화되지 않은 텍스트, 이미지 등은 비정형 데이터로 분류됩니다.
                </div>
                <div v-else class="alert alert-danger mb-0" style="font-size: 0.85rem;">
                  <b>❌ 오답입니다.</b><br>
                  <span v-if="ans_h1 === 1">👉 <b>정형 데이터</b>는 엑셀이나 RDBMS처럼 규격화된 데이터를 말합니다.</span>
                  <span v-if="ans_h1 === 2">👉 <b>시계열 데이터</b>는 일정한 시간 간격으로 측정된 데이터(예: 주식)입니다.</span>
                  <span v-if="ans_h1 === 4">👉 <b>관계형 데이터</b>는 테이블 간의 관계로 정의되는 데이터베이스 모델입니다.</span>
                  <span v-if="ans_h1 === 5">👉 <b>메타 데이터</b>는 '데이터에 대한 데이터'(예: 사진 찍은 시간, 위치)를 뜻합니다.</span>
                </div>
              </div>
            </div>
          </div>

          <div class="card mb-4 text-left shadow-sm border-warning">
            <div class="card-body">
              <h5 class="fw-bold">Q2. 측정 오류로 인해 정상 분포에서 크게 벗어난 '이상치(Outlier)'를 제거하지 않으면 발생하는 대표적인 문제는?</h5>
              <div class="list-group mt-3" style="font-size: 0.9rem;">
                <button class="list-group-item list-group-item-action" :class="{'bg-success text-white': ans_h2 === 1}" @click="ans_h2 = 1">1. 평균값이 심각하게 왜곡된다</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_h2 === 2}" @click="ans_h2 = 2">2. 데이터 용량이 0이 된다</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_h2 === 3}" @click="ans_h2 = 3">3. 중앙값이 무조건 최댓값과 같아진다</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_h2 === 4}" @click="ans_h2 = 4">4. 차원의 저주가 발생한다</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_h2 === 5}" @click="ans_h2 = 5">5. 학습 속도가 100배 빨라진다</button>
              </div>

              <div v-if="ans_h2 !== null" class="mt-2 text-start">
                <div v-if="ans_h2 === 1" class="alert alert-success mb-0 fw-bold">
                  🎉 정답! 극단적인 이상치는 중앙값(Median)보다 평균값(Mean)을 크게 끌어당겨 통계를 왜곡시킵니다.
                </div>
                <div v-else class="alert alert-danger mb-0" style="font-size: 0.85rem;">
                  <b>❌ 오답입니다.</b><br>
                  <span v-if="ans_h2 === 2">👉 이상치가 존재한다고 물리적인 데이터 용량이 사라지지는 않습니다.</span>
                  <span v-if="ans_h2 === 3">👉 이상치 하나가 추가되었다고 중앙값이 바로 최댓값으로 바뀌지는 않습니다. (중앙값은 이상치에 강함)</span>
                  <span v-if="ans_h2 === 4">👉 <b>차원의 저주</b>는 데이터의 특성(Feature, 열) 개수가 너무 많아질 때 발생하는 문제입니다.</span>
                  <span v-if="ans_h2 === 5">👉 오히려 이상치 때문에 모델이 헤매면서 학습(수렴) 속도가 느려질 수 있습니다.</span>
                </div>
              </div>
            </div>
          </div>

          <div class="card mb-4 text-left shadow-sm border-warning">
            <div class="card-body">
              <h5 class="fw-bold">Q3. 데이터의 단위(예: 키 cm, 체중 kg)가 다를 때, 숫자의 범위를 일정한 수준으로 통일시켜주는 전처리 기법은?</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_h3 === 1}" @click="ans_h3 = 1">1. 라벨링 (Labeling)</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_h3 === 2}" @click="ans_h3 = 2">2. 군집화 (Clustering)</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-success text-white': ans_h3 === 3}" @click="ans_h3 = 3">3. 스케일링 (Scaling)</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_h3 === 4}" @click="ans_h3 = 4">4. 크롤링 (Crawling)</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_h3 === 5}" @click="ans_h3 = 5">5. 토큰화 (Tokenization)</button>
              </div>

              <div v-if="ans_h3 !== null" class="mt-2 text-start">
                <div v-if="ans_h3 === 3" class="alert alert-success mb-0 fw-bold">
                  🎉 정답! 피처(Feature) 간의 크기 단위를 맞추는 정규화/표준화 작업을 통틀어 스케일링이라고 합니다.
                </div>
                <div v-else class="alert alert-danger mb-0" style="font-size: 0.85rem;">
                  <b>❌ 오답입니다.</b><br>
                  <span v-if="ans_h3 === 1">👉 <b>라벨링</b>은 학습을 위해 데이터에 정답(Target) 태그를 달아주는 작업입니다.</span>
                  <span v-if="ans_h3 === 2">👉 <b>군집화</b>는 비슷한 특성을 가진 데이터들을 묶는 비지도 학습 기법입니다.</span>
                  <span v-if="ans_h3 === 4">👉 <b>크롤링</b>은 웹사이트에서 소프트웨어로 데이터를 긁어모으는 수집 기법입니다.</span>
                  <span v-if="ans_h3 === 5">👉 <b>토큰화</b>는 문장을 의미 있는 최소 단위(단어 등)로 쪼개는 자연어 처리 기법입니다.</span>
                </div>
              </div>
            </div>
          </div>

          <div class="card mb-4 text-left shadow-sm border-warning">
            <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_h4 === 1}" @click="ans_h4 = 1">1. 과소적합 (Underfitting)</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_h4 === 2}" @click="ans_h4 = 2">2. 전이학습 (Transfer Learning)</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_h4 === 3}" @click="ans_h4 = 3">3. 일반화 (Generalization)</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-success text-white': ans_h4 === 4}" @click="ans_h4 = 4">4. 과적합 (Overfitting)</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_h4 === 5}" @click="ans_h4 = 5">5. 역전파 (Backpropagation)</button>
              </div>

              <div v-if="ans_h4 !== null" class="mt-2 text-start">
                <div v-if="ans_h4 === 4" class="alert alert-success mb-0 fw-bold">
                  🎉 정답! 훈련 데이터의 노이즈까지 과도하게(Over) 적합(Fitting)되어서 실전 응용력이 떨어지는 현상입니다.
                </div>
                <div v-else class="alert alert-danger mb-0" style="font-size: 0.85rem;">
                  <b>❌ 오답입니다.</b><br>
                  <span v-if="ans_h4 === 1">👉 <b>과소적합</b>은 너무 덜 학습되어서 기출문제조차 제대로 못 푸는 상태입니다.</span>
                  <span v-if="ans_h4 === 2">👉 <b>전이학습</b>은 이미 학습된 모델의 지식을 새로운 문제에 재사용하는 효율적인 학습 기법입니다.</span>
                  <span v-if="ans_h4 === 3">👉 <b>일반화</b>는 처음 보는 데이터에서도 모델이 좋은 성능을 내는 능력으로, 우리가 지향해야 할 '목표'입니다.</span>
                  <span v-if="ans_h4 === 5">👉 <b>역전파</b>는 출력된 오차를 거꾸로 보내며 가중치를 수정하는 신경망의 학습 알고리즘입니다.</span>
                </div>
              </div>
            </div>
          </div>

          <div class="card mb-4 text-left shadow-sm border-warning">
            <div class="card-body">
              <h5 class="fw-bold">Q5. 훈련이 완벽히 끝난 AI 모델을 실제 서비스에 배포하고, 새로운 입력값을 넣어 결과를 내놓는 단계를 뜻하는 용어는?</h5>
              <div class="list-group mt-3" style="font-size: 0.9rem;">
                <button class="list-group-item list-group-item-action" :class="{'bg-success text-white': ans_h5 === 1}" @click="ans_h5 = 1">1. 추론 (Inference)</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_h5 === 2}" @click="ans_h5 = 2">2. 데이터 증강 (Augmentation)</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_h5 === 3}" @click="ans_h5 = 3">3. 손실 함수 (Loss Function)</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_h5 === 4}" @click="ans_h5 = 4">4. 파라미터 (Parameter)</button>
                <button class="list-group-item list-group-item-action" :class="{'bg-danger text-white': ans_h5 === 5}" @click="ans_h5 = 5">5. 차원 축소 (PCA)</button>
              </div>

              <div v-if="ans_h5 !== null" class="mt-2 text-start">
                <div v-if="ans_h5 === 1" class="alert alert-success mb-0 fw-bold">
                  🎉 정답! 모델이 학습한 패턴(가중치)을 바탕으로 새로운 미지의 데이터에 대한 답을 계산(예측)하는 것을 추론이라고 합니다.
                </div>
                <div v-else class="alert alert-danger mb-0" style="font-size: 0.85rem;">
                  <b>❌ 오답입니다.</b><br>
                  <span v-if="ans_h5 === 2">👉 <b>데이터 증강</b>은 이미지 뒤집기, 자르기 등을 통해 학습 데이터의 양을 인위적으로 늘리는 기법입니다.</span>
                  <span v-if="ans_h5 === 3">👉 <b>손실 함수</b>는 모델이 예측한 값과 실제 정답 사이의 오차(틀린 정도)를 계산하는 수식입니다.</span>
                  <span v-if="ans_h5 === 4">👉 <b>파라미터(가중치)</b>는 AI가 학습을 통해 스스로 조정해 나가는 뇌 속의 시냅스 같은 수치입니다.</span>
                  <span v-if="ans_h5 === 5">👉 <b>차원 축소</b>는 너무 많은 변수(Feature)를 중요한 것만 압축해서 줄이는 기법입니다.</span>
                </div>
              </div>
            </div>
          </div>

        </div>
      </section>


      <section>
        <h2>🛠️ 1교시: 자율주행 교구 제작 (실습)</h2>
        <p>원리를 배우기 전, 우리의 손으로 직접 자율주행차의 뼈대와 감각 기관을 만들어봅시다!</p>

        <div class="row mt-4">
          <div class="col-md-5">
            <div class="card border-0 shadow h-100 bg-dark text-white d-flex align-items-center justify-content-center p-3">
              <h4 class="fw-bold text-warning mb-3">🔧 실습 목표</h4>
              <ul class="text-start" style="font-size: 0.9rem; line-height: 1.8;">
                <li>차체 조립 및 모터(구동계) 연결</li>
                <li>전방 장애물 감지 센서 부착</li>
                <li>메인보드(두뇌)와 센서 케이블 연결</li>
              </ul>
              <div class="mt-3 p-2 bg-secondary rounded text-center w-100" style="font-size: 0.8rem;">
                "이 작은 부품들이 모여 어떻게 스스로 판단하고 움직이게 될까요?"
              </div>
            </div>
          </div>
          <div class="col-md-7">
            <div class="card border-primary shadow h-100 text-start">
              <div class="card-header bg-primary text-white fw-bold">
                ⚠️ 조립 시 주의사항
              </div>
              <div class="card-body bg-light" style="font-size: 0.85rem;">
                <ol class="mb-0">
                  <li class="mb-2"><b>케이블 방향 주의:</b> 메인보드에 핀을 꽂을 때 +와 - 극성이 바뀌지 않도록 색상을 반드시 확인하세요.</li>
                  <li class="mb-2"><b>센서 위치:</b> 전방 센서가 바닥을 향하거나 하늘을 향하면 장애물을 인식할 수 없습니다. 정확히 정면을 보게 고정하세요.</li>
                  <li class="mb-2"><b>안전 제일:</b> 모터가 회전할 때 손가락이 끼이지 않도록 주의하고, 배터리는 가장 마지막 단계에 연결합니다.</li>
                </ol>
                <hr>
                <p class="text-danger fw-bold mb-0 text-center">타이머: 20분! 설명서의 순서대로 팀원과 협력하여 완성하세요.</p>
              </div>
            </div>
          </div>
        </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> 혼자서는 부족한 정보를 채워주는 '통신망' (정밀도로지도 & C-ITS)
        </div>
      </section>

      <section>
        <h2>👀 인간의 눈을 대신하는 '센서(Sensor)' 삼총사</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 align-items-center">
                <span>📷 카메라 (Camera)</span> 
                <span style="font-size: 1.2rem; transition: transform 0.3s;" :style="{ transform: showSensor[0] ? 'rotate(180deg)' : 'rotate(0deg)' }">🔻</span>
              </div>
              <div v-if="showSensor[0]" class="card-body bg-white">
                ✔️ <b>원리:</b> 인간의 눈처럼 시각 이미지 수집<br>
                ✔️ <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 align-items-center">
                <span>📡 레이더 (Radar)</span> 
                <span style="font-size: 1.2rem; transition: transform 0.3s;" :style="{ transform: showSensor[1] ? 'rotate(180deg)' : 'rotate(0deg)' }">🔻</span>
              </div>
              <div v-if="showSensor[1]" class="card-body bg-white">
                ✔️ <b>원리:</b> 전파(라디오 웨이브)를 쏴서 돌아오는 시간 측정<br>
                ✔️ <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 align-items-center">
                <span>🔦 라이다 (LiDAR)</span> 
                <span style="font-size: 1.2rem; transition: transform 0.3s;" :style="{ transform: showSensor[2] ? 'rotate(180deg)' : 'rotate(0deg)' }">🔻</span>
              </div>
              <div v-if="showSensor[2]" class="card-body bg-white">
                ✔️ <b>원리:</b> 고출력 레이저를 360도로 발사<br>
                ✔️ <b>장점:</b> 주변을 완벽한 '3D 입체 지도'로 실시간 구현. 오차 범위가 cm 단위로 초정밀함.<br>
                <hr class="my-2">
                <span class="text-danger">❌ <b>단점:</b> 장비가 엄청나게 비싸고(수백~수천만 원), 눈/비가 오면 레이저가 흩어져 바보가 됨.</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section data-background="#2c3e50" class="text-white">
        <h2 class="text-warning fw-bold">🤝 CEO의 첫 번째 결단: 어떤 센서를 달 것인가?</h2>
        <p class="mb-4" style="font-size: 0.9rem;">여러분이 자동차를 만든다면 어떤 방식을 택하겠습니까? 현재 글로벌 1위 기업들도 서로 싸우고 있습니다.</p>

        <div class="row text-start" style="font-size: 0.85rem;">
          <div class="col-md-6">
            <div class="card bg-light text-dark h-100 shadow border-0">
              <div class="card-header bg-info text-white fw-bold fs-5">🅰️ 가성비와 AI 올인 (테슬라 방식)</div>
              <div class="card-body">
                <p><b>"비싼 라이다(LiDAR)는 필요 없다! 사람도 눈(카메라) 2개로만 운전하지 않느냐!"</b></p>
                <ul>
                  <li><b>구성:</b> 저렴한 고해상도 카메라 8개 + 슈퍼컴퓨터(AI)</li>
                  <li><b>장점:</b> 원가가 저렴해 당장 수백만 대의 차에 팔 수 있음. 차가 예쁨.</li>
                  <li><b>리스크:</b> AI가 아직 사람만큼 똑똑하지 않아 가끔 치명적인 착각을 함.</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card bg-light text-dark h-100 shadow border-0">
              <div class="card-header bg-secondary text-white fw-bold fs-5">🅱️ 초정밀 센서 퓨전 (웨이모 방식)</div>
              <div class="card-body">
                <p><b>"안전이 최우선이다! 카메라, 레이더, 라이다를 전부 다 달아서 약점을 없애자!"</b></p>
                <ul>
                  <li><b>구성:</b> 카메라 + 레이더 + 천장에 도는 비싼 라이다(LiDAR)</li>
                  <li><b>장점:</b> 기계적으로 가장 안전함. 3D 지도를 완벽히 스캔함.</li>
                  <li><b>리스크:</b> 센서값만 수천만 원이라 일반인에게 차를 팔 수 없음. 지붕이 못생겨짐.</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        
        <div class="alert alert-warning mt-3 py-2 text-dark fw-bold" style="font-size: 0.85rem;">
          🗣️ 조별 토의 (3분): 우리 팀의 자율주행차는 🅰️와 🅱️ 중 어떤 방식을 선택할지 합의하세요!
        </div>
      </section>

      <section>
        <h2>🚨 NTSB 사고 조사반: 기계는 왜 속았을까?</h2>
        <p style="font-size: 0.9rem;">학생 여러분은 지금부터 NTSB(국가교통안전위원회)의 사고 조사관입니다.<br>전 세계에서 실제로 발생한 기상천외한 자율주행 오류들을 보고, <b>어떤 센서/AI가 왜 속았는지</b> 추리해 보세요.</p>

        <div class="card text-left mt-3 border-dark" style="max-height: 500px; overflow-y: auto;">
          <div class="card-header bg-danger text-white fw-bold">📂 기밀 문서: 자율주행 X-File 6선</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">File 1. 직진하던 차가 하얀색 대형 트럭을 들이받다 (2016)</span>
                <span class="badge bg-secondary" style="font-size: 0.8rem; transition: transform 0.3s;" :style="{ transform: showCrash[0] ? 'rotate(180deg)' : 'rotate(0deg)' }">원인 보기 🔻</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>
                맑고 눈부신 날, 강한 햇빛(역광)이 비치자 카메라는 트럭의 '하얀색 옆면'을 '텅 빈 밝은 하늘'로 인식해버렸습니다.
              </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">File 2. 텅 빈 도로에서 갑자기 급브레이크! '팬텀 브레이킹'</span>
                <span class="badge bg-secondary" style="font-size: 0.8rem; transition: transform 0.3s;" :style="{ transform: showCrash[1] ? 'rotate(180deg)' : 'rotate(0deg)' }">원인 보기 🔻</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">File 3. 멈춰있는 소방차와 경찰차만 골라서 들이받는다?</span>
                <span class="badge bg-secondary" style="font-size: 0.8rem; transition: transform 0.3s;" :style="{ transform: showCrash[2] ? 'rotate(180deg)' : 'rotate(0deg)' }">원인 보기 🔻</span>
              </div>
              <div v-if="showCrash[2]" class="mt-2 text-danger fw-bold bg-light p-2 rounded" style="font-size: 0.8rem;">
                👉 [센서 퓨전의 딜레마: 정지 물체 무시 알고리즘]<br>
                도로에는 정지된 물체(표지판, 쓰레기통, 주차된 차)가 너무 많습니다. 레이더가 이걸 다 피하려다간 앞으로 갈 수 없기 때문에, AI는 <b>'완전히 정지된 금속 물체는 무시하라'</b>는 규칙을 가집니다. 게다가 밤에 번쩍이는 경광등 불빛은 카메라의 눈마저 멀게 만들었습니다.
              </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">File 4. 정지(STOP) 표지판을 무시하고 시속 130km로 질주!</span>
                <span class="badge bg-secondary" style="font-size: 0.8rem; transition: transform 0.3s;" :style="{ transform: showCrash[3] ? 'rotate(180deg)' : 'rotate(0deg)' }">원인 보기 🔻</span>
              </div>
              <div v-if="showCrash[3]" class="mt-2 text-danger fw-bold bg-light p-2 rounded" style="font-size: 0.8rem;">
                👉 [AI 시각 지능의 취약점: 적대적 공격(Adversarial Attack)]<br>
                누군가 빨간 STOP 표지판에 검은색 절연 테이프 몇 조각을 붙여 낙서를 해두었습니다. 사람은 당연히 '낙서된 정지 표지판'으로 읽지만, AI는 테이프의 패턴 때문에 이를 <b>'속도제한 80마일(130km) 표지판'</b>으로 완전히 잘못 분류했습니다.
              </div>
            </li>

            <li class="list-group-item">
              <div class="d-flex align-items-center justify-content-between mt-2" @click="toggleCrash(4)" style="cursor: pointer;">
                <span class="fs-6 fw-bold text-dark">File 5. 사람이 지나가도 멈추지 않은 자율주행차 (2018)</span>
                <span class="badge bg-secondary" style="font-size: 0.8rem; transition: transform 0.3s;" :style="{ transform: showCrash[4] ? 'rotate(180deg)' : 'rotate(0deg)' }">원인 보기 🔻</span>
              </div>
              <div v-if="showCrash[4]" class="mt-2 text-danger fw-bold bg-light p-2 rounded" style="font-size: 0.8rem;">
                👉 [센서 간의 충돌과 딥러닝의 오판]<br>
                어두운 밤 무단 횡단하는 사람을 레이더는 '물체'로 감지했지만, 카메라는 어두워서 '날아다니는 쓰레기봉투'로 분류했습니다. 두 센서의 의견이 엇갈리자, AI 시스템은 치명적이게도 카메라의 손을 들어주며 브레이크를 밟지 않았습니다.
              </div>
            </li>

            <li class="list-group-item">
              <div class="d-flex align-items-center justify-content-between mt-2" @click="toggleCrash(5)" style="cursor: pointer;">
                <span class="fs-6 fw-bold text-dark">File 6. 굳지 않은 시멘트 도로로 돌진해 갇혀버린 택시 (2023)</span>
                <span class="badge bg-secondary" style="font-size: 0.8rem; transition: transform 0.3s;" :style="{ transform: showCrash[5] ? 'rotate(180deg)' : 'rotate(0deg)' }">원인 보기 🔻</span>
              </div>
              <div v-if="showCrash[5]" class="mt-2 text-danger fw-bold bg-light p-2 rounded" style="font-size: 0.8rem;">
                👉 [AI의 상식(Context) 부재]<br>
                센서는 앞이 뻥 뚫린 평평한 도로라고 인식했습니다. 사람은 주변 공사 표지판과 질감을 보고 "아, 시멘트가 덜 말랐네"라고 판단하지만, 인공지능에게는 그런 <b>'사회적 상식과 맥락'</b>을 이해하는 능력이 아직 없습니다. 
              </div>
            </li>

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

      <section>
        <h2>⚖️ 2교시: AI 윤리 딜레마 (Trolley Problem)</h2>
        <p>센서와 브레이크가 모두 고장 난 당신의 자율주행차. 피할 수 없는 사고 상황입니다.<br>이 차의 프로그래머인 당신은, <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>
          차는 현재 시속 80km로 직진 중입니다.<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;">* 서울시립과학관 AI 플레이그라운드로 이동하여 실제 상황을 시뮬레이션 해보세요.</p>
        </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>

      <section>
        <h2 class="fw-bold text-primary mb-4">📚 부록: 파이썬 기초 문법 레시피</h2>
        
        <div class="mb-4">
          <a href="https://jupyter.org/try-jupyter/lab/" target="_blank" class="btn btn-lg btn-dark shadow-lg px-5 py-3" style="border-radius: 50px;">
            <i class="fa fa-external-link-alt me-2 text-warning"></i> 주피터 온라인 실습장 바로가기
          </a>
          <p class="text-muted mt-2" style="font-size: 0.8rem;">* 별도의 설치 없이 브라우저에서 바로 파이썬 코드를 실행할 수 있습니다.</p>
        </div>

        <div style="height: 450px; overflow-y: auto; padding: 10px;">
          
          <div class="card mb-4 border-primary code-card text-left shadow-sm">
            <div class="card-header bg-primary text-white fw-bold d-flex justify-content-between align-items-center py-2">
              <span>1. 리스트(List): 데이터 바구니</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-3 bg-light">
              <p class="mb-2" style="font-size: 0.85rem;">여러 개의 데이터를 하나의 변수에 담을 때 사용합니다. 대괄호 `[ ]`를 사용해요.</p>
              <pre class="m-0"><code class="python" style="font-size: 0.8rem; background: #272822; color: #f8f8f2; display: block; padding: 15px; border-radius: 5px;">
# 우리 가게 추천 메뉴 리스트
menu = ["떡볶이", "튀김", "순대", "김밥"]

print(menu)
print(menu[0]) # 첫 번째 항목 출력
</code></pre>
            </div>
          </div>

          <div class="card mb-4 border-success code-card text-left shadow-sm">
            <div class="card-header bg-success text-white fw-bold d-flex justify-content-between align-items-center py-2">
              <span>2. for 반복문: 하나씩 꺼내기</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-3 bg-light">
              <p class="mb-2" style="font-size: 0.85rem;">리스트에 담긴 데이터를 하나씩 꺼내서 동일한 작업을 반복할 때 사용합니다.</p>
              <pre class="m-0"><code class="python" style="font-size: 0.8rem; background: #272822; color: #f8f8f2; display: block; padding: 15px; border-radius: 5px;">
# 메뉴판을 하나씩 출력해봅시다.
menu = ["떡볶이", "튀김", "순대", "김밥"]

for item in menu:
    print("오늘의 추천 메뉴는:", item)
</code></pre>
            </div>
          </div>

          <div class="card mb-2 border-danger code-card text-left shadow-sm">
            <div class="card-header bg-danger text-white fw-bold d-flex justify-content-between align-items-center py-2">
              <span>3. if-else 조건문: 의사결정</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-3 bg-light">
              <p class="mb-2" style="font-size: 0.85rem;">상황(조건)에 따라 다른 결과를 내놓을 때 사용합니다. (들여쓰기에 주의하세요!)</p>
              <pre class="m-0"><code class="python" style="font-size: 0.8rem; background: #272822; color: #f8f8f2; display: block; padding: 15px; border-radius: 5px;">
# 오늘의 매출에 따른 사장님의 기분은?
today_profit = 150000

if today_profit >= 100000:
    print("오늘은 장사가 잘 됐네! 퇴근하고 치킨 고?")
else:
    print("내일은 더 열심히 해보자. 파이팅!")
</code></pre>
            </div>
          </div>

        </div>
      </section>

      <section>
        <h2 class="fw-bold text-info mb-4">📊 CODAP을 파이썬으로! (데이터 분석 코딩)</h2>
        <p class="text-muted" style="font-size: 0.9rem;">마우스 클릭으로 하던 데이터 분석, 이제 <b>파이썬 코드</b>로 더 자유롭게 해봅시다!</p>

        <div class="row mt-3">
          <div class="col-md-7">
            <div class="card border-info code-card text-left shadow-sm">
              <div class="card-header bg-info text-white fw-bold d-flex justify-content-between align-items-center py-2">
                <span>🎨 도자기 온도 분석기 (v1.0)</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">
                <pre class="m-0"><code class="python" style="font-size: 0.7rem; background: #272822; color: #f8f8f2; display: block; padding: 15px; height: 420px; overflow-y: auto;">
import pandas as pd
import matplotlib.pyplot as plt

# [준비] 도자기 온도 데이터 (내가 만든 리스트)
temp_list = [1050, 1180, 1290, 1320, 1250, 1310, 1100, 1350, 1280, 1400, 1150]

# [조립] 숫자들에 'Temperature'라는 이름표를 붙여 표(DataFrame)로 만들어요
df = pd.DataFrame({'Temperature': temp_list})

plt.figure(figsize=(10, 5))

# [그리기 1] 전체적인 온도 흐름을 선 그래프로 그려요
plt.plot(df.index, df['Temperature'], color='skyblue', marker='o', label='Normal Temp')

# [그리기 2] 1300도가 넘는 곳만 찾아서 빨간 점을 찍어요 (이상치 강조)
x = 0  # 처음 시작하는 칸의 번호표는 0번!
for temp in temp_list:
    if temp > 1300:
        # 1300도가 넘으면 지금 칸(x)에 빨간 점을 찍어라!
        plt.scatter(x, temp, color='red', s=100, zorder=5)
    
    x = x + 1  # 다음 칸 확인을 위해 번호표 숫자를 키워요

# [마무리] 기준선과 제목 넣기
plt.axhline(y=1300, color='orange', linestyle='--')
plt.title('Pottery Temperature Check (List Version)')
plt.show()
</code></pre>
              </div>
            </div>
          </div>

          <div class="col-md-5 text-left">
            <div class="card mb-3 border-0 bg-light shadow-sm">
              <div class="card-body p-3">
                <h6 class="fw-bold text-primary mb-2"><i class="fa fa-book me-1"></i> 도구 설명</h6>
                <ul class="ps-3 mb-0" style="font-size: 0.8rem; line-height: 1.6;">
                  <li><b>Pandas(판다스):</b> 파이썬계의 '엑셀'. 데이터를 표 형태로 예쁘게 정리하고 요리해주는 라이브러리입니다.</li>
                  <li><b>Matplotlib(맷플롯립):</b> 파이썬계의 '화가'. 데이터를 선, 막대, 점 그래프로 시각화해줍니다.</li>
                </ul>
              </div>
            </div>

            <div class="card border-warning shadow-sm">
              <div class="card-header bg-warning text-dark fw-bold py-1" style="font-size: 0.85rem;">
                🔥 AI에게 이렇게 명령해보세요!
              </div>
              <div class="card-body p-3 bg-white">
                <p class="text-muted italic mb-2" style="font-size: 0.75rem;">주피터에 코드를 붙여넣은 뒤, AI에게 다음 미션을 시켜보세요.</p>
                <div class="alert alert-secondary p-2 mb-2" style="font-size: 0.8rem; cursor: pointer;" @click="copyText('위의 코드에서 데이터(temp_list)에 1500도를 2개 더 추가하고 그래프 제목을 한글로 바꿔줘.')">
                  "데이터를 더 추가하고 제목을 바꿔줘"
                </div>
                <div class="alert alert-secondary p-2 mb-2" style="font-size: 0.8rem; cursor: pointer;" @click="copyText('1300도가 아니라 1200도가 넘으면 파란색 별 모양으로 표시하도록 코드를 수정해줘.')">
                  "이상치 기준 온도와 모양을 바꿔줘"
                </div>
                <div class="alert alert-secondary p-2 mb-0" style="font-size: 0.8rem; cursor: pointer;" @click="copyText('선 그래프 말고 막대 그래프(bar chart)로 바꾸고, 막대 색깔은 초록색으로 해줘.')">
                  "그래프 종류와 색깔을 바꿔줘"
                </div>
              </div>
            </div>
            <p class="text-center mt-2 text-muted" style="font-size: 0.7rem;">(문구를 클릭하면 복사됩니다)</p>
          </div>
        </div>
      </section>
      <section>
        <h2 class="fw-bold text-success mb-4">📂 CSV 자료도 척척! (파일 데이터 분석)</h2>
        
        <div class="row">
          <div class="col-md-5 text-left">
            
            <div class="card border-0 bg-light shadow-sm mb-3">
              <div class="card-body p-3">
                <h6 class="fw-bold text-success mb-2"><i class="fa fa-file-csv me-1"></i> CSV란 무엇일까요?</h6>
                <p style="font-size: 0.8rem; line-height: 1.5;" class="mb-0">
                  <b>Comma-Separated Values</b>의 약자로, 데이터들을 쉼표(,)로 구분해서 저장한 아주 가벼운 표 파일입니다. 엑셀이나 주피터 노트북 어디서든 열리는 '데이터계의 공용어'예요!
                </p>
              </div>
            </div>

            <div class="card border-success shadow-sm mb-3">
              <div class="card-body text-center py-3">
                <p class="small fw-bold mb-2">Step 1. 연습용 데이터 받기</p>
                <button @click="downloadPotteryCsv" class="btn btn-success btn-sm fw-bold px-4 shadow-sm">
                  <i class="fa fa-download me-2"></i> pottery.csv 다운로드
                </button>
              </div>
            </div>

            <div class="card border-info shadow-sm mb-2" style="background-color: #f0faff;">
              <div class="card-body p-3">
                <h6 class="fw-bold text-info mb-2"><i class="fa fa-cloud-upload-alt me-1"></i> Step 2. 주피터 온라인에 올리기</h6>
                <ol class="ps-3 mb-0" style="font-size: 0.8rem; line-height: 1.6;">
                  <li>주피터 화면 왼쪽 파일 목록 창에서 <b>[↑] (상향 화살표)</b> 아이콘을 클릭하세요.</li>
                  <li>방금 다운로드한 <b>pottery.csv</b> 파일을 선택합니다.</li>
                  <li>목록에 파일 이름이 나타나면 준비 끝!</li>
                </ol>
                <div class="mt-2 text-danger fw-bold" style="font-size: 0.75rem;">
                  * 주의: 파일을 올리지 않으면 아래 코드가 에러 납니다!
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-7">
            <div class="card border-dark code-card text-left shadow-sm">
              <div class="card-header bg-dark text-white fw-bold d-flex justify-content-between align-items-center py-2">
                <span>🐍 CSV 자동 분석 스크립트</span>
                <button @click="copyCode($event)" class="btn btn-sm btn-outline-light py-0 px-2 fw-bold copy-btn">복사</button>
              </div>
              <div class="card-body p-0">
                <pre class="m-0"><code class="python" style="font-size: 0.7rem; background: #272822; color: #f8f8f2; display: block; padding: 15px; height: 450px; overflow-y: auto;">
import pandas as pd
import matplotlib.pyplot as plt

# [불러오기] csv 파일을 읽어서 바로 표(df)로 만들어요
# 파일 이름이 업로드한 이름과 정확히 같아야 합니다!
df = pd.read_csv('pottery.csv') 

# [준비] 표 안에 있는 'Temperature' 칸의 숫자들만 리스트로 뽑아요
temp_list = df['Temperature'].tolist()

plt.figure(figsize=(10, 5))

# [그리기 1] 전체 선 그래프 그리기
plt.plot(df.index, temp_list, color='skyblue', marker='o', label='Normal Temp')

# [그리기 2] 1300도 이상 구간 빨간색 점 강조
x = 0
for temp in temp_list:
    if temp > 1300:
        plt.scatter(x, temp, color='red', s=100, zorder=5)
    x = x + 1

# [마무리] 기준선과 제목 넣기
plt.axhline(y=1300, color='orange', linestyle='--')
plt.title('Pottery Temperature Check (CSV Version)')
plt.show()
      </code></pre>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section>
        <h2 class="fw-bold text-warning mb-4">🚗 인간자율주행차를 움직여봅시다</h2>
        <p class="text-muted" style="font-size: 0.9rem;">자율주행차의 두뇌는 쉬지 않고 작동해야 합니다. 흐름을 제어하는 핵심 문법을 알아봅시다!</p>

        <div style="height: 500px; overflow-y: auto; padding: 10px;">
          
          <div class="row g-3 mb-4 text-left">
            <div class="col-md-4">
              <div class="card h-100 border-warning shadow-sm">
                <div class="card-header bg-warning text-dark fw-bold py-1" style="font-size: 0.8rem;">while True</div>
                <div class="card-body p-2" style="font-size: 0.75rem;">
                  <b>"무한 가동"</b><br>전원을 끄기 전까지 내부 코드를 무한히 반복 실행합니다.
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card h-100 border-success shadow-sm">
                <div class="card-header bg-success text-white fw-bold py-1" style="font-size: 0.8rem;">continue</div>
                <div class="card-body p-2" style="font-size: 0.75rem;">
                  <b>"정상 주행 유지"</b><br>아래 코드를 무시하고 즉시 루프의 처음으로 돌아갑니다.
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card h-100 border-danger shadow-sm">
                <div class="card-header bg-danger text-white fw-bold py-1" style="font-size: 0.8rem;">break</div>
                <div class="card-body p-2" style="font-size: 0.75rem;">
                  <b>"비상 정지/탈출"</b><br>반복문을 즉시 종료하고 루프 밖으로 빠져나갑니다.
                </div>
              </div>
            </div>
          </div>

          <div class="card border-dark code-card text-left shadow-sm">
            <div class="card-header bg-dark text-white fw-bold d-flex justify-content-between align-items-center py-2">
              <span>🐍 자율주행 제어 시스템 예제 (복사용)</span>
              <button @click="copyCode($event)" class="btn btn-sm btn-outline-light py-0 px-2 fw-bold copy-btn">복사</button>
            </div>
            <div class="card-body p-0">
              <pre class="m-0"><code class="python" style="font-size: 1rem; background: #272822; color: #f8f8f2; display: block; padding: 20px; height: 450px; overflow-y: auto;">
distance = 100 # 장애물까지의 거리 (m)

while True:
    print("현재 거리:" + str(distance))
    if distance == 0:
        print("🚩 목적지 도착! 엔진 정지.")
        break  # 루프 탈출
    if distance > 50:
        print("🚀 가속합니다.")
        distance = distance - 20
        continue  # 다시 처음으로 돌아가 거리 확인
    print("⚠️ 서행하며 장애물을 피합니다.")
    distance = distance - 10
</code></pre>
            </div>
          </div>
        </div>
      </section>

      <section>
        <h2 class="fw-bold text-warning mb-4">🚗 인간자율주행차 알고리즘 Mission</h2>
        <h3 class="fw-bold text-danger blink-anim" style="font-size: 1.5rem; line-height: 1;">🚨 설문 꼭 참여해주세요! 🚨</h3>
        <p class="text-muted" style="font-size: 0.9rem;">아래 설계도를 완성해보세요. 빈칸에 들어갈 코드는 무엇일까요?</p>

        <div style="height: 600px; overflow-y: auto; padding: 10px;">
          
          <div class="editor-window shadow-lg mb-5" style="background: #1e1e1e; border-radius: 12px; overflow: hidden; border: 1px solid #333;">
            <div class="editor-header" style="background: #323233; padding: 12px 20px; display: flex; align-items: center; gap: 10px;">
              <span style="width:12px; height:12px; background:#ff5f56; border-radius:50%"></span>
              <span style="width:12px; height:12px; background:#ffbd2e; border-radius:50%"></span>
              <span style="width:12px; height:12px; background:#27c93f; border-radius:50%"></span>
              <span style="color: #969696; font-family: 'Fira Code', monospace; font-size: 0.85rem; margin-left: 10px;">autonomous_logic.py</span>
            </div>
            
            <div class="editor-body text-left p-4" style="font-family: 'Fira Code', 'Courier New', monospace; color: #d4d4d4; font-size: 1.15rem; line-height: 2.2; text-align: left;">
              <div v-pre>
              
              distance = 1000 
              <span style="color: #6a9955;"># 목적지까지 거리 설정</span><br>
              sensor = 1000 
              <span style="color: #6a9955;"># 초기 센서 거리 설정</span><br>



              <span style="color: #ce9178; font-weight: bold;">________ ________</span>:
              <span style="color: #6a9955;"># [1] 무한 루프를 시작하는 명령은?</span><br>


                  
                  <span style="color: #c586c0;">&nbsp;&nbsp;&nbsp;if</span> <span style="color: #ce9178;">________ ________ ________</span>:
                  <span style="color: #6a9955;"># [2] 센서거리가 30m 보다 가까워지면 속도를 줄여야합니다!</span><br>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print("⚠️ 장애물 주의")<br>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;distance = distance - 10<br>


                  
                  <span style="color: #c586c0;">&nbsp;&nbsp;&nbsp;if</span> <span style="color: #ce9178;">________ ________ ________</span>:
                  <span style="color: #6a9955;"># [3] 센서거리가 50m보다 멀리 있다면 가속하고 처음으로!</span><br>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print("🚀 쾌속 주행!")<br>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;distance = distance - 20<br>

                  <span style="color: #c586c0;">&nbsp;&nbsp;&nbsp;if</span> <span style="color: #ce9178;">________ ________ ________</span>:
                  <span style="color: #6a9955;"># [3] 목적지에 도착하면 멈춤!</span><br>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;print("🚩 목적지 도착!")<br>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">________</span><br>
                      


                  
              </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 {
      // 선호도 및 의사결정 미션
      preference_score: 5,
      decision_x: null,
      decision_y: null,
      science_steps: [
        { id: 1, step: "Step 1", title: "날짜-총매출 이상치 제거" },
        { id: 2, step: "Step 2", title: "날짜-방문객수 이상치 제거" },
        { id: 3, step: "Step 3", title: "방문객수-총매출 그래프 확인" },
      ],
      // 1차시 복습 OX 퀴즈 상태 (추가된 부분)
      ox_q1: null, ox_q2: null, ox_q3: null, ox_q4: null,

      // 고등용 퀴즈 상태 (1~5번)
      ans_h1: null, ans_h2: null, ans_h3: null, ans_h4: null, ans_h5: null,

      // === AI 파이프라인 미니게임 상태 변수 ===
      pipe_step: 0, 
      pipe_phones: [],
      pipe_outliers_left: 2,
      pipe_preprocess_level: 0, // 0: 원본, 1: 스케일링, 2: 인코딩
      pipe_epoch: 0,
      pipe_loss: 2.500,
      pipe_test_state: 0, // 0: 대기, 1: 매물등장, 2: 스캐닝, 3: 결과출력
      pipe_is_training: false,
      pipe_feedback_msg: "",
      pipe_feedback_type: "",

      // 드롭다운 및 아코디언 상태 관리 변수들
      showPromptHint: false,
      showTrap: [false, false, false, false, false, false], 
      showAnomaly: [false, false, false, false, false, false], 
      showMission: [false, false, false],
      showPivot: [false, false, false],
      showVideoDesc: [false, false],
      showSensor: [false, false, false],
      showCrash: [false, false, 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 인스턴스가 초기화되지 않았습니다.");
      }
    },

    // === AI 팩토리 타이쿤 게임 로직 ===
    pipeStart() {
      // (기존 코드와 동일하되, 객체 안에 errorAnim: false 가 추가되었습니다)
      this.pipe_step = 1;
      this.pipe_epoch = 0;
      this.pipe_loss = 2.500;
      this.pipe_outliers_left = 2;
      this.pipe_is_training = false;
      this.pipe_preprocess_level = 0;
      this.pipe_test_state = 0;
      this.pipe_feedback_msg = "";
      
      const normalPool = [
        { title: '아이폰 14 화이트', icon: 'fa-mobile-alt', bat: '88%', numBat: 0.88, cond: 'B급', vecCond: '[0,1,0]', price: '45만원', numPrice: 45 },
        { title: '아이폰 14 프로 (S급)', icon: 'fa-mobile-alt', bat: '100%', numBat: 1.00, cond: 'S급', vecCond: '[1,0,0]', price: '80만원', numPrice: 80 },
        { title: '아이폰 14 블루 사용감ㅇ', icon: 'fa-mobile-alt', bat: '82%', numBat: 0.82, cond: 'C급', vecCond: '[0,0,0]', price: '35만원', numPrice: 35 },
        { title: '아이폰 14 팝니다', icon: 'fa-mobile-alt', bat: '92%', numBat: 0.92, cond: 'A급', vecCond: '[0,0,1]', price: '60만원', numPrice: 60 }
      ];
      
      const outlierPool = [
        { title: '아이폰 14 투명 젤리 케이스', icon: 'fa-box', bat: '-', numBat: 0, cond: '미개봉', vecCond: '[1,0,0]', price: '5천원', numPrice: 0.5, isOutlier: true, hint: '케이스 가격을 스마트폰 시세로<br>학습하면 안 돼요!' },
        { title: '아이폰 14 급처 선입금만', icon: 'fa-exclamation-triangle', bat: '100%', numBat: 1.00, cond: 'S급', vecCond: '[1,0,0]', price: '5만원', numPrice: 5, isOutlier: true, hint: '명백한 사기 매물입니다!<br>평균 시세가 박살납니다.' },
        { title: '아이폰 14 (침수/부품용)', icon: 'fa-water', bat: '0%', numBat: 0, cond: '폐급', vecCond: '[-1,-1,-1]', price: '1만원', numPrice: 1, isOutlier: true, hint: '메인보드가 고장 난 부품용 폰은<br>정상 시세 예측에 방해됩니다.' }
      ];

      const shuffledNormals = normalPool.sort(() => 0.5 - Math.random()).slice(0, 3).map(p => ({...p, isOutlier: false, removed: false, errorAnim: false}));
      const shuffledOutliers = outlierPool.sort(() => 0.5 - Math.random()).slice(0, 2).map(p => ({...p, removed: false, showHint: false, errorAnim: false}));
      
      let combined = [...shuffledNormals, ...shuffledOutliers];
      combined.sort(() => 0.5 - Math.random());
      
      combined.forEach((item, index) => { item.id = index + 1; });
      this.pipe_phones = combined;
      
      setTimeout(() => { this.pipe_step = 2; }, 2000);
    },
    
    // 피드백 팝업 제어 함수 (새로 추가)
    showPipeFeedback(type, msg) {
      this.pipe_feedback_type = type;
      this.pipe_feedback_msg = msg;
      // 광클 방지: 기존 타이머가 있으면 지우고 새로 2초 세팅
      if (this.feedbackTimer) clearTimeout(this.feedbackTimer);
      this.feedbackTimer = setTimeout(() => {
        this.pipe_feedback_msg = "";
      }, 2500);
    },
    pipeClickOutlier(phone) {
      if (this.pipe_step === 2) {
        if (phone.isOutlier && !phone.removed) {
          // 정답 처리: 애니메이션 팝업 호출
          this.showPipeFeedback('success', phone.hint);
          phone.removed = true;
          this.pipe_outliers_left--;
          
          // 이상치 2개를 다 지우면 하단의 [클리닝 완료] 버튼이 활성화됩니다!
          // (이전에 있던 불필요한 자동 넘김 에러 코드 삭제됨)
          
        } else if (!phone.isOutlier) {
          // 오답 처리: 카드 흔들림 애니메이션 + 에러 팝업
          phone.errorAnim = true;
          setTimeout(() => phone.errorAnim = false, 500);
          
          this.showPipeFeedback('error', "이건 지우면 안 되는<br><b>멀쩡한 정상 매물</b>입니다!");
          
          // 힌트 제공 (진짜 이상치가 흔들림)
          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++;
      }
    },
    pipeTrain() {
      if (this.pipe_step === 3 && this.pipe_preprocess_level === 2) {
        this.pipe_step = 4;
      }
      
      if (this.pipe_step === 4 && this.pipe_epoch < 100) {
        // 학습 애니메이션 시작
        this.pipe_is_training = true;
        
        // 4번 누르면 100이 되도록 25씩 증가
        this.pipe_epoch += 25; 
        
        // 오차가 기하급수적으로 줄어드는 모습을 연출 (2.5 -> 0.042)
        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; // 최종 학습 완료 오차
        }

        // 0.6초 뒤에 애니메이션 상태 끄기 (데이터 점 반짝임 멈춤)
        setTimeout(() => {
          this.pipe_is_training = false;
        }, 600);
      }
    },
    pipeNext(step) {
      this.pipe_step = step;
    },
    pipeTestInfer() {
      this.pipe_test_state = 1; // 새 매물 등장 애니메이션
      
      setTimeout(() => {
        this.pipe_test_state = 2; // 스캐너 진입 및 분석 중
        
        setTimeout(() => {
          this.pipe_test_state = 3; // 결과 팝업
        }, 2000); // 2초간 분석 애니메이션
      }, 1000);
    },
    pipeReset() {
      this.pipe_step = 0;
    },
    // 부록 pandas샘플 CSV 생성 및 다운로드
    downloadPotteryCsv() {
    const csvContent = "ID,Temperature\n1,1050\n2,1180\n3,1290\n4,1320\n5,1250\n6,1310\n7,1100\n8,1350\n9,1280\n10,1400\n11,1150";
    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", "pottery.csv");
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    },
    // 프롬프트 마법 기계 실행 함수
    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);
    },

    // ======== 레이아웃 깨짐(잘림) 방지용 토글 함수들 ========
    togglePromptHint() {
      this.showPromptHint = !this.showPromptHint;
      this.$nextTick(() => { 
        if (this.deck) this.deck.layout(); // 인스턴스의 layout() 호출
      });
    },
    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() 호출
      });
    },
    toggleVideoDesc(index) {
      this.showVideoDesc[index] = !this.showVideoDesc[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');
      
      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);
      });
    },

    // 비밀 장부 다운로드 로직 (고등과정 원본 9개 컬럼 유지)
    async downloadData(type) {
      const headers = ["ID", "날짜", "기온(℃)", "방문객수", "결제건수", "총매출액(원)", "환불건수", "배달수수료(원)", "순이익(원)"];
      
      const dataRows = [
        "1,2026-07-01,28,150,140,560000,2,20000,250000",
        "2,2026-07-02,29,145,135,540000,1,15000,240000",
        "3,2026-07-03,31,160,150,600000,3,30000,240000",
        "4,2026-07-04,30,155,148,592000,0,25000,270000",
        "5,2026-07-05,28,150,140,55000000,2,20000,54000000", // Trap 1: 5천5백만원 오타
        "6,2026-07-06,27,130,120,480000,1,10000,210000",
        "7,2026-07-07,29,140,130,520000,2,20000,230000",
        "8,2026-07-08,32,180,170,680000,4,40000,310000",
        "9,2026-07-09,33,300,0,0,0,0,-150000",              // Trap 2: 키오스크 먹통
        "10,2026-07-10,31,160,150,600000,1,25000,280000",
        "11,2026-07-11,28,145,135,540000,2,20000,240000",
        "12,2026-07-12,27,135,125,500000,0,15000,220000",
        "13,2026-07-13,26,120,110,440000,1,10000,190000",
        "14,2026-07-14,30,1500,1400,5600000,10,200000,2500000", // Trap 4: 방문객 1500명 위반
        "15,2026-07-15,31,170,160,640000,2,30000,290000",
        "16,2026-07-16,32,180,170,680000,3,40000,310000",
        "17,2026-07-17,29,150,140,560000,1,20000,250000",
        "18,2026-07-18,28,140,130,520000,2,15000,230000",
        "19,2026-07-19,-40,135,125,500000,0,15000,220000",    // Trap 3: 기온 -40도
        "20,2026-07-20,29,145,135,540000,1,20000,240000",
        "21,2026-07-21,30,160,150,600000,2,25000,250000",
        "22,2026-07-22,31,165,155,620000,1,30000,280000",
        "23,2026-07-23,30,280,270,1000000,3,600000,50000",   // Trap 5: 배달수수료 폭탄
        "24,2026-07-24,28,140,130,520000,1,15000,230000",
        "25,2026-07-25,27,130,120,480000,0,10000,210000",
        "26,2026-07-26,28,150,140,560000,85,20000,-150000",  // Trap 6: 환불 85건 사태
        "27,2026-07-27,29,145,135,540000,2,20000,240000",
        "28,2026-07-28,30,155,145,580000,1,25000,260000",
        "29,2026-07-29,32,30,25,100000,0,5000,-50000",       // Trap 7: 반값 매장 오픈 (30명)
        "30,2026-07-30,30,160,150,600000,2,25000,280000",
        "31,2026-07-31,29,145,135,540000,1,20000,250000",
        "32,2026-08-01,28,150,140,5000000,2,20000,4800000",  // Trap 1(Double): 5백만 오타
        "33,2026-08-02,30,155,145,580000,1,25000,260000",
        "34,2026-08-03,31,165,155,620000,2,30000,290000",
        "35,2026-08-04,30,160,150,600000,60,25000,-100000",  // Trap 6(Double): 환불 60건
        "36,2026-08-05,28,140,130,520000,1,15000,230000",
        "37,2026-08-06,27,135,125,500000,0,10000,220000",
        "38,2026-08-07,45,130,120,480000,1,10000,200000",    // Trap 3(Double): 기온 45도 오류
        "39,2026-08-08,30,150,140,560000,2,20000,250000",
        "40,2026-08-09,31,160,150,600000,1,25000,270000",
        "41,2026-08-10,29,250,0,0,0,0,-150000",              // Trap 2(Double): 키오스크 2차장애
        "42,2026-08-11,28,145,135,540000,2,20000,240000",
        "43,2026-08-12,27,140,130,520000,0,15000,230000",
        "44,2026-08-13,29,150,140,560000,1,20000,250000",
        "45,2026-08-14,31,1800,1700,6800000,15,300000,3000000", // Trap 4(Double): 방문객 1800명
        "46,2026-08-15,32,175,165,660000,2,35000,300000",
        "47,2026-08-16,30,160,150,600000,1,25000,270000",
        "48,2026-08-17,31,310,300,1200000,4,700000,80000",   // Trap 5(Double): 배달수수료 70만
        "49,2026-08-18,29,155,145,580000,2,20000,260000",
        "50,2026-08-19,30,25,20,80000,0,5000,-60000"         // Trap 7(Double): 경쟁사 특가세일
      ];
      
      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);
          
          // 고등학생용 9개 컬럼에 맞게 엑셀 열 너비 조정
          ws['!cols'] = [{wch: 8}, {wch: 12}, {wch: 10}, {wch: 10}, {wch: 10}, {wch: 15}, {wch: 10}, {wch: 15}, {wch: 15}];
          
          XLSX.utils.book_append_sheet(wb, ws, "StoreData");
          XLSX.writeFile(wb, "store_data_analytics.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", "store_data_codap.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);
		});
  },
  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 파이프라인 미니게임 애니메이션 === */
.transition-all {
  transition: all 0.5s ease-in-out;
}
.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); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.blink-anim {
  animation: blinker 1s linear infinite;
}
@keyframes blinker {
  50% { opacity: 0.3; }
}
.wobble-anim {
  animation: wobble 2s infinite;
}
@keyframes wobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}
.slide-up-anim {
  animation: slideUp 0.5s ease-out forwards;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.brain-anim {
  transition: color 0.3s ease, transform 0.1s ease;
}
.math-float-anim {
  animation: mathFloat 3s ease-in-out infinite;
}
@keyframes mathFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}
.slide-in-left {
  animation: slideInLeft 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideInLeft {
  from { transform: translateX(-100px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.pop-in-anim {
  animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes popIn {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.pulse-fast {
  animation: pulseFast 0.5s infinite alternate;
}
@keyframes pulseFast {
  from { transform: scale(1); filter: brightness(1); }
  to { transform: scale(1.1); filter: brightness(1.5); }
}

/* AI 스캐너 레이저 애니메이션 */
.ai-scanner-box {
  overflow: hidden;
}
.scanner-laser {
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: rgba(0, 255, 255, 0.8);
  box-shadow: 0 0 15px 5px rgba(0, 255, 255, 0.5);
  animation: scanLaser 1.5s infinite ease-in-out;
}
@keyframes scanLaser {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.border-dashed {
  border-style: dashed !important;
}
/* 틀렸을 때 카드가 덜덜 떨리는 애니메이션 */
.error-shake {
  animation: errorShake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes errorShake {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-8px, 0, 0); }
  40%, 60% { transform: translate3d(8px, 0, 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>