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

      <section>
        <h2>🚀 4차산업 진로체험: 동물 영웅의 30초 대작전</h2>
        <table class="table caption-top table-bordered card-1 p-3 shadow-sm" style="font-size: 0.8rem;">
          <caption class="mb-1 text-muted" style="font-size: 0.85rem;">초등학교 5~6학년 대상 (총 3차시 / 240분 분량)</caption>
          <thead class="table-light text-center">
            <tr>
              <th width="12%">구분</th>
              <th width="13%">교시</th>
              <th width="55%">학습 주제</th>
              <th width="10%">소요시간</th>
              <th width="10%">이동</th>
            </tr>
          </thead>
          <tbody>
            <tr class="table-info">
              <td rowspan="2" class="align-middle text-center fw-bold">1차시<br>(기획과 디자인)</td>
              <td class="align-middle text-center">1교시</td>
              <td><div class="py-1 fw-bold">AI 기획자 길들이기 (AI 리터러시와 제약조건)</div></td>
              <td class="align-middle text-center">40분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-primary" @click="goSlide(1)" style="cursor:pointer"></i></td>
            </tr>
            <tr class="border-bottom-bold">
              <td class="align-middle text-center">2교시</td>
              <td><div class="py-1 fw-bold">파이썬 터틀로 주인공 그리기 (바이브 코딩)</div></td>
              <td class="align-middle text-center">40분</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="table-success">
              <td rowspan="3" class="align-middle text-center fw-bold">2차시<br>(게임 개발)</td>
              <td class="align-middle text-center">1교시</td>
              <td><div class="py-1 fw-bold">게임의 뼈대 세우기 (배경, 주인공, 발사체, 특별식)</div></td>
              <td class="align-middle text-center">40분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-success" @click="goSlide(7)" style="cursor:pointer"></i></td>
            </tr>
            <tr>
              <td class="align-middle text-center">2교시</td>
              <td><div class="py-1 fw-bold">게임의 완성 (적군, 카운트다운, 종류 확장)</div></td>
              <td class="align-middle text-center">30분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-success" @click="goSlide(9)" style="cursor:pointer"></i></td>
            </tr>
            <tr class="border-bottom-bold">
              <td class="align-middle text-center">2교시</td>
              <td><div class="py-1 fw-bold text-danger">🚨 부록: 선생님을 위한 30명 통제 생존 가이드</div></td>
              <td class="align-middle text-center">10분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-danger" @click="goSlide(11)" style="cursor:pointer"></i></td>
            </tr>

            <tr class="table-warning">
              <td rowspan="5" class="align-middle text-center fw-bold">3차시<br>(자율주행과 AI)</td>
              <td class="align-middle text-center">1교시</td>
              <td><div class="py-1 fw-bold">뚝딱뚝딱! 자율주행 자동차 조립 및 원리</div></td>
              <td class="align-middle text-center">25분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-warning" @click="goSlide(13)" style="cursor:pointer"></i></td>
            </tr>
            <tr>
              <td class="align-middle text-center">1교시</td>
              <td><div class="py-1 fw-bold">자동차의 세 가지 마법의 눈 (센서)</div></td>
              <td class="align-middle text-center">15분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-warning" @click="goSlide(16)" style="cursor:pointer"></i></td>
            </tr>
            <tr>
              <td class="align-middle text-center">2교시</td>
              <td><div class="py-1 fw-bold">X-파일: 똑똑한 AI는 왜 사고를 냈을까?</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(17)" style="cursor:pointer"></i></td>
            </tr>
            <tr>
              <td class="align-middle text-center">2교시</td>
              <td><div class="py-1 fw-bold">트롤리 딜레마: 자율주행 자동차의 선택은?</div></td>
              <td class="align-middle text-center">15분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-warning" @click="goSlide(18)" style="cursor:pointer"></i></td>
            </tr>
            <tr class="border-bottom-bold">
              <td class="align-middle text-center">2교시</td>
              <td><div class="py-1 fw-bold">안전한 자율주행 선언문: 우리의 약속 발표</div></td>
              <td class="align-middle text-center">10분</td>
              <td class="align-middle text-center"><i class="fa fa-share text-warning" @click="goSlide(20)" style="cursor:pointer"></i></td>
            </tr>
          </tbody>
        </table>
      </section>

      <section>
        <h2>🤔 1차시: AI 기획자 길들이기 (세계관 부여)</h2>
        <p>여러분은 오늘 단순한 게이머가 아니라 <b>'게임 개발 회사'의 대표</b>입니다!<br>우리 회사의 엉뚱한 AI 비서가 짜온 기획을 다듬어주세요.</p>

        <div class="card bg-dark text-white mb-3 shadow text-left mx-auto" style="max-width: 800px;">
          <div class="card-header bg-danger text-white fw-bold py-2">
            🚨 3가지 절대 법칙 (목표를 명확하게!)
          </div>
          <div class="card-body p-3" style="font-size: 0.95rem;">
            <p class="mb-2 text-warning fw-bold">"대표님, 게임을 너무 복잡하게 만들면 오늘 안에 완성을 못해요! 아래 3가지 조건만 지켜주세요."</p>
            <ol class="mb-0 px-3">
              <li class="mb-2">주인공은 반드시 <b>동물</b>일 것.</li>
              <li class="mb-2"><b>발사체</b>를 쏴서 적군을 퇴치할 것.</li>
              <li class="mb-0">동물에게 어울리는 <b>음식</b>을 수집할 것.</li>
            </ol>
          </div>
        </div>
        <p class="text-primary fw-bold" style="font-size: 0.9rem;">👉 자, 이제 AI 비서가 제안하는 기획안을 비판적으로 평가해 봅시다!</p>
      </section>

      <section>
        <h2>🥊 AI 트랩 Round 1: 주인공과 그래픽의 함정</h2>
        
        <div class="card text-left mt-3 border-dark">
          <div class="card-header bg-primary text-white fw-bold d-flex justify-content-between">
            <span>🤖 AI 비서의 터무니없는 제안</span>
          </div>
          <div class="card-body bg-light">
            <p class="fst-italic text-dark mb-0 fw-bold">"대표님! 주인공은 털이 흩날리는 3D 입체 고양이로 하고, 점프, 구르기, 2단 변신 기술을 넣읍시다. 언리얼 엔진을 쓰면 완벽합니다!"</p>
          </div>
        </div>

        <div class="mt-4" @click="toggleAITrap(0)" style="cursor: pointer;">
          <div class="d-inline-block bg-warning text-dark px-4 py-2 rounded-pill fw-bold shadow-sm mb-3 hover-scale">
            아이들의 반박 유도 (여기를 클릭하세요!) 🖱️
          </div>
          
          <div v-if="showAITrap[0]" class="card border-warning shadow-sm text-left">
            <div class="card-body p-3" style="font-size: 0.9rem;">
              <ul class="mb-2">
                <li class="text-danger fw-bold">"메이크코드의 그리기 화면을 보세요! 우리는 두꺼운 네모 픽셀(점)로 찍어야 해서 화려한 3D는 불가능해요!"</li>
                <li class="text-danger fw-bold">"40분 만에 코딩해야 하는데 변신 기술은 무리예요. 상하좌우 이동만 해야 해요!"</li>
              </ul>
              <hr>
              <p class="mb-0 text-success fw-bold">✅ 결론 도출: 주인공은 얼굴 특징(귀, 코)만 살린 단순한 2D 픽셀 동물로 타협!</p>
            </div>
          </div>
        </div>
      </section>

      <section>
        <h2>🥊 AI 트랩 Round 2: 특별식과 발사체의 함정</h2>
        
        <div class="card text-left mt-3 border-dark">
          <div class="card-header bg-primary text-white fw-bold d-flex justify-content-between">
            <span>🤖 AI 비서의 터무니없는 제안</span>
          </div>
          <div class="card-body bg-light">
            <p class="fst-italic text-dark mb-0 fw-bold">"강아지 주인공을 위해 특별식 10종류(마라탕, 탕후루 등)를 섞어 넣고, 발사체는 화려한 유도 미사일을 씁시다!"</p>
          </div>
        </div>

        <div class="mt-4" @click="toggleAITrap(1)" style="cursor: pointer;">
          <div class="d-inline-block bg-warning text-dark px-4 py-2 rounded-pill fw-bold shadow-sm mb-3 hover-scale">
            데이터 정합성과 시간 계산 (여기를 클릭하세요!) 🖱️
          </div>
          
          <div v-if="showAITrap[1]" class="card border-warning shadow-sm text-left">
            <div class="card-body p-3" style="font-size: 0.9rem;">
              <ul class="mb-2">
                <li class="text-danger fw-bold">"동물에 어울리는 먹이인지 체크해야죠! 강아지가 마라탕을 왜 먹어요? 뼈다귀 하나로 통일합시다."</li>
                <li class="text-danger fw-bold">"유도 미사일 코드는 너무 복잡해요. 그냥 앞으로 쭉 날아가는 단순한 모양의 발사체 1개로 합시다!"</li>
              </ul>
              <hr>
              <p class="mb-0 text-success fw-bold">✅ 결론 도출: 동물의 컨셉에 맞는 직관적인 특별식 1개, 단순한 전방 발사체 1개로 확정!</p>
            </div>
          </div>
        </div>
      </section>

      <section>
        <h2>🥊 AI 트랩 Round 3: 적군과 난이도의 함정</h2>
        
        <div class="card text-left mt-3 border-dark">
          <div class="card-header bg-primary text-white fw-bold d-flex justify-content-between">
            <span>🤖 AI 비서의 터무니없는 제안</span>
          </div>
          <div class="card-body bg-light">
            <p class="fst-italic text-dark mb-0 fw-bold">"적군은 10마리씩 떼로 몰려오게 하고, 게임 시간은 한 5분 정도로 길게 잡아 대서사시를 만듭시다!"</p>
          </div>
        </div>

        <div class="mt-4" @click="toggleAITrap(2)" style="cursor: pointer;">
          <div class="d-inline-block bg-warning text-dark px-4 py-2 rounded-pill fw-bold shadow-sm mb-3 hover-scale">
            게임 기획의 한계 설정 (여기를 클릭하세요!) 🖱️
          </div>
          
          <div v-if="showAITrap[2]" class="card border-warning shadow-sm text-left">
            <div class="card-body p-3" style="font-size: 0.9rem;">
              <ul class="mb-2">
                <li class="text-danger fw-bold">"10종류를 다 찍으려면 오늘 집에 못 가요! 적군은 딱 2종류만 만듭시다."</li>
                <li class="text-danger fw-bold">"5분은 너무 지루해요. 게임 시간은 딱 30초! 짧고 굵게 가야 긴장감이 넘칩니다."</li>
              </ul>
              <hr>
              <p class="mb-0 text-success fw-bold">✅ 결론 도출: 적군은 2종류로 제한하고, 플레이 타임은 30초로 최종 승인!</p>
            </div>
          </div>
        </div>

        <div class="alert alert-info mt-3 py-2 text-center shadow-sm" style="font-size: 0.85rem;">
          <b>📝 미션:</b> 활동지에 우리가 정한 주인공 동물, 먹이 이름, 적군 2가지를 기록하세요!
        </div>
      </section>

      <section>
        <h2>🎨 1차시 2교시: 파이썬 터틀로 주인공 그리기</h2>
        <p>코드를 전부 외워서 칠 필요 없어요! <b>'바이브 코딩(Vibe Coding)'</b>을 통해 기본 뼈대에 내 입맛대로 숫자와 색깔을 바꾸는 '튜닝(Tuning)' 수술을 해봅시다.</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">💡 3가지 마법의 주문</h5>
              <ul style="font-size: 0.85rem; line-height: 1.8;">
                <li><code>t.color("색상")</code>: 물감 색깔 고르기</li>
                <li><code>t.circle(숫자)</code>: 동그라미 크기 정하기</li>
                <li><code>t.goto(x, y)</code>: 펜을 지정된 위치로 이동시키기</li>
              </ul>
            </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. 다음 장의 <b>'둥근 귀 멍멍이'</b> 코드를 복사해서 컴파일러에 붙여넣으세요.<br>
                2. <code>color</code> 안의 단어를 "gold"나 "gray"로 바꿔보세요.<br>
                3. <code>circle(20)</code> 숫자를 키워서 왕귀를 만들어보세요!
              </p>
            </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/8410f6842d4e" width="100%" height="500" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
          </div>
          <div class="col-md-6 text-left" style="height: 500px; 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>🐶 둥근 귀 멍멍이 기본 코드</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 as t
t.speed(0)

# 얼굴 그리기
t.penup(); t.goto(0, -50); t.pendown()
t.color("saddlebrown"); t.begin_fill()
t.circle(50)
t.end_fill()

# 왼쪽 귀
t.penup(); t.goto(-30, 30); t.pendown()
t.color("sienna"); t.begin_fill()
t.circle(20)
t.end_fill()

# 오른쪽 귀
t.penup(); t.goto(30, 30); t.pendown()
t.color("sienna"); t.begin_fill()
t.circle(20)
t.end_fill()

t.hideturtle()
</code></pre>
              </div>
            </div>
            
            <div class="alert alert-warning py-2 mt-2" style="font-size: 0.8rem;">
              <b>🔥 캡처 미션:</b> 완성된 나만의 동물 얼굴을 화면 캡처하여 바탕화면에 저장해두세요. 2차시에 보면서 픽셀로 똑같이 찍을 겁니다!
            </div>
          </div>
        </div>
      </section>


      <section>
        <h2>🧠 2차시 시작 전: 1차시 복습 OX 퀴즈!</h2>
        <p>본격적인 게임 개발에 앞서, 우리가 회의했던 내용을 기억해볼까요?</p>
        
        <div class="card text-left mt-3 border-primary shadow-sm hover-scale" @click="toggleQuiz(0)" style="cursor: pointer;">
          <div class="card-body bg-light">
            <div class="d-flex justify-content-between align-items-center">
              <h5 class="fw-bold text-primary mb-0">Q1. 우리가 오늘 만드는 게임의 주인공은 반드시 '동물'이어야 한다!</h5>
              <span class="badge bg-primary">정답 확인 🖱️</span>
            </div>
            <div v-if="showQuiz[0]" class="mt-3 p-2 bg-white rounded border border-primary">
              <p class="text-danger fw-bold mb-0">👉 정답: O (AI 비서의 첫 번째 조건이었죠!)</p>
            </div>
          </div>
        </div>

        <div class="card text-left mt-3 border-success shadow-sm hover-scale" @click="toggleQuiz(1)" style="cursor: pointer;">
          <div class="card-body bg-light">
            <div class="d-flex justify-content-between align-items-center">
              <h5 class="fw-bold text-success mb-0">Q2. 오늘 만드는 게임은 너무 재미있으니까 플레이 시간을 5분으로 정했다!</h5>
              <span class="badge bg-success">정답 확인 🖱️</span>
            </div>
            <div v-if="showQuiz[1]" class="mt-3 p-2 bg-white rounded border border-success">
              <p class="text-danger fw-bold mb-0">👉 정답: X (짧고 굵게 30초로 타협했어요!)</p>
            </div>
          </div>
        </div>

        <div class="card text-left mt-3 border-warning shadow-sm hover-scale" @click="toggleQuiz(2)" style="cursor: pointer;">
          <div class="card-body bg-light">
            <div class="d-flex justify-content-between align-items-center">
              <h5 class="fw-bold text-dark mb-0">Q3. 파이썬 터틀에서 `t.circle(50)`은 네모를 그리는 마법의 주문이다!</h5>
              <span class="badge bg-warning text-dark">정답 확인 🖱️</span>
            </div>
            <div v-if="showQuiz[2]" class="mt-3 p-2 bg-white rounded border border-warning">
              <p class="text-danger fw-bold mb-0">👉 정답: X (circle은 '동그라미'를 그리는 주문이에요!)</p>
            </div>
          </div>
        </div>
      </section>

      <section>
        <h2>🕹️ 2차시 1교시: 게임의 뼈대 세우기</h2>
        <p>드디어 실전입니다! 복잡한 상세 코드 대신 <b>'무엇을 어떻게 만들지'</b> 논리적인 흐름에 집중해봅시다.</p>

        <div style="display:flex; justify-content:center; align-items:center; gap:15px; margin-top:10px; flex-wrap:wrap; font-size: 0.9rem;">
          <div style="padding:10px 20px; background-color:#E6E6FA; border-radius:8px; text-align:center; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
            <a href="https://arcade.makecode.com/" target="_blank" class="fw-bold text-dark text-decoration-underline d-block mb-1">MakeCode Arcade 접속 (새 프로젝트 만들기)</a>
          </div>
          <div style="padding:10px 20px; background-color:#ffeb3b; border-radius:8px; text-align:center; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
            <a href="https://arcade.makecode.com/S05260-53129-36523-76177" target="_blank" class="fw-bold text-dark text-decoration-underline">✨ 완성된 게임 예시 미리보기 (클릭!)</a>
          </div>
        </div>

        <div class="row mt-4 text-start">
          <div class="col-md-6">
            <div class="card border-info shadow-sm h-100 mb-3">
              <div class="card-header bg-info text-white fw-bold">1단계. 배경 만들기</div>
              <div class="card-body bg-light" style="font-size: 0.85rem;">
                화면을 꽉 채우는 복잡한 그림 대신, 내가 정한 컨셉(예: 우주, 바다, 숲)에 맞는 배경색을 고르고 두꺼운 픽셀(점)을 찍어 단순하게 표현해요.
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card border-primary shadow-sm h-100 mb-3">
              <div class="card-header bg-primary text-white fw-bold">2단계. 주인공 생성 및 조작</div>
              <div class="card-body bg-light" style="font-size: 0.85rem;">
                아까 터틀로 그린 얼굴을 픽셀로 찍어 그려요. 캐릭터의 처음 <b>위치</b>를 설정하고, <b>'버튼으로 이동 블록을 사용해'</b> 상하좌우로 자유롭게 움직이게 설정합니다.
              </div>
            </div>
          </div>
        </div>
      </section>

      <section>
        <h2>🍖 3단계 & 4단계: 무기 장착과 식량 보급!</h2>
        <p>우리의 영웅이 싸우고 먹을 수 있도록 능력을 부여합니다.</p>

        <div class="row text-start mt-4">
          <div class="col-md-6">
            <div class="card border-success shadow-sm h-100 mb-3">
              <div class="card-header bg-success text-white fw-bold">3단계. 발사체(무기) 쏘기</div>
              <div class="card-body bg-light" style="font-size: 0.85rem;">
                발사체를 직접 만들고 <b>주인공으로부터(from)</b> 나가게 해볼게요.<br>
                속도(vx, vy)를 조절해서 날아가는 방향을 정할 수 있습니다.<br>
                <span class="text-danger fw-bold">(팁: 왼쪽으로 가려면 속도 값에 마이너스(-)를 붙이세요!)</span>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card border-warning shadow-sm h-100 mb-3">
              <div class="card-header bg-warning text-dark fw-bold">4단계. 특별식(음식) 만들기</div>
              <div class="card-body bg-light" style="font-size: 0.85rem;">
                음식을 그리고 처음 위치를 설정합니다.<br>
                <b>주인공이 음식에 닿으면 점수가 +1점</b> 오르게 합니다.<br><br>
                <span class="text-danger fw-bold">핵심 논리:</span> 먹자마자 화면의 다른 <b>'랜덤 위치'</b>로 이동하도록 위치 블록을 설정해요!
              </div>
            </div>
          </div>
        </div>
      </section>

      <section>
        <h2>👾 2차시 2교시: 게임의 완성 (적군 생성)</h2>
        <p>평화로운 세계에 장애물(적군)을 등장시킬 차례입니다.</p>

        <div class="card border-dark shadow-sm text-start mb-4 mx-auto" style="max-width: 900px;">
          <div class="card-header bg-dark text-white fw-bold">5단계. 적 만들기 및 충돌 법칙</div>
          <div class="card-body bg-light" style="font-size: 0.85rem;">
            <p class="mb-3">
              <b>'게임 업데이트하기(시간)'</b> 블록을 사용하여 일정 시간마다 적이 나타나게 합니다. 나타나는 <b>위치를 설정</b>하고 달려오는 <b>속도를 설정</b>하세요.
            </p>
            <div class="row">
              <div class="col-md-6 border-end border-secondary">
                <b class="text-danger">💥 법칙 1: [주인공] vs [적군]</b><br>
                주인공이 적에 닿으면<br>
                1. <b>생명 -1</b> 깎기 (시작할 때 생명 정하기 블록이 필요해요!)<br>
                2. <b>적 삭제</b>하기 (안 없애면 계속 생명이 깎여요!)
              </div>
              <div class="col-md-6">
                <b class="text-primary">💥 법칙 2: [발사체] vs [적군]</b><br>
                나의 무기가 적을 명중시키면<br>
                1. <b>발사체가 적에 닿으면 적과 발사체 모두 삭제</b><br>
                2. 통쾌하게 점수를 올립니다.
              </div>
            </div>
          </div>
        </div>
      </section>

      <section>
        <h2>⏳ 6단계 & 7단계: 심장 쫄깃한 카운트다운과 확장</h2>
        
        <div class="card border-info shadow-sm text-left mb-4">
          <div class="card-body bg-light py-3 px-4" style="font-size: 0.95rem;">
            <b>⏰ 6단계. 카운트다운:</b> 게임이 무한히 계속되지 않도록 <b>카운트다운</b> 시간을 설정합니다. 정해진 시간이 다 지나면 게임이 종료되며 결과가 나옵니다!
          </div>
        </div>

        <h4 class="fw-bold text-success mb-3">🌟 7단계. 확장: 적 종류를 추가하기</h4>
        <div class="alert alert-success text-start shadow-sm" style="font-size: 0.9rem;">
          기존 적군과 다른 두 번째 적을 만들어 봅시다. 속도나 나타나는 시간을 다르게 설정해 보세요.
          <ul class="mt-2 mb-0">
            <li class="text-danger fw-bold">가장 중요한 포인트: 새로 만든 적은 컴퓨터가 기존 적과 다르게 구별할 수 있도록, 반드시 종류(Kind)에 [새로운 이름(새 kind)]을 만들어 달아주어야 합니다!</li>
          </ul>
        </div>
      </section>

      <section>
        <h2>🚨 부록: 선생님을 위한 30명 통제 생존 가이드</h2>
        <p>교실은 오류를 외치는 소리로 아수라장이 되기 쉽습니다! 명예 개발자 제도를 활용하세요.</p>
        
        <div class="row text-start mt-4">
          <div class="col-md-6">
            <div class="card border-dark h-100 shadow-sm">
              <div class="card-header bg-dark text-white fw-bold">칠판에 적어둘 '셀프 체크리스트'</div>
              <div class="card-body bg-light" style="font-size: 0.8rem;">
                ✔️ <b>총알이 뒤로 나가요!</b><br>
                👉 속도 값이 마이너스(-)인지 확인해. 플러스(+)여야 앞으로 가!<br><br>
                ✔️ <b>적이랑 닿자마자 생명이 0이 돼서 게임 오버돼요!</b><br>
                👉 충돌 블록 안에 '적군 삭제'를 안 넣어서 닿아있는 1초 동안 생명이 60번 깎인 거야!<br><br>
                ✔️ <b>새로 만든 2번째 적이 총에 안 맞아요!</b><br>
                👉 새로 만든 적의 종류(새 kind) 이름표를 위한 충돌 규칙을 새로 안 만들어줬구나!
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card border-primary h-100 shadow-sm">
              <div class="card-header bg-primary text-white fw-bold">진짜 개발자의 뷰(View)</div>
              <div class="card-body bg-light" style="font-size: 0.85rem;">
                <p class="text-primary fw-bold">"화면 상단의 <code>{ } JavaScript</code> 또는 <code>Python</code> 버튼을 눌러보세요!"</p>
                <p>여러분이 블록 놀이를 한 게 아니라, 진짜 소프트웨어 구조를 설계하고 수많은 텍스트 코드를 작성했다는 것을 보여주어 성취감을 극대화하세요.</p>
                <hr>
                <p class="mb-0 text-muted">먼저 완성한 상위 학생 3~4명에게 <b>'명예 멘토'</b> 칭호를 부여하여, 자리에서 일어나 친구들의 화면을 보고 오류를 잡아주도록 유도하세요. 선생님 혼자 30명을 다 봐줄 수 없습니다!</p>
              </div>
            </div>
          </div>
        </div>
      </section>

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

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

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

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

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

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

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

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

        </div>

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

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

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

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

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

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

      <section>
        <h2>⚖️ 3차시 2교시: 트롤리 딜레마 (당신의 선택은?)</h2>
        <p>여러분이 이 자율주행 자동차를 만든 프로그래머입니다. <b>브레이크가 고장 난 상황에서 자동차에게 어떤 명령을 코딩하시겠습니까?</b></p>

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

        <div class="mt-4 pt-2">
          <a href="https://science.seoul.go.kr/RAIM/aiPlaygrnd/list.do?key=2310160006" target="_blank" class="btn btn-danger fw-bold shadow-lg px-4 py-3" style="font-size: 1.1rem; border-radius: 50px; text-decoration: none;">
            🎮 직접 체험하기: 트롤리 딜레마 시뮬레이터 (클릭)
          </a>
          <p class="mt-2 text-muted fw-bold" style="font-size: 0.8rem;">* 서울시립과학관 사이트로 이동해서 직접 게임처럼 선택을 해보세요!</p>
        </div>
        
        <div class="mt-3 pt-2">
          <p class="mt-2 text-muted fw-bold" style="font-size: 0.9rem;">* 인공지능은 감정이 없기 때문에 돌발 상황에서 어떤 선택을 해야 하는지 미리 코딩으로 가르쳐 주어야 합니다. 짝꿍과 열띤 토론을 해보세요!</p>
        </div>
      </section>
      <section>
        <h2 class="text-danger fw-bold mb-3">⚖️ AI 윤리 토론: 운명의 갈림길</h2>
        
        <div class="card border-0 shadow-sm mb-3" style="background-color: #f8f9fa;">
          <div class="card-body p-3">
            <div class="row align-items-center text-left">
              <div class="col-md-9">
                <h5 class="fw-bold mb-1"><i class="fa fa-car-crash me-2"></i> 긴급 상황 (The 3:1 Dilemma)</h5>
                <p class="small mb-0">비 내리는 오후, 자율주행차 앞 도로에 <b>아이 1명</b>이 뛰어들었습니다. <br>
                핸들을 꺾으면 <b>탑승자 3명(가족)</b>이, 직진하면 <b>보행자 1명</b>이 희생되는 절박한 순간입니다.</p>
              </div>
              <div class="col-md-3 text-right">
                <div class="badge bg-danger p-2 px-3">누구를 구할 것인가?</div>
              </div>
            </div>
          </div>
        </div>

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

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

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

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

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

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

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

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

      <section>
        <h1 style="font-size: 4rem;">👏🏽</h1>
        <h2 class="fw-bold mt-3">기발한 게임 기획부터 논리적인 코딩,<br>그리고 따뜻한 마음을 가진 AI 윤리까지!<br>초등학교 예비 개발자 여러분, 진심으로 수고하셨습니다!</h2>
        <h1 class="text-danger fw-bold mt-5" style="font-size: 3.5rem;">🚨 설문 꼭 참여해주세요! 🚨</h1>
      </section>

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

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

export default {
  components: { HomeButton },
  data() {
    return {
      // 1차시: AI 기획자 트랩 토글
      showAITrap: [false, false, false],
      // 🌟 추가됨: OX 퀴즈 토글용
      showQuiz: [false, false, false],
      // 3차시: 센서 장단점 및 사고 조사반 아코디언 토글용
      showSensor: [false, false, false],
      showCrash: [false, false, false, false]
    };
  },
  methods: {
    // 🌟 추가됨: 퀴즈 토글 함수
    toggleQuiz(index) {
      this.showQuiz[index] = !this.showQuiz[index];
      // 슬라이드 높이가 변하므로 Reveal 레이아웃 새로고침
      this.$nextTick(() => { 
        if (this.deck) this.deck.layout(); 
      });
    },
    // ======== 레이아웃 깨짐(잘림) 방지용 토글 함수들 ========
    toggleAITrap(index) {
      this.showAITrap[index] = !this.showAITrap[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() 호출
      });
    },

    goSlide(number) {
      if (this.deck) {
        this.deck.slide(number);
      } else {
        console.error("Reveal 인스턴스가 초기화되지 않았습니다.");
      }
    },

    // 파이썬 터틀 코드 복사 기능
    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("복사에 실패했습니다. 브라우저 설정을 확인해 주세요.");
        }
      }
    }
  },
  mounted() {
    this.deck = initializeReveal(this.$refs.revealRef, false);

    this.deck.on('slidechanged', (event) => {
      console.log("Slide is now " + event.indexh);
    });
  },
  unmounted() {
    if (this.deck) {
      this.deck.destroy();
    }
  }
};
</script>

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

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

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

.hover-scale { transition: transform 0.2s; }
.hover-scale:hover { transform: scale(1.05); }

/* 터틀 복사 버튼 애니메이션 */
.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; }
</style>