<template>
  <HomeButton />
  <div class="reveal animate-spark" ref="revealRef">
    <div class="slides text-stone">

      <section data-background-color="#1a120b">
        <div class="magic-border p-4 position-relative bg-dark-wood text-gold shadow-lg">
          <h2 class="text-gold fw-bold tracking-wide fade-in-up mb-3">🪄 호그와트 시스템 아키텍트</h2>
          <h4 class="text-silver text-uppercase subtitle mb-4">비밀의 설계도와 마법 게임 빌더</h4>
          
          <table class="table caption-top table-dark table-hover table-bordered card-magic p-2 shadow-sm alignment-middle text-center" style="font-size: 0.75rem;">
            <caption class="mb-1 text-silver text-left opacity-75" style="font-size: 0.8rem;">🧙 초등학교 5~6학년 대상 · 도서관 특강 (4일 특강 / 총 8교시 마스터 과정)</caption>
            <thead>
              <tr class="text-gold bg-gold-gradient border-bottom-gold">
                <th width="15%">주차/일자</th>
                <th width="10%">교시</th>
                <th width="50%">핵심 마법 설계 주제 (학습 내용)</th>
                <th width="15%">사용 도구</th>
                <th width="10%">포탈</th>
              </tr>
            </thead>
            <tbody>
              <tr class="row-gryffindor">
                <td rowspan="2" class="fw-bold align-middle">1일차<br><span class="text-gold">(시스템 구조)</span></td>
                <td>1교시</td>
                <td class="text-left fw-bold pl-3">해체 분석기: 맛있는 라면 레시피 아키텍처</td>
                <td>Excalidraw</td>
                <td><i class="fa fa-wand-magic-sparkles text-gold fs-5 cursor-pointer bounce-hover" @click="goSlide(1)"></i></td>
              </tr>
              <tr class="row-gryffindor border-bottom-gold">
                <td>2교시</td>
                <td class="text-left fw-bold pl-3">빈틈없는 규칙: 호그와트 무인 매점 방어 설계</td>
                <td>Excalidraw</td>
                <td><i class="fa fa-wand-magic-sparkles text-gold fs-5 cursor-pointer bounce-hover" @click="goSlide(7)"></i></td>
              </tr>
              <tr class="row-ravenclaw">
                <td rowspan="2" class="fw-bold align-middle">2일차<br><span class="text-blue">(공간과 UX)</span></td>
                <td>3교시</td>
                <td class="text-left fw-bold pl-3">공간 인지: 호그와트 급식실 아키텍처의 트랩과 공간 병목 현상</td>
                <td>Excalidraw</td>
                <td><i class="fa fa-wand-magic-sparkles text-blue fs-5 cursor-pointer bounce-hover" @click="goSlide(12)"></i></td>
              </tr>
              <tr class="row-ravenclaw border-bottom-gold">
                <td>4교시</td>
                <td class="text-left fw-bold pl-3">동선 최적화: 미래형 스마트 호그와트 급식실 설계 및 병목 해결</td>
                <td>Excalidraw</td>
                <td><i class="fa fa-wand-magic-sparkles text-blue fs-5 cursor-pointer bounce-hover" @click="goSlide(14)"></i></td>
              </tr>
              <tr class="row-hufflepuff">
                <td rowspan="2" class="fw-bold align-middle">3일차<br><span class="text-yellow">(논리와 트리)</span></td>
                <td>5교시</td>
                <td class="text-left fw-bold pl-3">조건 로직: 신비한 동물 부화기의 마법 분기점 규칙 및 자격시험</td>
                <td>Flowchart.fun</td>
                <td><i class="fa fa-wand-magic-sparkles text-yellow fs-5 cursor-pointer bounce-hover" @click="goSlide(20)"></i></td>
              </tr>
              <tr class="row-hufflepuff border-bottom-gold">
                <td>6교시</td>
                <td class="text-left fw-bold pl-3">생각의 나무: 말하는 마법 모자의 기숙사 배정 트리 & 스펠 백업</td>
                <td>Flowchart.fun</td>
                <td><i class="fa fa-wand-magic-sparkles text-yellow fs-5 cursor-pointer bounce-hover" @click="goSlide(24)"></i></td>
              </tr>
              <tr class="row-slytherin">
                <td rowspan="2" class="fw-bold align-middle">4일차<br><span class="text-green">(구현과 확장)</span></td>
                <td>7교시</td>
                <td class="text-left fw-bold pl-3">주문 소환: 4대 해독제와 AI 엔진을 활용한 마법 모자 코드 컴파일</td>
                <td>AI / Online-Python</td>
                <td><i class="fa fa-wand-magic-sparkles text-green fs-5 cursor-pointer bounce-hover" @click="goSlide(30)"></i></td>
              </tr>
              <tr class="row-slytherin">
                <td>8교시</td>
                <td class="text-left fw-bold pl-3">아키텍트 확장: 퀴디치(Quidditch) 대표 선발 및 빗자루 추락 예외 처리</td>
                <td>Online-Python / AI</td>
                <td><i class="fa fa-wand-magic-sparkles text-green fs-5 cursor-pointer bounce-hover" @click="goSlide(34)"></i></td>
              </tr>
            </tbody>
          </table>
          <p class="text-gold flash-anim small mt-2 fw-bold">👉 우측의 마법 지팡이 아이콘을 클릭하면 해당 학습 차시로 즉시 순간이동합니다!</p>
        </div>
      </section>

      <section data-background-color="#151518">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3">
          <h3 class="text-gold font-magic mb-0">🍲 1일차 1교시: 해체 분석기, 라면 레시피 아키텍처</h3>
          <span class="badge bg-gryffindor text-gold py-2 px-3 border border-gold">Excalidraw</span>
        </div>
        <p class="text-light text-left">아키텍트는 코드를 먼저 두드리는 사람이 아닙니다. 복잡한 현실의 문제를 <b>'부품(컴포넌트)'</b>과 <b>'연결고리(관계)'</b>로 완벽하게 시각화하는 사람입니다. 우리가 잘 아는 라면으로 시작해 봅시다.</p>

        <div class="row mt-4">
          <div class="col-md-6">
            <div class="card card-magic bg-dark-stone text-white h-100 p-3 shadow text-left">
              <h5 class="text-warning fw-bold border-bottom border-secondary pb-2">👨‍🍳 일반 요리사의 관점</h5>
              <blockquote class="magic-quote small mb-0 mt-2 opacity-75">
                "그냥 대충 물 붓고 끓으면 스프랑 면 다 집어넣고 계란 탁 풀어서 맛있게 먹으면 끝이지, 설계도가 왜 필요해?"
              </blockquote>
              <div class="alert alert-secondary text-dark border-0 mt-3 p-2 small font-weight-bold">
                ⚠️ 주의: 이 방식은 환경이나 순서가 아주 조금만 바뀌어도 마법 요리를 완전히 망치게 됩니다.
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card card-magic bg-dark-wood text-gold h-100 p-3 shadow text-left border border-gold">
              <h5 class="text-gold fw-bold border-bottom border-gold pb-2">📐 그랜드 아키텍트 마법사의 관점</h5>
              <ul class="list-unstyled p-0 m-0 mt-2 small" style="line-height: 1.8;">
                <li class="mb-2"><i class="fa fa-cube text-warning me-2"></i><b>마법 자원(Component) 식별:</b> 요리에 필요한 6가지 '부품'와 설계도 찾아내기 (힌트: 액체 자원, 열 에너지원, 메인 데이터 등)</li>
                <li><i class="fa fa-random text-warning me-2"></i><b>파이프라인(Flow) 순서 제어:</b> 입력(Input) ➔ 가열 제어(Process) ➔ 데이터 동시 로드 ➔ 완성(Output) 흐름 설계하기</li>
              </ul>
              <div class="alert bg-gold-gradient text-dark border-0 mt-3 p-2 text-center font-weight-bold small">
                💡 마법사님! 다음 장에서 마법의 물음표 상자를 열어 부품의 힌트를 얻고 설계도를 시작하세요!
              </div>
            </div>
          </div>
        </div>
      </section>

      <section data-background-color="#0d1015">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3 w-100">
          <h3 class="text-gold font-magic mb-0">🎨 마법 도구 사용법: Excalidraw 완전 정복!</h3>
          <span class="badge bg-info text-dark py-2 px-3 border border-dark fw-bold">도구 사용법 (Tutorial)</span>
        </div>
        <p class="text-light text-left small mb-3">본격적인 설계도 그리기에 앞서, 마법의 하얀 도화지 <b>Excalidraw</b> 사용법부터 손에 익혀봅시다! 아래 영상을 함께 보며 선생님을 따라 그려보세요. 처음 써보는 도구라도 걱정 마세요, 5분이면 충분합니다.</p>

        <div class="row align-items-start w-100 g-3">
          <div class="col-md-6 text-center">
            <div class="p-1 bg-dark rounded border border-secondary shadow position-relative" style="height: 300px; overflow: hidden;">
              <!--
                [선생님 안내] 아래는 임시로 넣어둔 영상 자리입니다.
                실제 수업 전, 화면 녹화한 "Excalidraw 기본 사용법" 캡처 영상을
                /achitecture/excalidraw_tutorial.mp4 경로에 업로드하거나,
                아래 <video> 블록을 유튜브 <iframe> embed로 교체해주세요.
              -->
              <video width="100%" height="100%" controls style="border-radius: 8px; background:#000;">
                <source src="/achitecture/excalidraw_tutorial.mp4" type="video/mp4">
                화이트보드 사용법을 익혀봅시다.
              </video>
            </div>
            <span class="text-silver opacity-75 d-block mt-2 font-monospace" style="font-size: 0.7rem;">🎬 영상을 통해 화이트보드 사용법을 익혀봅시다.</span>
          </div>

          <div class="col-md-6 text-left">
            <div class="card card-magic bg-dark-stone text-white p-3 h-100 shadow border border-info">
              <h5 class="text-info fw-bold mb-2" style="font-size: 0.9rem;"><i class="fa fa-graduation-cap me-2"></i> 손에 익히는 4단계 사용법</h5>
              <div class="d-flex flex-column gap-2" style="font-size: 0.75rem; line-height: 1.5;">
                <div class="p-2 rounded bg-dark border border-secondary d-flex align-items-start">
                  <span class="fs-5 me-2">⬛</span>
                  <div><b class="text-warning">① 사각형 그리기:</b> 왼쪽 도구 모음에서 네모(□) 아이콘을 클릭하고, 도화지 위에서 드래그하면 상자가 생깁니다.</div>
                </div>
                <div class="p-2 rounded bg-dark border border-secondary d-flex align-items-start">
                  <span class="fs-5 me-2">🔤</span>
                  <div><b class="text-warning">② 글자 넣기:</b> 그려진 상자를 더블클릭하면 바로 안쪽에 글자를 입력할 수 있어요.</div>
                </div>
                <div class="p-2 rounded bg-dark border border-secondary d-flex align-items-start">
                  <span class="fs-5 me-2">➡️</span>
                  <div><b class="text-warning">③ 화살표 연결:</b> 화살표 아이콘을 고른 뒤, 상자에서 다른 상자로 클릭&드래그하면 이어집니다.</div>
                </div>
                <div class="p-2 rounded bg-dark border border-secondary d-flex align-items-start">
                  <span class="fs-5 me-2">🔶</span>
                  <div><b class="text-warning">④ 질문 상자(마름모):</b> 다이아몬드(◇) 아이콘은 "만약에?" 질문 상자를 그릴 때 사용해요.</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="alert bg-gold-gradient text-dark border-0 mt-3 p-2 text-center small font-weight-bold shadow-sm w-100">
          💡 <b>사용 팁:</b> 실수해도 괜찮아요! 키보드 <b>Ctrl(Cmd) + Z</b>를 누르면 방금 한 행동을 바로 되돌릴 수 있어요.
        </div>
      </section>

      <section data-background-color="#111113">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3">
          <h3 class="text-gold font-magic mb-0">🛠️ 실전 워크숍: 마법 주방의 부품 블록 해독하기</h3>
          <span class="badge bg-secondary text-white py-2 px-3">협업 화이트보드</span>
        </div>
        <p class="text-silver small text-left mb-2">아래의 물음표(`?`) 상자들을 클릭하여 시스템 아키텍처에 등록할 <b>6대 핵심 컴포넌트의 힌트</b>를 잠금 해제하세요!</p>

        <div class="text-center mb-3">
          <a href="https://excalidraw.com/#" target="_blank" class="btn bg-gold-gradient text-dark fw-bold px-4 py-2 rounded-pill shadow hover-scale bounce-hover" style="font-size: 0.85rem; text-decoration: none; display: inline-block;">
            🎨 Excalidraw 화이트보드 광장 열기 (클릭)
          </a>
        </div>

        <div class="row g-2 text-left">
          <div v-for="(comp, idx) in ramyunComponents" :key="idx" class="col-md-4">
            <div class="card h-100 border-dark bg-dark-stone shadow-sm cursor-pointer hover-scale" @click="toggleComponentHint(idx)" style="min-height: 110px;">
              <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center py-1 px-3" style="font-size: 0.8rem;">
                <span class="fw-bold text-gold">{{ comp.title }}</span>
                <i class="fa fa-wand-magic-sparkles text-warning" style="font-size: 0.7rem;"></i>
              </div>
              <div class="card-body d-flex align-items-center justify-content-center p-2 bg-light text-dark text-center">
                <div v-if="!showComponentHint[idx]" class="fade-in">
                  <h2 class="text-muted font-magic mb-0 fw-bold" style="font-size: 2rem; opacity: 0.6;">?</h2>
                  <span class="text-muted d-block" style="font-size: 0.65rem;">클릭하여 힌트 해독</span>
                </div>
                <div v-else class="fade-in px-2 text-left w-100">
                  <p class="mb-0 text-dark font-weight-bold" style="font-size: 0.78rem; line-height: 1.4; letter-spacing: -0.5px;">
                    {{ comp.hint }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="mt-4 pt-3 border-top border-secondary text-center">
          <p class="text-white fw-bold mb-2" style="font-size: 0.88rem;">
            💡 <b>실습 가이드:</b> 퀴즈로 알아낸 부품들을 Excalidraw에서 사각형 박스 안에 담아 봅시다!
          </p>
          <button @click="toggleExample" class="btn btn-sm btn-outline-warning fw-bold px-3 py-1.5 rounded hover-scale">
            🔍 어떻게 배치하나요? 예시 보기 (클릭)
          </button>

          <div v-if="showExample" class="fade-in mt-3 p-3 rounded-3 bg-dark text-left border border-warning mx-auto" style="max-width: 850px;">
            <h6 class="text-warning fw-bold mb-2" style="font-size: 0.82rem;">
              <i class="fa fa-sitemap me-2"></i> 아키텍처 기본 블록 배치 구성안 (Excalidraw 화면 가이드)
            </h6>
            <div class="row g-2 text-center text-dark fw-bold" style="font-size: 0.73rem;">
              <div class="col-4 col-md-2"><div class="p-2 bg-white rounded border border-2 border-primary shadow-sm">💧 물(550ml)</div></div>
              <div class="col-4 col-md-2"><div class="p-2 bg-white rounded border border-2 border-primary shadow-sm">🍲 냄비</div></div>
              <div class="col-4 col-md-2"><div class="p-2 bg-white rounded border border-2 border-primary shadow-sm">🔥 가스불</div></div>
              <div class="col-4 col-md-2"><div class="p-2 bg-white rounded border border-2 border-success shadow-sm">⚡ 면발</div></div>
              <div class="col-4 col-md-2"><div class="p-2 bg-white rounded border border-2 border-success shadow-sm">🌶️ 스프</div></div>
              <div class="col-4 col-md-2"><div class="p-2 bg-white rounded border border-2 border-success shadow-sm">🌿 건더기</div></div>
            </div>
            <p class="text-silver opacity-75 small mb-0 mt-2 text-center" style="font-size: 0.68rem;">
              * 사각형 안에 텍스트를 넣어 부품들을 그려봅시다!
            </p>
          </div>
        </div>
      </section>

      <section data-background-color="#131116">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3">
          <h3 class="text-gold font-magic mb-0">🧩 2단계 워크숍: 보글보글 라면 순서도 그리기</h3>
          <span class="badge bg-secondary text-white py-2 px-3">화살표 연결 가이드</span>
        </div>
        <p class="text-silver small text-left mb-2">툴이 낯설어도 걱정 마세요! 아래 <b>1번부터 4번 상자까지 순서대로 클릭</b>하면서 화살표를 하나씩 따라 그려봅시다.</p>

        <div class="row g-2 text-left mb-2">
          <div v-for="(flow, idx) in ramyunFlows" :key="idx" class="col-6">
            <div class="card h-100 border-dark bg-dark-stone shadow-sm cursor-pointer hover-scale" @click="toggleFlowHint(idx)" style="min-height: 105px;">
              <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center py-1 px-3" style="font-size: 0.75rem;">
                <span class="fw-bold text-gold">{{ flow.title }}</span>
                <i class="fa fa-arrow-right-long text-warning" style="font-size: 0.7rem;"></i>
              </div>
              <div class="card-body d-flex align-items-center justify-content-center p-2 bg-light text-dark text-center">
                <div v-if="!showFlowHint[idx]" class="fade-in">
                  <h3 class="text-muted font-magic mb-0 fw-bold" style="font-size: 1.5rem; opacity: 0.7;">?</h3>
                  <span class="text-muted d-block fw-bold" style="font-size: 0.65rem;">{{ idx + 1 }}단계 미션 열기 🖱️</span>
                </div>
                <div v-else class="fade-in px-2 text-left w-100">
                  <p class="mb-0 text-dark font-weight-bold" style="font-size: 0.73rem; line-height: 1.4; letter-spacing: -0.5px;">
                    {{ flow.hint }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="mt-3 pt-2 border-top border-secondary text-center">
          <button @click="toggleFlowExample" class="btn btn-sm btn-outline-warning fw-bold px-3 py-1.5 rounded hover-scale" style="font-size: 0.8rem;">
            🔍 연결 가이드 예시 보기 (클릭)
          </button>

          <div v-if="showFlowExample" class="fade-in mt-3 p-4 rounded-3 bg-dark text-left border border-warning mx-auto" style="max-width: 900px;">
            <h6 class="text-warning fw-bold mb-3" style="font-size: 0.85rem;">
              <i class="fa fa-diagram-project me-2"></i> 아래 부품들을 화살표로 쭉쭉 이어보세요! (함정이 숨어있어요)
            </h6>
            
            <div class="d-flex flex-wrap justify-content-center align-items-center gap-3 text-dark fw-bold text-center mb-4" style="font-size: 0.85rem;">
              <div class="p-3 bg-white rounded shadow-sm border border-secondary">🍲 냄비</div>
              <i class="fa fa-arrow-right text-gold" style="font-size: 0.8rem;"></i>
              <div class="p-3 bg-white rounded shadow-sm border border-secondary">💧 물</div>
              <i class="fa fa-arrow-right text-gold" style="font-size: 0.8rem;"></i>
              <div class="p-3 bg-white rounded shadow-sm border border-secondary">🔥 가스불</div>
              <i class="fa fa-arrow-right text-gold" style="font-size: 0.8rem;"></i>
              <div class="p-3 bg-white rounded shadow-sm border border-secondary">🍜 면 / 스프 / 건더기</div>
              <i class="fa fa-arrow-right text-gold" style="font-size: 0.8rem;"></i>
              <div class="p-3 bg-white rounded shadow-sm border border-warning">✨ 라면 완성(?)</div>
            </div>

            <!-- <div class="text-center pt-3 border-top border-secondary">
              <p class="text-silver small mb-2" style="font-size: 0.72rem; opacity: 0.8;">
                📢 도화지에 사각형 그리기가 막막한 친구들은 아래 버튼을 눌러 선생님의 마법 설계도 베이스를 복사해 가세요!
              </p>
              <a href="https://excalidraw.com/#json=ZyGt8nxssLIiETaujcddn,8I7ET4U_TcsD93Bk88MxzQ" target="_blank" class="btn btn-sm btn-warning text-dark fw-bold px-3 py-1.5 rounded shadow hover-scale" style="font-size: 0.8rem; text-decoration: none; display: inline-block;">
                🔗 호그와트 주방 설계도 도화지 불러오기
              </a>
            </div> -->
            <div class="text-center pt-3 border-top border-secondary">
              <p class="text-silver small mb-2" style="font-size: 0.72rem; opacity: 0.8;">
                📢 도화지에 사각형 그리기가 막막한 친구들은 아래 버튼을 눌러 선생님의 마법 설계도 정답을 확인하세요!
              </p>
              
              <button type="button" 
                      onclick="document.getElementById('answerModal1').style.display='flex'" 
                      class="btn btn-sm btn-warning text-dark fw-bold px-3 py-1.5 rounded shadow hover-scale" 
                      style="font-size: 0.8rem; border: none; cursor: pointer;">
                🖼️ 호그와트 주방 설계도 정답 이미지 보기
              </button>

              <div id="answerModal1" 
                  onclick="this.style.display='none'"
                  style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:9999; justify-content:center; align-items:center; cursor:zoom-out;">
                <div style="background:#242529; padding:15px; border-radius:10px; border:2px solid #d4af37; max-width:80%; max-height:80%; position:relative;">
                  <h6 class="text-gold mb-2">선생님의 마법 설계도 정답</h6>
                  <img src="/achitecture/ramyoen_1.png" 
                      alt="정답 이미지" style="max-width:100%; height:auto; border-radius:5px;">
                  <p class="text-white mt-2 small" style="font-size:0.7rem;">(이미지를 클릭하면 닫힙니다)</p>
                </div>
              </div>
            </div>

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

      <section data-background-color="#121214">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3">
          <h3 class="text-gold font-magic mb-0">🧪 설계도 수술실: 빈틈없는 알고리즘 완성하기</h3>
          <span class="badge bg-danger text-white py-2 px-3 border border-light">디버깅 & 루프 설계</span>
        </div>
        <p class="text-silver small text-left mb-3">로봇이 요리를 망친 <b>3가지 이유(버그)</b>를 먼저 확인하고, 아래 설계도에서 <b>"아니오"</b>일 때 화살표가 어떻게 되돌아가는지 눈으로 추적해 봅시다!</p>

        <div class="row g-3 text-left mb-4">
          <div v-for="(item, idx) in ramyunTraps" :key="idx" class="col-md-4">
            <div class="card h-100 border-dark bg-dark-stone hover-scale shadow-sm cursor-pointer" @click="toggleRamyunTrap(idx)">
              <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center py-2" style="font-size: 0.8rem;">
                <span>{{ item.title }}</span>
                <span class="text-warning font-magic">🩹</span>
              </div>
              <div class="card-body bg-light text-dark p-3" style="font-size: 0.75rem; min-height: 110px;">
                <div v-if="!showRamyunTrap[idx]" class="text-muted text-center pt-2 fw-bold">클릭하여 발생한 버그 확인 🖱️</div>
                <div v-else class="fade-in">
                  <div class="text-danger fw-bold mb-1">🚨 발생한 버그:</div>
                  <p class="mb-0 text-dark opacity-90 fw-bold" style="line-height: 1.35;">{{ item.desc }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="position-relative mx-auto" style="width: 1100px; height: 240px; margin-top: 15px; background-color: #17181c; border-radius: 12px; border: 1px solid #333;">
          <svg class="position-absolute w-100 h-100" style="top:0; left:0; z-index: 0; pointer-events: none;">
            <defs>
              <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto">
                <polygon points="0 0, 10 3.5, 0 7" fill="#d4af37" />
              </marker>
              <marker id="arrowhead-red" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto">
                <polygon points="0 0, 10 3.5, 0 7" fill="#ff6347" />
              </marker>
            </defs>
            
            <line x1="110" y1="50" x2="148" y2="50" stroke="#d4af37" stroke-width="2" marker-end="url(#arrowhead)" />
            <line x1="267" y1="50" x2="305" y2="50" stroke="#d4af37" stroke-width="2" marker-end="url(#arrowhead)" />
            <line x1="420" y1="50" x2="448" y2="50" stroke="#d4af37" stroke-width="2" marker-end="url(#arrowhead)" />
            <line x1="567" y1="50" x2="605" y2="50" stroke="#d4af37" stroke-width="2" marker-end="url(#arrowhead)" />
            <line x1="750" y1="50" x2="788" y2="50" stroke="#d4af37" stroke-width="2" marker-end="url(#arrowhead)" />
            <line x1="907" y1="50" x2="955" y2="50" stroke="#d4af37" stroke-width="2" marker-end="url(#arrowhead)" />

            <path d="M 210,107 L 210,170 L 60,170 L 60,82" fill="none" stroke="#ff6347" stroke-width="2" stroke-dasharray="4" marker-end="url(#arrowhead-red)" />
            <path d="M 510,107 L 510,170 L 365,170 L 365,82" fill="none" stroke="#ff6347" stroke-width="2" stroke-dasharray="4" marker-end="url(#arrowhead-red)" />
            <path d="M 850,107 L 850,170 L 685,170 L 685,82" fill="none" stroke="#ff6347" stroke-width="2" stroke-dasharray="4" marker-end="url(#arrowhead-red)" />
          </svg>

          <div class="position-absolute w-100 h-100" style="top:0; left:0; z-index: 1;">
            <div class="position-absolute text-center" style="left: 10px; top: 25px; width: 100px;">
              <div class="p-2 bg-dark-wood text-gold border border-gold rounded shadow-sm fw-bold d-flex align-items-center justify-content-center" style="font-size: 0.75rem; height: 50px;">💧 물</div>
            </div>
            <div class="position-absolute text-center" style="left: 150px; top: 10px; width: 120px;">
              <div class="rhombus bg-warning border border-dark mx-auto" style="width: 80px; height: 80px;">
                <span class="text-dark fw-bold" style="font-size: 0.65rem; transform: rotate(-45deg); line-height: 1.2; display: block; margin-top: 18px;">물이<br>550ml인가?</span>
              </div>
              <span class="text-success fw-bold position-absolute" style="top: 25px; right: -5px; font-size: 0.65rem;">예</span>
              <span class="text-danger fw-bold position-absolute" style="top: 98px; left: 15px; font-size: 0.6rem;">아니오 ➔ (다시 붓기)</span>
            </div>
            <div class="position-absolute text-center" style="left: 310px; top: 25px; width: 110px;">
              <div class="p-2 bg-dark-wood text-gold border border-gold rounded shadow-sm fw-bold d-flex align-items-center justify-content-center" style="font-size: 0.75rem; height: 50px;">🔥 가스불</div>
            </div>
            <div class="position-absolute text-center" style="left: 450px; top: 10px; width: 120px;">
              <div class="rhombus bg-warning border border-dark mx-auto" style="width: 80px; height: 80px;">
                <span class="text-dark fw-bold" style="font-size: 0.65rem; transform: rotate(-45deg); line-height: 1.2; display: block; margin-top: 18px;">보글보글<br>끓는가?</span>
              </div>
              <span class="text-success fw-bold position-absolute" style="top: 25px; right: -5px; font-size: 0.65rem;">예</span>
              <span class="text-danger fw-bold position-absolute" style="top: 98px; left: 15px; font-size: 0.6rem;">아니오 ➔ (더 기다리기)</span>
            </div>
            <div class="position-absolute text-center" style="left: 610px; top: 25px; width: 140px;">
              <div class="p-2 bg-dark-wood text-gold border border-gold rounded shadow-sm fw-bold d-flex align-items-center justify-content-center" style="font-size: 0.68rem; height: 50px; line-height: 1.2;">🍜 면 / 스프 /<br>건더기</div>
            </div>
            <div class="position-absolute text-center" style="left: 790px; top: 10px; width: 120px;">
              <div class="rhombus bg-warning border border-dark mx-auto" style="width: 80px; height: 80px;">
                <span class="text-dark fw-bold" style="font-size: 0.65rem; transform: rotate(-45deg); line-height: 1.2; display: block; margin-top: 18px;">4분이<br>지났는가?</span>
              </div>
              <span class="text-success fw-bold position-absolute" style="top: 25px; right: -5px; font-size: 0.65rem;">예</span>
              <span class="text-danger fw-bold position-absolute" style="top: 98px; left: 15px; font-size: 0.6rem;">아니오 ➔ (계속 끓이기)</span>
            </div>
            <div class="position-absolute text-center" style="left: 960px; top: 25px; width: 110px;">
              <div class="p-2 bg-gold-gradient text-dark border border-gold rounded shadow fw-bold d-flex align-items-center justify-content-center" style="font-size: 0.75rem; height: 50px;">🏆 완벽 완성!</div>
            </div>
          </div>
        </div>

        <div class="alert alert-warning border-0 py-2 text-center shadow-sm font-weight-bold mx-auto mb-3 mt-4" style="font-size: 0.8rem; max-width: 850px;">
          💡 <b>아키텍트의 비밀:</b> '아니오' 화살표가 이전 행동 부품으로 돌아가는 것은 조건을 만족할 때까지 행동을 <b>반복(Loop)</b>하라는 명령입니다!
        </div>

        <div class="text-center pt-2 border-top border-secondary mx-auto" style="max-width: 850px;">
          <p class="text-silver small mb-2" style="font-size: 0.72rem; opacity: 0.85;">
            📢 어떻게 화살표를 연결해야 완벽한 설계도가 되는지 헷갈리는 친구들은 아래 단추를 눌러 마스터 아키텍트의 정답 지도를 확인해 보세요!
          </p>
          <!-- <a href="https://excalidraw.com/#json=GtCiHjrDxTSriFipuR3vY,59BacOK_a_NUHbJJBCAurg" target="_blank" class="btn btn-sm btn-success text-white fw-bold px-3 py-1.5 rounded shadow hover-scale" style="font-size: 0.8rem; text-decoration: none; display: inline-block; background-color: #28a745 !important; border-color: #28a745 !important;">
            🔗 호그와트 마스터의 정답 설계도 확인하기
          </a> -->

          <button type="button" 
            onclick="document.getElementById('answerModal2').style.display='flex'" 
            class="btn btn-sm btn-warning text-dark fw-bold px-3 py-1.5 rounded shadow hover-scale" 
            style="font-size: 0.8rem; border: none; cursor: pointer;">
            🖼️ 호그와트 마스터의 정답 설계도 확인하기
          </button>

          <div id="answerModal2" 
            onclick="this.style.display='none'"
            style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:9999; justify-content:center; align-items:center; cursor:zoom-out;">
            <div style="background:#242529; padding:15px; border-radius:10px; border:2px solid #d4af37; max-width:80%; max-height:80%; position:relative;">
              <h6 class="text-gold mb-2">선생님의 마법 설계도 정답</h6>
              <img src="/achitecture/ramyoen_2.png" 
                  alt="정답 이미지" style="max-width:100%; height:auto; border-radius:5px;">
                  <p class="text-white mt-2 small" style="font-size:0.7rem;">(이미지를 클릭하면 닫힙니다)</p>
            </div>
          </div>
        </div>
        


      </section>

      <section data-background-color="#171921">
        <div class="card card-magic bg-dark-stone text-white p-4 my-3 border border-warning shadow mx-auto" style="max-width: 900px;">
          <h5 class="text-warning fw-bold mb-3"><i class="fa fa-rotate me-2"></i> ⚙️ 실전 작동: 로봇 조리사 루프(Loop) 제어기</h5>
          <p class="text-silver small text-left mb-3">
            [반복 실행] 버튼을 누를 때마다 컴퓨터는 <b>"4분이 지났는가?"</b>라는 조건을 검사합니다. 
            아니오일 경우 계속 불을 켜고 대기(반복)합니다. 타이머를 정확히 맞춰 로봇을 무한 루프에서 구출하세요!
          </p>

          <div class="row align-items-center bg-black rounded p-3 text-center">
            <div class="col-md-4">
              <div class="p-3 rounded border" :class="ramyunLoopClass" style="min-height: 120px; transition: all 0.5s;">
                <span style="font-size: 2.5rem;">{{ ramyunLoopEmoji }}</span>
                <h6 class="fw-bold mt-2 mb-0">{{ ramyunLoopStatus }}</h6>
              </div>
            </div>
            
            <div class="col-md-4 text-left font-monospace text-gold" style="font-size: 0.85rem; line-height: 1.8;">
              <div>• 현재 타이머: <span class="text-white fw-bold fs-5">{{ ramyunMinutes }}</span> 분</div>
              <div>• 가스불 상태: <span :class="ramyunMinutes > 0 && ramyunMinutes < 5 ? 'text-danger' : 'text-secondary'">{{ ramyunMinutes > 0 && ramyunMinutes < 4  ? 'ON 🔥' : 'OFF 💤' }}</span></div>
              <div>• 조건 검사: <span class="text-info">시간 == 4분?</span> -> <b class="text-warning">{{ ramyunMinutes === 4 ? '네! (탈출)' : '아니오 (반복)' }}</b></div>
            </div>

            <div class="col-md-4 d-flex flex-column gap-2">
              <button @click="stepRamyunLoop" class="btn btn-sm btn-outline-warning fw-bold py-2" :disabled="ramyunMinutes >= 5 || ramyunMinutes === 4">
                🔄 1분 끓이기 (Loop 반복)
              </button>
              <button @click="resetRamyunLoop" class="btn btn-sm btn-secondary fw-bold py-1">
                🗑️ 냄비 초기화
              </button>
            </div>
          </div>

          <div v-if="ramyunLoopLog" class="alert mt-3 mb-0 text-center fw-bold text-dark fade-in py-2" :class="ramyunLogClass" style="font-size: 0.82rem;">
            {{ ramyunLoopLog }}
          </div>
        </div>
      </section>

      <section data-background-color="#0a0a0a">
        <div class="text-center w-100 mb-4">
          <h2 class="text-gold font-magic mb-2">⚡ 호그와트 마법 학교에 오신 것을 환영합니다!</h2>
          <p class="text-silver" style="font-size: 0.9rem;">
            본격적인 아키텍트 설계에 앞서, 우리가 지켜야 할 마법 세계의 비밀들을 먼저 확인해 볼까요?
          </p>
        </div>

        <div class="row g-4 w-100 mx-auto align-items-center">
          <div class="col-md-6 text-center">
            <div class="p-1 bg-dark rounded border border-gold shadow position-relative" style="height: 320px; overflow: hidden;">
              <iframe width="100%" height="100%" src="https://www.youtube.com/embed/-yz5_l61QHk" 
                      title="마법 세계 입덕 영상" frameborder="0" 
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                      allowfullscreen style="border-radius: 8px;">
              </iframe>
            </div>
            <span class="text-gold mt-2 d-block font-monospace" style="font-size: 0.75rem;">✨ 마법 세계로 떠나는 첫 번째 관문</span>
          </div>

          <div class="col-md-6 text-center">
            <div class="p-1 bg-dark rounded border border-gold shadow position-relative" style="height: 320px; overflow: hidden;">
              <iframe width="100%" height="100%" src="https://www.youtube.com/embed/nnFmPmkRuO8" 
                      title="해리포터와 호그와트" frameborder="0" 
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                      allowfullscreen style="border-radius: 8px;">
              </iframe>
            </div>
            <span class="text-gold mt-2 d-block font-monospace" style="font-size: 0.75rem;">📜 해리포터 총정리</span>
          </div>
        </div>

        <div class="mt-4 text-center">
          <p class="text-white fw-bold mb-0" style="font-size: 1rem;">
            준비가 되었다면, 이제 <b>[마법의 설계도(엔트리/파이썬)]</b>를 그릴 준비를 마친 것입니다. <br>
            자, 다음 슬라이드로 넘어가 본격직인 아키텍트의 길을 시작해 봅시다!
          </p>
        </div>
      </section>


      <section data-background-color="#140f11">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3 w-100">
          <h3 class="text-gold font-magic mb-0">👥 1일차 2교시 인트로: 호그와트 손님 분석 프로파일</h3>
          <span class="badge bg-gryffindor text-gold py-2 px-3 border border-gold">시나리오 기반 설계</span>
        </div>
        
        <div class="row align-items-center w-100 g-3 text-left">
          <div class="col-md-5 text-center">
            <div class="p-1 bg-dark rounded border border-secondary shadow position-relative" style="height: 310px; overflow: hidden;">
              <iframe width="100%" height="100%" src="https://www.youtube.com/embed/7jKXT4Jdvd4" 
                      title="해리포터와 마법사의 돌 10분 요약" frameborder="0" 
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                      allowfullscreen style="border-radius: 8px;">
              </iframe>
            </div>
            <span class="text-silver opacity-75 d-block mt-2 font-monospace" style="font-size: 0.65rem;">🎬 수업 진입 전 필수 시청: 호그와트 10분 요약 스펠</span>
          </div>
          
          <div class="col-md-7">
            <p class="text-light small mb-2 fw-bold text-warning">🧙‍♂️ 무인 상점 방어벽(IF)을 통과할 4명의 가상 손님 분석 리포트</p>
            <div class="d-flex flex-column gap-2" style="font-size: 0.72rem; line-height: 1.45;">
              <div class="p-2 rounded bg-dark border border-secondary d-flex align-items-start">
                <span class="fs-4 mr-2" style="user-select: none;">👦</span>
                <div><b class="text-success">착한 네빌:</b> 규칙을 자진해서 백프로 지키고 마법 주화(돈)도 딱 맞게 들고 다니는 가장 모범적인 <b>정상 트래픽(Happy Path)</b>.</div>
              </div>
              <div class="p-2 rounded bg-dark border border-secondary d-flex align-items-start">
                <span class="fs-4 mr-2" style="user-select: none;">👱</span>
                <div><b class="text-warning">구경꾼 말포이:</b> 주머니에 돈은 있지만 삐딱하게 매장 안만 돌아다니고 물건은 하나도 안 산 채 그냥 퇴장하려는 <b>예외 필터링 대상</b>.</div>
              </div>
              <div class="p-2 rounded bg-dark border border-secondary d-flex align-items-start">
                <span class="fs-4 mr-2" style="user-select: none;">👨‍🦰</span>
                <div><b class="text-danger">가난한 론:</b> 사고 싶은 마법 과자는 산더미처럼 많은데 가진 돈이 딱 1원 모자라 계산기 출구 작동을 멈추는 <b>잔액 부족 런타임 에러</b>.</div>
              </div>
              <div class="p-2 rounded bg-dark border border-secondary d-flex align-items-start">
                <span class="fs-4 mr-2" style="user-select: none;">⚡</span>
                <div><b class="text-danger fw-bold">낙서 대장 해리:</b> 개구리 초콜릿 바코드 영역에 깃펜으로 낙서를 하거나 훼손해서 포토 센서를 마비시키는 <b>시스템 인식 불능 버그</b>.</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section data-background-color="#191111">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3 w-100">
          <h3 class="text-gold font-magic mb-0">🛒 1일차 2교시: 빈틈없는 규칙, 호그와트 무인 매점 정상 흐름 설계</h3>
          <span class="badge bg-gryffindor text-gold py-2 px-3 border border-gold">Excalidraw</span>
        </div>
        <p class="text-light text-left small mb-3">이제 진짜 무인 시스템을 지탱하는 상상의 주춧돌을 세워봅시다. 밤사이에 관리인 필치 아저씨도 없이 스스로 돌아가는 <b>'호그와트 무인 마법 상점'</b>의 설계도를 그려야 합니다. 아무런 문제가 없는 가장 완벽한 5단계 조리 순서(Happy Path)를 유추해 볼까요?</p>

        <div class="text-center mb-4 w-100">
          <a href="https://excalidraw.com/" target="_blank" class="btn bg-gold-gradient text-dark fw-bold px-4 py-2 rounded-pill shadow hover-scale bounce-hover" style="font-size: 0.85rem; text-decoration: none; display: inline-block;">
            🎨 Excalidraw 화이트보드 광장 열기 (클릭)
          </a>
        </div>

        <div class="row g-3 text-left w-100 mb-3">
          <div class="col">
            <div class="card h-100 border-secondary bg-dark-stone p-3 py-4 text-center card-magic hover-scale">
              <span class="text-gold fw-bold d-block mb-2" style="font-size: 0.85rem;">Step 1. 입장</span>
              <p class="text-silver mb-0" style="font-size: 0.72rem; line-height: 1.4;">상점에 들어가려면 어떤 첫 번째 행동이 필요할까요?</p>
            </div>
          </div>
          <div class="col">
            <div class="card h-100 border-secondary bg-dark-stone p-3 py-4 text-center card-magic hover-scale">
              <span class="text-gold fw-bold d-block mb-2" style="font-size: 0.85rem;">Step 2. 고르기</span>
              <p class="text-silver mb-0" style="font-size: 0.72rem; line-height: 1.4;">안으로 들어왔다면, 사고 싶은 물건들을 어떻게 해야 할까요?</p>
            </div>
          </div>
          <div class="col">
            <div class="card h-100 border-secondary bg-dark-stone p-3 py-4 text-center card-magic hover-scale">
              <span class="text-gold fw-bold d-block mb-2" style="font-size: 0.85rem;">Step 3. 찍기</span>
              <p class="text-silver mb-0" style="font-size: 0.72rem; line-height: 1.4;">고른 물건의 가격을 계산기에 알려주는 방법은 무엇일까요?</p>
            </div>
          </div>
          <div class="col">
            <div class="card h-100 border-secondary bg-dark-stone p-3 py-4 text-center card-magic hover-scale">
              <span class="text-gold fw-bold d-block mb-2" style="font-size: 0.85rem;">Step 4. 내기</span>
              <p class="text-silver mb-0" style="font-size: 0.72rem; line-height: 1.4;">가격이 정해졌으니 마법 동전을 어디에 넣어야 할까요?</p>
            </div>
          </div>
          <div class="col">
            <div class="card h-100 border-secondary bg-dark-stone p-3 py-4 text-center card-magic hover-scale">
              <span class="text-gold fw-bold d-block mb-2" style="font-size: 0.85rem;">Step 5. 나가기</span>
              <p class="text-silver mb-0" style="font-size: 0.72rem; line-height: 1.4;">돈을 다 냈으니 안전하게 문을 열고 탈출해 봅시다!</p>
            </div>
          </div>
        </div>

        <div class="mt-4 pt-3 border-top border-secondary text-center w-100">
          <button @click="toggleHappyPath" class="btn btn-sm btn-outline-warning fw-bold px-4 py-1.5 rounded hover-scale mb-3" style="font-size: 0.8rem;">
            🔓 정상 흐름(Happy Path) 기본 정답 보기 (클릭)
          </button>

          <div v-if="showHappyPath" class="fade-in p-3 rounded-3 bg-dark text-left border border-warning mx-auto mb-3" style="max-width: 950px;">
            <div class="d-flex justify-content-around align-items-center text-dark fw-bold text-center" style="font-size: 0.75rem;">
              <div class="p-2 bg-white rounded shadow-sm border border-secondary">1. 학생 입장</div>
              <i class="fa fa-arrow-right text-gold"></i>
              <div class="p-2 bg-white rounded shadow-sm border border-secondary">2. 마법 물건 고르기</div>
              <i class="fa fa-arrow-right text-gold"></i>
              <div class="p-2 bg-white rounded shadow-sm border border-secondary">3. 마법 바코드 스캔</div>
              <i class="fa fa-arrow-right text-gold"></i>
              <div class="p-2 bg-white rounded shadow-sm border border-secondary">4. 마법 주화 결제</div>
              <i class="fa fa-arrow-right text-gold"></i>
              <div class="p-2 bg-white rounded shadow-sm border border-warning">5. 문 열림 및 퇴장</div>
            </div>
          </div>

          <div class="pt-2">
            <p class="text-silver small mb-2" style="font-size: 0.72rem; opacity: 0.85;">
              📢 나만의 5단계 정상 흐름을 다 그렸다면, 마스터가 미리 준비해 둔 정답 지도와 링크를 비교해 보세요!
            </p>
            <!-- <a href="https://excalidraw.com/#json=4C3qXoXdRagt257HVGT11,ltIDOzjluHOQ1fAmJgM7Rw" target="_blank" class="btn btn-sm btn-success text-white fw-bold px-3 py-1.5 rounded shadow hover-scale" style="font-size: 0.8rem; text-decoration: none; display: inline-block; background-color: #28a745 !important; border-color: #28a745 !important;">
              🔗 호그와트 매점 정상 흐름 정답 확인하기
            </a> -->
            <button type="button" 
              onclick="document.getElementById('answerModal3').style.display='flex'" 
              class="btn btn-sm btn-warning text-dark fw-bold px-3 py-1.5 rounded shadow hover-scale" 
              style="font-size: 0.8rem; border: none; cursor: pointer;">
              🔗 호그와트 매점 정상 흐름 정답 확인하기
            </button>

            <div id="answerModal3" 
              onclick="this.style.display='none'"
              style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:9999; justify-content:center; align-items:center; cursor:zoom-out;">
              <div style="background:#242529; padding:15px; border-radius:10px; border:2px solid #d4af37; max-width:80%; max-height:80%; position:relative;">
                <h6 class="text-gold mb-2">선생님의 마법 설계도 정답</h6>
                <img src="/achitecture/mart_1.png" 
                    alt="정답 이미지" style="max-width:100%; height:auto; border-radius:5px;">
                    <p class="text-white mt-2 small" style="font-size:0.7rem;">(이미지를 클릭하면 닫힙니다)</p>
              </div>
          </div>
          </div>
        </div>
      </section>

      <section data-background-color="#1b1212">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3 w-100">
          <h3 class="text-gold font-magic mb-0">⚔️ 2교시 실전 실습: 돌발 상황 방어벽 구축하기</h3>
          <span class="badge bg-danger text-white py-2 px-3 border border-light">만약에(If) 상자 넣기</span>
        </div>
        <p class="text-silver small text-left mb-3">평화로운 기본 순서는 누구나 쉽게 설계합니다. 진짜 똑똑한 설계자는 나쁜 마음을 먹은 손님이나 기계 고장을 막아내는 <b>'만약에(If) 생각 상자'</b>를 꼼꼼하게 배치하는 사람입니다. 3가지 문제를 방어해 봅시다.</p>

        <div class="row g-2 text-left w-100">
          <!-- 1단계 방어벽 -->
          <div class="col-md-4">
            <div class="card h-100 border-danger bg-dark-stone text-white p-3 shadow-sm card-magic" style="border-left: 5px solid #ff4444 !important;">
              <div class="border-bottom border-secondary pb-2 mb-2">
                <span class="badge bg-danger text-white mb-1" style="font-size: 0.62rem;">[1단계] 입장/퇴장 오류</span>
                <h6 class="text-danger fw-bold mb-0" style="font-size: 0.82rem;">🚨 이런 문제가 생기면?</h6>
                <p class="mb-0 font-weight-bold mt-1 text-silver" style="font-size: 0.75rem; line-height: 1.45;">
                  아무것도 안 사고 그냥 구경만 하고 나가고 싶은데, 돈을 안 냈다고 출구 문이 꽁꽁 잠겨서 못 나갈 때!
                </p>
              </div>
              <div class="pt-2">
                <h6 class="text-success fw-bold mb-1" style="font-size: 0.82rem;">🛡️ 우리가 만들 방어 규칙</h6>
                <p class="mb-0 text-gold fw-bold" style="font-size: 0.72rem; line-height: 1.45;">
                  <b>[만약 고른 물건이 0개보다 많다면?]</b><br>
                  <span class="text-success">예 ➔</span> 바코드 찍기 단계로 계속 진행<br>
                  <span class="text-danger">아니오 ➔</span> 출구 문을 스르륵 열어주고 나가기
                </p>
              </div>
            </div>
          </div>

          <!-- 2단계 방어벽 -->
          <div class="col-md-4">
            <div class="card h-100 border-warning bg-dark-stone text-white p-3 shadow-sm card-magic" style="border-left: 5px solid #ffaa00 !important;">
              <div class="border-bottom border-secondary pb-2 mb-2">
                <span class="badge bg-warning text-dark mb-1 style-weight-bold" style="font-size: 0.62rem;">[2단계] 스캔/인식 오류</span>
                <h6 class="text-warning fw-bold mb-0" style="font-size: 0.82rem;">🚨 이런 문제가 생기면?</h6>
                <p class="mb-0 font-weight-bold mt-1 text-silver" style="font-size: 0.75rem; line-height: 1.45;">
                  마법 과자 봉지가 찢어지거나 낙서가 되어 있어서 계산기 기계에 아무리 찍어도 자꾸 인식이 안 될 때!
                </p>
              </div>
              <div class="pt-2">
                <h6 class="text-success fw-bold mb-1" style="font-size: 0.82rem;">🛡️ 우리가 만들 방어 규칙</h6>
                <p class="mb-0 text-gold fw-bold" style="font-size: 0.72rem; line-height: 1.45;">
                  <b>[만약에 스캔이 성공적으로 됐나요?]</b><br>
                  <span class="text-success">예 ➔</span> 돈을 내는 결제하기 단계로 진행<br>
                  <span class="text-danger">아니오 ➔</span> <b>[스캔 횟수가 3번보다 적은가?]</b>를 한 번 더 확인하여,<br>
                  &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-success">예 ➔</span> 다시 바코드 스캔하기로 돌아가기<br>
                  &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-danger">아니오 ➔</span> 필치 아저씨를 부르는 [도움 요청] 띄우기
                </p>
              </div>
            </div>
          </div>

          <!-- 3단계 방어벽 -->
          <div class="col-md-4">
            <div class="card h-100 border-secondary bg-dark-stone text-white p-3 shadow-sm card-magic" style="border-left: 5px solid #999999 !important;">
              <div class="border-bottom border-secondary pb-2 mb-2">
                <span class="badge bg-secondary text-white mb-1" style="font-size: 0.62rem;">[3단계] 결제/마무리 오류</span>
                <h6 class="text-secondary fw-bold mb-0" style="font-size: 0.82rem;">🚨 이런 문제가 생기면?</h6>
                <p class="mb-0 font-weight-bold mt-1 text-silver" style="font-size: 0.75rem; line-height: 1.45;">
                  동전이 딱 1원 모자라서 결제가 안 되는데, 취소도 안 되고 문도 안 열려서 뒤에 친구들이 줄 서서 기다릴 때!
                </p>
              </div>
              <div class="pt-2">
                <h6 class="text-success fw-bold mb-1" style="font-size: 0.82rem;">🛡️ 우리가 만들 방어 규칙</h6>
                <p class="mb-0 text-gold fw-bold" style="font-size: 0.72rem; line-height: 1.45;">
                  <b>[만약에 낸 돈이 충분한가요?]</b><br>
                  <span class="text-success">예 ➔</span> 결제 완료 후 기분 좋게 나가기<br>
                  <span class="text-danger">아니오 ➔</span> 과자를 돌려놓는 [취소] 버튼으로 연결
                </p>
              </div>
            </div>
          </div>
        </div>

        <div class="alert bg-gold-gradient text-dark border-0 mt-4 p-2 text-center small font-weight-bold shadow-sm w-100">
          💡 <b>오늘의 핵심 정리:</b> 손님이 들어와서 나갈 때까지 생길 수 있는 억울한 일들을 미리 생각해서 <b>'만약에 상자'</b>를 배치하는 게 진짜 멋진 아키텍트랍니다!
        </div>

        <div class="text-center pt-2 border-top border-secondary mx-auto w-100" style="max-width: 850px;">
          <p class="text-silver small mb-2" style="font-size: 0.72rem; opacity: 0.85;">
            📢 친구들의 방어벽 설계도와 마스터 아키텍트의 정답 지도를 직접 비교하며 놓친 구멍이 없는지 확인해 보세요!
          </p>
          
          <button type="button" 
            onclick="document.getElementById('answerModal4').style.display='flex'" 
            class="btn btn-sm btn-warning text-dark fw-bold px-3 py-1.5 rounded shadow hover-scale" 
            style="font-size: 0.8rem; border: none; cursor: pointer;">
            🔗 호그와트 매점 방어 설계 정답 확인하기
          </button>

          <div id="answerModal4" 
            onclick="this.style.display='none'"
            style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:9999; justify-content:center; align-items:center; cursor:zoom-out;">
            <div style="background:#242529; padding:15px; border-radius:10px; border:2px solid #d4af37; max-width:80%; max-height:80%; position:relative;">
              <h6 class="text-gold mb-2">선생님의 마법 설계도 정답</h6>
              <img src="/achitecture/mart_2.png" 
                  alt="정답 이미지" style="max-width:100%; height:auto; border-radius:5px;">
                  <p class="text-white mt-2 small" style="font-size:0.7rem;">(이미지를 클릭하면 닫힙니다)</p>
            </div>
          </div>
        </div>
      </section>

      <section data-background-color="#1b1418">
        <div class="card card-magic bg-dark-stone text-white p-4 my-3 border border-danger shadow mx-auto" style="max-width: 950px;">
          <h5 class="text-danger fw-bold mb-3"><i class="fa fa-shield-halved me-2"></i> ⚔️ 방어벽 가동: 돌발 상황 크래시 테스트</h5>
          <p class="text-silver small text-left mb-3">
            매점에 입장할 손님을 고르고 [시스템 검사 가동]을 눌러보세요. 
            아키텍트님이 배치한 <b>만약에(IF) 규칙 상자</b>가 에러를 어떻게 완벽히 방어해내는지 제어 로그를 추적할 수 있습니다.
          </p>

          <div class="row g-2 mb-3 text-dark fw-bold" style="font-size: 0.75rem;">
            <div v-for="(guest, key) in storeGuests" :key="key" class="col-3">
              <div class="p-2.5 rounded cursor-pointer h-100 border-2 text-center transition"
                  :class="selectedGuestKey === key ? 'bg-warning border-gold shadow' : 'bg-light border-secondary opacity-75 hover-scale'"
                  @click="selectGuest(key)">
                <span style="font-size: 1.5rem; display:block;">{{ guest.emoji }}</span>
                <span class="d-block mt-1 text-truncate">{{ guest.name }}</span>
                <span class="badge bg-dark text-white mt-1" style="font-size: 0.55rem;">{{ guest.condition }}</span>
              </div>
            </div>
          </div>

          <div class="bg-black rounded p-3 text-left font-monospace">
            <div class="d-flex justify-content-between align-items-center border-bottom border-secondary pb-1.5 mb-2">
              <span class="text-mint small"><i class="fa fa-terminal me-1"></i> 중앙 보안 관제 엔진 통신 상태: 정적 운영 중</span>
              <button @click="runStoreDefensiveIf" class="btn btn-xs btn-danger fw-bold px-3 py-1" :disabled="!selectedGuestKey">
                🚀 시스템 검사 가동 (IF 실행)
              </button>
            </div>

            <div style="min-height: 100px; font-size: 0.8rem; line-height: 1.5;">
              <div v-if="storeLogs.length === 0" class="text-muted text-center pt-4">◀ 위 카드에서 손님을 선택한 후 시스템 검증 마법을 작동하세요 ▶</div>
              <div v-for="(log, idx) in storeLogs" :key="idx" class="fade-in mb-1" :class="log.colorClass">
                {{ log.text }}
              </div>
            </div>
          </div>
        </div>
      </section>

      

      <section data-background-color="#0d1117">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3 w-100">
          <h3 class="text-gold font-magic mb-0">🛑 2일차 1교시: 급식실 아키텍처의 트랩 (왜 누군가는 멈춰 서는가?)</h3>
          <span class="badge bg-danger text-white py-2 px-3 border border-light">공간 병목 현상</span>
        </div>

        <div class="row align-items-center w-100 g-3">
          <div class="col-md-5 text-center">
            <div class="p-1 bg-dark rounded border border-secondary shadow position-relative" style="height: 360px; overflow: hidden;">
              <!-- <iframe src="https://excalidraw.com/#json=5rbT3u_T_lUL9wP4i4t3L,TCoMZZDD-eumDV7tZt2nLg" 
                      width="100%" 
                      height="100%" 
                      style="border: none; background-color: #242529; border-radius: 8px;">
              </iframe> -->
              <img src="/achitecture/cafeteria_1.png" alt="급식실 도면" style="width: 100%; height: 100%; object-fit: cover; border-radius: 8px;">
            </div>
            <!-- <div class="mt-2">
              <a href="https://excalidraw.com/#json=5rbT3u_T_lUL9wP4i4t3L,TCoMZZDD-eumDV7tZt2nLg" target="_blank" class="btn btn-xs btn-outline-warning fw-bold py-1 px-3 rounded-pill" style="font-size: 0.65rem; text-decoration: none; display: inline-block;">
                🔍 큰 화면으로 도면 따로 열기 (클릭)
              </a>
            </div> -->
            <p class="text-silver mx-auto mt-1 mb-0" style="font-size: 0.68rem; max-width: 480px;">
              📊 <b>제한 조건:</b> 점심시간마다 <b>약 70명의 학생</b>이 동시에 몰리는 호그와트 간이 급식실
            </p>
          </div>
          
          <div class="col-md-7 text-left">
            <p class="text-light small mb-2">현재 급식실 설계도는 70명이 쓰기에 눈에 보이지 않는 치명적인 <b>'공간적 버그(병목 현상)'</b>가 숨어있습니다. 아래 4가지 문제를 클릭해서 확인해 보세요.</p>
            
            <div class="row g-2">
              <div v-for="(item, idx) in cafeteriaTraps" :key="idx" class="col-md-6">
                <div class="card h-100 border-dark bg-dark-stone hover-scale shadow-sm cursor-pointer" @click="toggleCafeteriaTrap(idx)">
                  <div class="card-header bg-navy text-white fw-bold d-flex justify-content-between align-items-center py-1.5 px-3" style="font-size: 0.75rem;">
                    <span>{{ item.persona }}</span>
                    <span class="text-gold">🚨</span>
                  </div>
                  <div class="card-body bg-light text-dark p-2.5" style="font-size: 0.73rem; min-height: 85px;">
                    <div v-if="!showCafeteriaTrap[idx]" class="text-muted text-center fw-bold pt-2">클릭하여 가로막힌 동선 해독 🖱️</div>
                    <div v-else class="fade-in">
                      <span class="text-danger fw-bold d-block mb-0.5" style="font-size: 0.65rem;">📐 아키텍트의 분석 결과:</span>
                      <p class="mb-0 text-dark opacity-90 fw-bold" style="line-height: 1.35;">{{ item.desc }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="alert alert-warning border-0 mt-3 py-2 text-center shadow-sm font-weight-bold w-100 mx-auto" style="font-size: 0.8rem; max-width: 950px;">
          💡 <b>오늘의 핵심 개념:</b> 모든 위대한 아키텍처는 데이터든 공간이든 사용자가 가로막혀 멈추는 <b>'병목 현상(Bottleneck)'</b>을 제거하는 일에서 출발합니다.
        </div>
      </section>

      <section data-background-color="#111813">
        <!-- 제목 영역 -->
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3 w-100">
          <h3 class="text-gold font-magic mb-0">📐 2일차 1교시: 동선 최적화, 미래형 스마트 호그와트 급식실 설계</h3>
          <span class="badge bg-ravenclaw text-gold py-2 px-3 border border-gold">Excalidraw</span>
        </div>
        
        <div class="d-flex justify-content-between align-items-center mb-3 w-100">
          <p class="text-light text-left small mb-0" style="width: 70%;">
            1교시의 아쉬웠던 구조를 바탕으로, Excalidraw 위에 <b>'누구도 가로막히지 않고 70명이 가장 빠르게 밥을 먹는 공간'</b>을 설계합니다.
          </p>
          <button type="button" 
                  onclick="window.open('https://excalidraw.com/', '_blank', 'noopener,noreferrer')" 
                  class="btn bg-gold-gradient text-dark fw-bold px-4 py-2 rounded-pill shadow hover-scale" 
                  style="font-size: 0.8rem; border: none; cursor: pointer;">
            🎨 새 도화지 열기 (클릭)
          </button>
        </div>

        <!-- [필수 미션] Step 1 ~ 4 -->
        <div class="row g-2 text-left w-100 mb-3">
          <div class="col-md-3">
            <div class="card h-100 border-success bg-dark-stone p-3 card-magic hover-scale" style="border-top: 4px solid #44ff88 !important;">
              <span class="badge bg-success text-white mb-2" style="font-size: 0.6rem; width: fit-content;">Step 1. 계단 트랩 수술</span>
              <h6 class="text-gold fw-bold" style="font-size: 0.8rem;">♿ 평평한 비탈길</h6>
              <p class="text-silver mb-0 mt-1" style="font-size: 0.72rem; line-height: 1.45;">계단을 없애거나 <b>경사로(슬로프)</b>를 추가해 카트가 멈춤 없이 슥 지나가게 설계하세요.</p>
            </div>
          </div>
          <div class="col-md-3">
            <div class="card h-100 border-success bg-dark-stone p-3 card-magic hover-scale" style="border-top: 4px solid #44ff88 !important;">
              <span class="badge bg-success text-white mb-2" style="font-size: 0.6rem; width: fit-content;">Step 2. 입출구 꼬임 수술</span>
              <h6 class="text-gold fw-bold" style="font-size: 0.8rem;">🚪 나가는 문 분리</h6>
              <p class="text-silver mb-0 mt-1" style="font-size: 0.72rem; line-height: 1.45;">들어오고 나가는 문을 쪼개세요. <b>일방통행 동선</b>을 만들면 줄이 엉키지 않아요!</p>
            </div>
          </div>
          <div class="col-md-3">
            <div class="card h-100 border-success bg-dark-stone p-3 card-magic hover-scale" style="border-top: 4px solid #44ff88 !important;">
              <span class="badge bg-success text-white mb-2" style="font-size: 0.6rem; width: fit-content;">Step 3. 좁은 통로 수술</span>
              <h6 class="text-gold fw-bold" style="font-size: 0.8rem;">📏 안전거리 확보</h6>
              <p class="text-silver mb-0 mt-1" style="font-size: 0.72rem; line-height: 1.45;">의자를 뒤로 바짝 빼고 앉아도 뒤로 사람이 여유롭게 걸어갈 수 있게 <b>통로를 넓혀줍니다.</b></p>
            </div>
          </div>
          <div class="col-md-3">
            <div class="card h-100 border-success bg-dark-stone p-3 card-magic hover-scale" style="border-top: 4px solid #44ff88 !important;">
              <span class="badge bg-success text-white mb-2" style="font-size: 0.6rem; width: fit-content;">Step 4. 반납구 충돌 수술</span>
              <h6 class="text-gold fw-bold" style="font-size: 0.8rem;">🔄 출구 근처 반납</h6>
              <p class="text-silver mb-0 mt-1" style="font-size: 0.72rem; line-height: 1.45;">퇴식구를 <b>가장 먼 구석이나 출구 옆</b>으로 던져 역주행할 이유를 없애세요!</p>
            </div>
          </div>
        </div>

        <div class="alert bg-dark-wood border border-gold mt-2 py-2 px-3 text-center shadow-sm w-100 mb-3" style="color: #d4af37; font-size: 0.75rem;">
          💬 <b>아키텍트의 금언:</b> "돈이나 사람이 물 흐르듯 멈추지 않는 구조를 찾는 것이 <b>최적화(Optimization)</b>란다."
        </div>

        <!-- [수정됨] 2분할 영역: 글씨 크기 확대 및 행간 최적화 -->
        <div class="row g-2 w-100 text-left mx-auto mb-3">
          
          <!-- 1. 마스터 퀘스트 -->
          <div class="col-md-6">
            <div class="card bg-black border border-warning h-100 p-3 shadow-sm" style="border-style: dashed !important; border-width: 1.5px !important;">
              <h6 class="text-warning fw-bold mb-3" style="font-size: 0.85rem;"><i class="fa fa-star me-1"></i> 마스터 퀘스트 (선택 도전)</h6>
              <div class="d-flex flex-column gap-3">
                <div class="d-flex align-items-start">
                  <span class="fs-5 me-2">🔍</span>
                  <div style="line-height: 1.4;">
                    <span class="text-gold fw-bold d-block" style="font-size: 0.75rem;">Q1. 정보 병목 해결</span>
                    <span class="text-silver" style="font-size: 0.72rem;">줄 서면서 미리 메뉴를 결정하게 하려면?</span>
                  </div>
                </div>
                <div class="d-flex align-items-start">
                  <span class="fs-5 me-2">🚨</span>
                  <div style="line-height: 1.4;">
                    <span class="text-gold fw-bold d-block" style="font-size: 0.75rem;">Q2. 돌발 사고(예외 처리)</span>
                    <span class="text-silver" style="font-size: 0.72rem;">식판 엎은 친구가 수습할 대피 공간은?</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 2. 동선 검증 -->
          <div class="col-md-6">
            <div class="card bg-black border border-info h-100 p-3 shadow-sm">
              <h6 class="text-info fw-bold mb-2" style="font-size: 0.85rem;"><i class="fa fa-pen-nib me-1"></i> UX 동선 검증 테스트</h6>
              <p class="text-silver mb-2" style="font-size: 0.72rem; line-height: 1.45;">
                진짜 아키텍트는 사람들의 동선을 미리 그려서 충돌을 예방합니다.
              </p>
              <ul class="text-white small mb-0 ps-3" style="font-size: 0.72rem; line-height: 1.7;">
                <li><span class="text-danger fw-bold">🔴 밥 먹으러 가는 길</span> (입구➔배식대➔자리)</li>
                <li><span class="text-info fw-bold">🔵 다 먹고 나가는 길</span> (자리➔퇴식구➔출구)</li>
                <li class="text-warning mt-2" style="list-style-type: none; margin-left: -1rem;"><b>💡 체크:</b> 두 선이 십자가(X)로 부딪히진 않나요?</li>
              </ul>
            </div>
          </div>

        </div>

        <!-- 3. 페들렛 제출 -->
        <div class="text-center pt-2 mx-auto w-100" style="max-width: 850px;">
          <p class="text-silver small mb-2" style="font-size: 0.75rem; opacity: 0.9;">
            📸 선 그리기까지 통과했다면 도화지를 캡처해서 패들렛에 제출하고,<br>친구들 도면에 <b>'멋진 점 1개, 아쉬운 점 1개'</b> 리뷰를 달아주세요!
          </p>
          <a href="https://padlet.com/swhacademy/padlet-12m4cejjbdou3wcz" target="_blank" 
             class="btn text-white fw-bold px-5 py-2 rounded-pill shadow-lg hover-scale bounce-hover mt-1" 
             style="font-size: 0.85rem; background: linear-gradient(135deg, #ff69b4, #ff1493); text-decoration: none; display: inline-block; border: 2px solid #ffb6c1;">
            📌 내 급식실 설계도 패들렛에 자랑하기 (클릭)
          </a>
        </div>
        
      </section>

      <section data-background-color="#0f141c">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3 w-100">
          <h3 class="text-gold font-magic mb-0">⚡ 2일차 2교시: 지옥의 급식 줄을 뚫어라! "줄 나누기 분신술 마법"</h3>
          <span class="badge bg-warning text-dark py-2 px-3 border border-dark">동시에 일 처리하기 (분산)</span>
        </div>
        <p class="text-silver small text-left mb-4">1교시에 가구 배치와 문 위치를 예쁘게 고쳤나요? 하지만 여전히 70명이 한 줄로만 서면 밥 먹는 속도가 너무 느려요! 슈퍼컴퓨터가 일을 엄청나게 빨리 처리할 때 쓰는 <b>첫 번째 비밀 마법</b>을 배워봅시다.</p>

        <div class="row g-3 text-left w-100">
          <div class="col-md-6">
            <div class="card h-100 border-danger bg-dark-stone text-white p-3 shadow-sm card-magic" style="border-top: 5px solid #ff4444 !important;">
              <h5 class="text-danger fw-bold mb-2" style="font-size: 0.85rem;"><i class="fa fa-hourglass-start me-2"></i> 구조 A. 답답한 1줄 서기</h5>
              <p class="text-silver mb-3" style="font-size: 0.75rem; line-height: 1.5;">
                배식대 딱 1개에 70명이 차례대로 줄을 서는 방식입니다. 맨 앞 친구가 국을 흘리거나 숟가락을 떨어뜨려서 지연되면, 그 뒤에 서 있는 69명의 친구들이 아무 이유 없이 길 한복판에 통째로 멈춰 서야 합니다.
              </p>
              <div class="p-2 bg-dark rounded border border-danger text-center text-danger small fw-bold" style="font-size: 0.7rem;">
                🚨 컴퓨터 버그 이름: 한 줄 밀림 현상 (Single-Thread Bottleneck)
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="card h-100 border-success bg-dark-stone text-white p-3 shadow-sm card-magic" style="border-top: 5px solid #00ff66 !important;">
              <h5 class="text-success fw-bold mb-2" style="font-size: 0.85rem;"><i class="fa fa-code-fork me-2"></i> 구조 B. 마법의 2줄 나누기</h5>
              <p class="text-silver mb-3" style="font-size: 0.75rem; line-height: 1.5;">
                배식대를 왼쪽과 오른쪽 2개로 쪼개어 분신술을 씁니다! 그리고 입구에 <b>"얘들아, 양쪽 중에서 줄이 더 짧은 쪽으로 흩어져서 서라!"</b>고 명령하는 마름모 질문 상자를 두는 것입니다. 일을 동시에 처리하니 속도가 2배로 빨라집니다!
              </p>
              <div class="p-2 bg-dark rounded border border-success text-center text-success small fw-bold" style="font-size: 0.7rem;">
                ✨ 컴퓨터 마법 이름: 일을 나누어 처리하기 (Load Balancing)
              </div>
            </div>
          </div>
        </div>

        <div class="card bg-dark border border-warning mt-4 p-3 mx-auto w-100 text-left" style="max-width: 950px;">
          <h6 class="text-warning fw-bold mb-1" style="font-size: 0.82rem;"><i class="fa fa-laptop-code me-2"></i> 아키텍트 마스터의 1차 진화 지령:</h6>
          <p class="text-white small mb-0" style="font-size: 0.75rem; line-height: 1.55;">
            "자, 이제 1교시에 그렸던 내 Excalidraw 급식실 설계도를 다시 화면에 띄우세요! 메인 배식대를 똑같이 하나 더 복사해서 <b>2개의 배식 구역</b>으로 만드세요. 그리고 줄이 시작되는 입구 길목에 <b>[어느 쪽 줄이 더 짧은가?]라는 노란색 마름모 질문 상자</b>를 넣어서 줄을 멋지게 갈라보세요!"
          </p>
        </div>
      </section>

      <section data-background-color="#141a29">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3 w-100">
          <h3 class="text-gold font-magic mb-0">🧠 아키텍트 해독기: 우리 삶 속의 "분산 처리"</h3>
          <span class="badge bg-primary text-white py-2 px-3 border border-light">일상생활 속 예시</span>
        </div>
        <p class="text-silver small text-left mb-4">컴퓨터 개발자들이 말하는 '분산 처리'는 사실 우리가 매일 지나치는 일상 속에 이미 숨어있습니다. 어떤 차이가 있는지 눈으로 확인해 보세요!</p>

        <div class="row g-3 text-left w-100">
          <div class="col-md-6">
            <div class="card h-100 border-secondary bg-dark-stone p-3 card-magic">
              <h5 class="text-gold fw-bold mb-2" style="font-size: 0.85rem;"><i class="fa fa-cart-shopping me-2"></i> 예시 1. 주말 대형마트의 계산대</h5>
              <p class="text-silver mb-0" style="font-size: 0.72rem; line-height: 1.5;">
                만약 마트에 손님이 수백 명인데 <b>계산대가 딱 1개(한 줄 처리)</b>라면 한 사람당 1시간씩 기다려야 할 거예요. 하지만 마트 사장님은 계산대를 <b>1번부터 10번까지 옆으로 길게 복사(분산 처리)</b>해서 손님들을 나누어 받습니다. 덕분에 줄이 밀리지 않고 금방 계산이 끝난답니다!
              </p>
            </div>
          </div>

          <div class="col-md-6">
            <div class="card h-100 border-secondary bg-dark-stone p-3 card-magic">
              <h5 class="text-gold fw-bold mb-2" style="font-size: 0.85rem;"><i class="fa fa-car me-2"></i> 예시 2. 명절 고속도로 톨게이트</h5>
              <p class="text-silver mb-0" style="font-size: 0.72rem; line-height: 1.5;">
                좁은 1차선 도로를 달리던 수천 대의 자동차들이 톨게이트 요금소에 도착하면 <b>갑자기 도로가 15개 요금소(분산 처리)로 확 넓어지는 것</b>을 본 적이 있나요? 차를 여러 갈래로 분산시켜서 빠르게 통과시킨 뒤, 다시 한 길로 모으는 아주 똑똑한 교통 아키텍처입니다!
              </p>
            </div>
          </div>
        </div>

        <div class="card border-0 mt-4 p-3 bg-dark mx-auto w-100 text-left" style="max-width: 950px; border-left: 4px solid #d4af37 !important;">
          <div class="row text-center fw-bold text-white" style="font-size: 0.75rem;">
            <div class="col-md-5 bg-dark-stone rounded p-2 text-danger">🛑 1줄 처리: 한 명이 다 하기 때문에 앞사람이 늦어지면 무조건 전체 폭파!</div>
            <div class="col-md-2 d-flex align-items-center justify-content-center text-gold fs-5">VS</div>
            <div class="col-md-5 bg-dark-stone rounded p-2 text-success">✨ 분산 처리: 여러 명에게 일을 나누기 때문에 한 군데가 막혀도 다른 쪽은 쌩쌩!</div>
          </div>
        </div>
      </section>

      <section data-background-color="#111625">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3 w-100">
          <h3 class="text-gold font-magic mb-0">⚡ 2일차 2교시: 지옥의 급식 줄을 뚫어라! "따로 빼두기 셀프바 마법"</h3>
          <span class="badge bg-info text-dark py-2 px-3 border border-dark">임시 저장소 활용 (캐싱)</span>
        </div>
        <p class="text-silver small text-left mb-4">줄을 2개로 나눴는데도 아직 정체가 생기나요? 자세히 보니 밥과 고기를 잘 받아두고는, 맨 끝에서 <b>숟가락을 집고 물을 마시느라</b> 줄이 또 길어지고 있네요! 천재 개발자들의 <b>두 번째 비밀 마법</b>을 알아봅시다.</p>

        <div class="row g-3 text-left w-100">
          <div class="col-md-6">
            <div class="card h-100 border-danger bg-dark-stone text-white p-3 shadow-sm card-magic" style="border-top: 5px solid #ff4444 !important;">
              <h5 class="text-danger fw-bold mb-2" style="font-size: 0.85rem;"><i class="fa fa-folder-minus me-2"></i> 구조 A. 한 곳에 뭉쳐둔 보관소</h5>
              <p class="text-silver mb-3" style="font-size: 0.75rem; line-height: 1.5;">
                수저, 젓가락, 물, 휴지처럼 모든 학생이 무조건 가져가는 물건들을 배식대 맨 끝자리에 뭉쳐둔 구조입니다. 수저를 고르고 정수기 물을 따르는 시간 때문에 메인 배식 줄이 자꾸 끊기고 밀리게 됩니다.
              </p>
              <div class="p-2 bg-dark rounded border border-danger text-center text-danger small fw-bold" style="font-size: 0.7rem;">
                🚨 컴퓨터 버그 이름: 메인 데이터 병목 현상
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="card h-100 border-info bg-dark-stone text-white p-3 shadow-sm card-magic" style="border-top: 5px solid #00c0ff !important;">
              <h5 class="text-info fw-bold mb-2" style="font-size: 0.85rem;"><i class="fa fa-bolt me-2"></i> 구조 B. 미리 빼둔 독립 셀프바</h5>
              <p class="text-silver mb-3" style="font-size: 0.75rem; line-height: 1.5;">
                자주 찾는 수저통과 정수기를 배식대 밖으로 멀리 던져서 <b>'독립된 셀프 바'</b>로 따로 차려줍니다! 밥과 국만 빠르게 받은 뒤, 넓은 광장에 나온 사람들이 알아서 수저를 챙기니 배식 속도가 번개처럼 빨라집니다.
              </p>
              <div class="p-2 bg-dark rounded border border-info text-center text-info small fw-bold" style="font-size: 0.7rem;">
                ✨ 컴퓨터 마법 이름: 임시 저장소 활용하기 (Caching)
              </div>
            </div>
          </div>
        </div>

        <div class="card bg-dark border border-warning mt-4 p-3 mx-auto w-100 text-left" style="max-width: 950px;">
          <h6 class="text-warning fw-bold mb-1" style="font-size: 0.82rem;"><i class="fa fa-laptop-code me-2"></i> 아키텍트 마스터의 2차 진화 지령:</h6>
          <p class="text-white small mb-0" style="font-size: 0.75rem; line-height: 1.55;">
            "자, 앞서 수술했던 내 설계도를 다시 최종 진화시킬 시간입니다! 복잡한 배식대 구역 안에 갇혀있던 <b>[수저통]과 [정수기]</b> 상자를 마우스로 잡아서 완전히 밖으로 꺼내세요. 그리고 학생들이 밥을 다 받고 식탁으로 걸어가는 길목이나 텅 빈 중앙 공간에 <b>'독립 셀프바(캐시 보관소)'</b>를 따로 설치해 보세요!"
          </p>
        </div>
      </section>

      <section data-background-color="#161f38">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3 w-100">
          <h3 class="text-gold font-magic mb-0">🧠 아키텍트 해독기: 우리 삶 속의 "캐시(Cache)"</h3>
          <span class="badge bg-info text-dark py-2 px-3 border border-dark">임시 보관소 활용</span>
        </div>
        <p class="text-silver small text-left mb-4">멀리 있는 커다란 창고까지 가기 귀찮아서 내 방에 자주 쓰는 물건을 꺼내두는 것, 그것이 컴퓨터 공학의 핵심인 '캐시(임시 보관소)' 기법입니다!</p>

        <div class="row g-3 text-left w-100">
          <div class="col-md-6">
            <div class="card h-100 border-secondary bg-dark-stone p-3 card-magic">
              <h5 class="text-info fw-bold mb-2" style="font-size: 0.85rem;"><i class="fa fa-glass-water me-2"></i> 예시 1. 식탁 위에 미리 꺼내둔 물병</h5>
              <p class="text-silver mb-0" style="font-size: 0.72rem; line-height: 1.5;">
                목이 마를 때마다 매번 주방 구석에 있는 <b>커다란 냉장고(메인 창고)</b>까지 걸어가서 물을 꺼내 마신다면 엄청 귀찮고 시간이 오래 걸리겠죠? 그래서 우리는 밥 먹기 전에 냉장고에서 시원한 물병을 통째로 꺼내 <b>식탁 위(캐시 임시 보관소)</b>에 둡니다. 필요할 때 1초 만에 바로 마실 수 있는 영리한 방법입니다!
              </p>
            </div>
          </div>

          <div class="col-md-6">
            <div class="card h-100 border-secondary bg-dark-stone p-3 card-magic">
              <h5 class="text-info fw-bold mb-2" style="font-size: 0.85rem;"><i class="fa fa-pencil me-2"></i> 예시 2. 내 책상 위에 올려둔 필통</h5>
              <p class="text-silver mb-0" style="font-size: 0.72rem; line-height: 1.5;">
                수업 시간에 연필, 지우개, 자가 필요할 때마다 교실 뒤편에 있는 <b>개인 사물함(메인 저장소)</b>에 매번 걸어갔다 오는 친구가 있다면 공부 흐름이 뚝뚝 끊길 거예요. 우리는 자주 쓰는 필기구들을 <b>내 책상 위 필통(캐시 메모리)</b>에 모아서 올려놓고 씁니다. 바로 이 원리가 캐싱입니다!
              </p>
            </div>
          </div>
        </div>

        <div class="card border-0 mt-4 p-3 bg-dark mx-auto w-100 text-left" style="max-width: 950px; border-left: 4px solid #00c0ff !important;">
          <div class="row text-center fw-bold text-white" style="font-size: 0.75rem;">
            <div class="col-md-5 bg-dark-stone rounded p-2 text-danger">❌ 캐시 없을 때: 물건 하나 필요할 때마다 먼 본부 창고까지 매번 왕복하느라 하루 종일 걸림!</div>
            <div class="col-md-2 d-flex align-items-center justify-content-center text-info fs-5">VS</div>
            <div class="col-md-5 bg-dark-stone rounded p-2 text-info">✨ 캐시 있을 때: 자주 쓰는 걸 내 눈앞에 미리 복사해 두기 때문에 눈 깜짝할 사이에 끝남!</div>
          </div>
        </div>

        <div class="text-center pt-3 mt-3 border-top border-secondary mx-auto w-100" style="max-width: 850px;">
          <p class="text-silver small mb-2" style="font-size: 0.75rem; opacity: 0.9;">
            📸 새롭게 고쳤나요? 바뀐 설계도를 다시 캡처 혹은 링크복사하여 올려봅시다!
          </p>
          <a href="https://padlet.com/swhacademy/padlet-12m4cejjbdou3wcz" target="_blank" 
             class="btn text-white fw-bold px-4 py-2 rounded-pill shadow-lg hover-scale bounce-hover" 
             style="font-size: 0.85rem; background: linear-gradient(135deg, #ff69b4, #ff1493); text-decoration: none; display: inline-block; border: 2px solid #ffb6c1;">
            📌 바뀐 설계도 페들렛에 다시 자랑하기 (클릭)
          </a>
          <p class="text-silver small mb-2" style="font-size: 1rem; opacity: 0.9;">
            📸 자신의 급식실 최적의 동선을 소개해주세요!
          </p>
        </div>
      </section>

      <section data-background-color="#111c24">
        <div class="card card-magic bg-dark-stone text-white p-4 my-2 border border-info shadow mx-auto" style="max-width: 950px;">
          <h5 class="text-info fw-bold mb-2"><i class="fa fa-gauge-high me-2"></i> 📊 실전 가동: 미래형 급식실 부하 테스트 & 처리 속도 측정 엔진</h5>
          <p class="text-silver small text-left mb-3">
            구조를 바꾸면 성능이 얼마나 빨라질까요? 아키텍처 모드를 선택하고 70명의 손님을 동시에 진입시켜 <b>1초당 몇 명이 밥을 받는지(처리 속도)</b>와 정체 현상을 계측해 보세요!
          </p>

          <div class="row g-2 text-dark fw-bold mb-3" style="font-size: 0.72rem;">
            <div class="col-4">
              <div class="p-2 rounded cursor-pointer h-100 border text-center transition"
                   :class="simDay2Mode === 'single' ? 'bg-danger text-white border-danger shadow' : 'bg-light border-secondary opacity-75'"
                   @click="setDay2Mode('single')">
                <span class="d-block fw-bold">❌ 아키텍처 A</span>
                <span>레거시 1줄 서기 (수저 병목)</span>
              </div>
            </div>
            <div class="col-4">
              <div class="p-2 rounded cursor-pointer h-100 border text-center transition"
                   :class="simDay2Mode === 'multi' ? 'bg-warning text-dark border-warning shadow' : 'bg-light border-secondary opacity-75'"
                   @click="setDay2Mode('multi')">
                <span class="d-block fw-bold">⚡ 아키텍처 B</span>
                <span>분산 2줄 분신술 마법</span>
              </div>
            </div>
            <div class="col-4">
              <div class="p-2 rounded cursor-pointer h-100 border text-center transition"
                   :class="simDay2Mode === 'cache' ? 'bg-success text-white border-success shadow' : 'bg-light border-secondary opacity-75'"
                   @click="setDay2Mode('cache')">
                <span class="d-block fw-bold">✨ 아키텍처 C</span>
                <span>분산 처리 + 캐시 셀프바</span>
              </div>
            </div>
          </div>

          <div class="row align-items-center bg-black rounded p-3 font-monospace text-left" style="font-size: 0.8rem;">
            <div class="col-md-7 border-end border-secondary pr-3" style="line-height: 1.8;">
              <div class="text-mint fw-bold mb-2"><i class="fa fa-server me-1"></i> 인프라 운영 지표 메인보드</div>
              <div>• 대기 상태 학생 인원수: <span class="text-danger fw-bold fs-5">{{ simDay2Waiting }}</span> 명 / 70명</div>
              <div>• 무사히 밥을 먹은 인원: <span class="text-success fw-bold fs-5">{{ simDay2Processed }}</span> 명</div>
              <div class="progress bg-secondary my-2" style="height: 12px;">
                <div class="progress-bar progress-bar-striped progress-bar-animated" 
                     :class="simDay2Mode === 'cache' ? 'bg-success' : (simDay2Mode === 'multi' ? 'bg-warning' : 'bg-danger')"
                     :style="{ width: (simDay2Processed / 70 * 100) + '%' }"></div>
              </div>
            </div>
            <div class="col-md-5 pl-3 text-center">
              <div class="text-gold fw-bold mb-1" style="font-size: 0.75rem;">실시간 처리 스펙</div>
              <div class="fs-4 text-white fw-bold mb-3">{{ simDay2Tps }} <span style="font-size: 0.8rem; color:#aaa;">명/초</span></div>
              <div class="d-flex gap-2 justify-content-center">
                <button @click="runDay2Simulation" class="btn btn-sm btn-info fw-bold text-dark px-3" :disabled="simDay2Waiting <= 0">🚀 트래픽 가동</button>
                <button @click="resetDay2Simulation" class="btn btn-sm btn-outline-secondary btn-xs px-2">🗑️ 리셋</button>
              </div>
            </div>
          </div>

          <div class="mt-2 text-left text-silver font-monospace" style="font-size: 0.65rem; height: 120px; overflow-y: auto; background: #000; padding: 8px 12px; border-radius: 4px;">
            <div v-for="(log, idx) in simDay2Logs" :key="idx" class="d-flex align-items-start mb-1 text-silver">
              <span class="text-info fw-bold mr-2" style="user-select: none;">➜</span>
              <span class="text-left w-100">{{ log }}</span>
            </div>
          </div>
        </div>
      </section>
      <section data-background-color="#0d1117">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3 w-100">
          <h3 class="text-gold font-magic mb-0">📱 2일차 2교시: 급식 프리패스 앱 UX 드래그 앤 드롭 빌더</h3>
          <span class="badge bg-primary text-white py-2 px-3 border border-light">와이어프레임(Wireframe)</span>
        </div>
        <p class="text-silver small text-left mb-3">학생들이 폰으로 미리 밥을 예약하고 바코드만 찍고 들어갈 수 있는 <b>'급식 프리패스 앱'</b>을 만듭니다. 왼쪽의 부품들을 오른쪽 스마트폰 화면으로 마우스로 끌어다 놓으며(Drag & Drop) 가장 누르기 편한 순서로 배치해 보세요!</p>

        <div class="row w-100 mx-auto mt-4">
          <!-- 1. UX 부품 상자 -->
          <div class="col-md-6">
            <div class="card bg-dark-stone border border-secondary p-3 h-100 text-left">
              
              <!-- 제목 영역 및 초기화 버튼 -->
              <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="text-info fw-bold mb-0"><i class="fa fa-cubes me-2"></i> UX 부품 상자 (Drag)</h6>
                <button type="button" @click="resetUxBuilder" class="btn btn-xs btn-outline-secondary text-light px-2 py-1" style="font-size: 0.7rem;">
                  <i class="fa fa-rotate-right me-1"></i>처음으로
                </button>
              </div>

              <!-- Vue 바인딩 적용: @drop, @dragover.prevent -->
              <div id="ux-toolbox" class="d-flex flex-column gap-2 p-2" style="min-height: 350px; border: 2px dashed #666; border-radius: 8px; background: #1a1b20;" 
                   @drop="dropUx" @dragover.prevent>
                
                <!-- Vue 바인딩 적용: @dragstart -->
                 <div id="ux-1" class="bg-danger text-white p-2.5 rounded border border-danger text-center shadow-sm" style="cursor: grab;" draggable="true" @dragstart="dragUx">
                  <i class="fa fa-ban me-2"></i> 알레르기 반찬 빼기 체크
                </div>
                <div id="ux-2" class="bg-dark text-white p-2.5 rounded border border-secondary text-center shadow-sm" style="cursor: grab;" draggable="true" @dragstart="dragUx">
                  <i class="fa fa-user me-2"></i> 학생증 로그인 화면
                </div>                
                <div id="ux-3" class="bg-warning text-dark fw-bold p-2.5 rounded border border-warning text-center shadow-sm hover-scale" style="cursor: grab;" draggable="true" @dragstart="dragUx">
                  <i class="fa fa-bolt me-2"></i> 1초 원클릭 예약 버튼
                </div>
                <div id="ux-4" class="bg-light text-dark p-2.5 rounded border border-white text-center shadow-sm" style="cursor: grab;" draggable="true" @dragstart="dragUx">
                  <i class="fa fa-barcode me-2"></i> 식당 입장용 바코드
                </div>
                <div id="ux-5" class="bg-primary text-white p-2.5 rounded border border-primary text-center shadow-sm" style="cursor: grab;" draggable="true" @dragstart="dragUx">
                  <i class="fa fa-utensils me-2"></i> 오늘의 급식 메뉴 사진
                </div>

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

          <!-- 2. 스마트폰 화면 (드롭 영역) -->
          <div class="col-md-6 d-flex justify-content-center">
            <div class="smartphone-frame bg-black border border-secondary shadow-lg position-relative" style="width: 260px; height: 480px; border-width: 10px !important; border-radius: 2rem; overflow: hidden;">
              <!-- 폰 상단바 -->
              <div class="bg-dark text-center py-2 border-bottom border-secondary d-flex justify-content-between px-3">
                <span class="text-white small fw-bold">9:41</span>
                <span class="text-white small"><i class="fa fa-wifi me-1"></i><i class="fa fa-battery-full"></i></span>
              </div>
              <div class="text-center bg-black text-silver py-1 border-bottom border-dark" style="font-size: 0.65rem;">호그와트 퀵-급식 App</div>
              
              <!-- Vue 바인딩 적용: @drop, @dragover.prevent -->
              <div id="ux-screen" class="d-flex flex-column gap-2 p-3 bg-black" style="height: 400px; overflow-y: auto;" 
                   @drop="dropUx" @dragover.prevent>
                <div id="placeholder-text" class="text-muted text-center small mt-5" style="pointer-events: none;">
                  <i class="fa fa-arrow-down mb-2 fs-4"></i><br>부품을 이곳으로 드래그하여<br>앱 화면을 완성하세요
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section data-background-color="#0b101d">
        <div class="d-flex justify-content-between align-items-center border-bottom border-primary pb-2 mb-3 w-100">
          <h3 class="text-info font-magic mb-0">🐾 3일차 1교시: 신비한 동물 생태계 부활의 마법</h3>
          <span class="badge bg-primary text-white py-2 px-3 border border-info">플로우차트 (Flowchart.fun)</span>
        </div>
        
        <p class="text-silver text-left small mb-3" style="font-size: 0.8rem; line-height: 1.5;">
          뉴트 스캐맨더의 마법 가방 속에는 각기 다른 생김새와 성격을 가진 수많은 신비한 동물들이 살아 숨 쉬고 있습니다. <b>과연 나만의 신비한 동물을 디지털 세상에 새롭게 창조하려면 어떻게 해야 할까요?</b> 영상 속 동물들의 특징을 관찰하며 상상력을 깨워봅시다!
        </p>

        <!-- YouTube 영상 임베드 영역 (크기 축소: max-width 640px) -->
        <div class="ratio ratio-16x9 mx-auto mb-3 border border-secondary shadow-lg rounded" style="max-width: 640px; overflow: hidden; background-color: #000;">
          <iframe 
            src="https://www.youtube.com/embed/yep5sEha-bk?autoplay=0&rel=0&modestbranding=1" 
            title="신비한 동물사전 트레일러" 
            frameborder="0" 
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
            allowfullscreen>
          </iframe>
        </div>

        <!-- 아키텍트의 시선 (개념 연결 설명) -->
        <div class="card card-magic bg-dark-stone border-info border-2 p-3 text-left shadow-sm mx-auto w-100" style="max-width: 900px;">
          <div class="d-flex align-items-start">
            <div class="text-info fs-3 me-3 mt-1"><i class="fa fa-wand-magic-sparkles"></i></div>
            <div>
              <h6 class="text-info fw-bold mb-1" style="font-size: 0.85rem;">아키텍트의 시선 해독기</h6>
              <p class="text-silver mb-0" style="font-size: 0.75rem; line-height: 1.55;">
                영상 속 동물들은 반짝이는 물건을 훔치거나(니플러), 자물쇠를 따는(보우트러클) 등 저마다의 독특한 행동 패턴과 특징을 가지고 있습니다. 아키텍트는 생명체를 창조할 때, 그 동물의 성격, 서식지, 마법 능력을 한눈에 볼 수 있도록 <b>플로우차트(흐름도)</b>로 먼저 구조화합니다. <br>
                <span class="text-warning fw-bold mt-2 d-block">
                  이제 타자기 치듯 글자만 입력하면 마법처럼 다이어그램 구조가 자동으로 그려지는 <b>Flowchart.fun</b> 엔진을 사용해서, 내 머릿속에만 잠들어 있던 '나만의 신비한 동물' 구조도를 직접 설계해 봅시다!
                </span>
              </p>
            </div>
          </div>
        </div>
      </section>

      <section data-background-color="#0b101d">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3 w-100">
          <h3 class="text-info font-magic mb-0">⌨️ 마법 도구 사용법: Flowchart.fun 완전 정복!</h3>
          <span class="badge bg-hufflepuff text-dark py-2 px-3 border border-dark fw-bold">도구 사용법 (Tutorial)</span>
        </div>
        <p class="text-light text-left small mb-3">3일차부터는 마우스로 그림을 그리는 대신, <b>키보드로 타이핑</b>하면 자동으로 생각의 지도가 그려지는 신비한 도구를 사용합니다. 영상으로 먼저 기본 화면 구성을 살펴볼까요?</p>

        <div class="row align-items-start w-100 g-3">
          <div class="col-md-6 text-center">
            <div class="p-1 bg-dark rounded border border-secondary shadow position-relative" style="height: 300px; overflow: hidden;">
              <!--
                [선생님 안내] 아래는 임시로 넣어둔 영상 자리입니다.
                실제 수업 전, 화면 녹화한 "Flowchart.fun 기본 사용법" 캡처 영상을
                /achitecture/flowchartfun_tutorial.mp4 경로에 업로드하거나,
                아래 <video> 블록을 유튜브 <iframe> embed로 교체해주세요.
              -->
              <video width="100%" height="100%" controls style="border-radius: 8px; background:#000;">
                <source src="/achitecture/flowchartfun_tutorial.mp4" type="video/mp4">
                영상을 통해 문법을 익혀봅시다.
              </video>
            </div>
            <span class="text-silver opacity-75 d-block mt-2 font-monospace" style="font-size: 0.7rem;">🎬 영상을 통해 Flowchart.fun 사용법을 익혀봅시다.</span>
          </div>

          <div class="col-md-6 text-left">
            <div class="card card-magic bg-dark-wood text-gold p-3 h-100 shadow border border-gold">
              <h5 class="fw-bold text-white mb-2" style="font-size: 0.9rem;"><i class="fa fa-desktop me-2"></i> 화면 구성 미리보기</h5>
              <ul class="list-unstyled mb-0 px-1" style="font-size: 0.75rem; line-height: 1.6;">
                <li class="mb-2 pb-2 border-bottom border-dark">
                  <span class="badge bg-warning text-dark me-1" style="font-size: 0.62rem;">왼쪽 화면</span>
                  글자를 타이핑하는 <b class="text-white">입력창</b>이에요. 여기에 질문과 답을 적습니다.
                </li>
                <li class="mb-2 pb-2 border-bottom border-dark">
                  <span class="badge bg-warning text-dark me-1" style="font-size: 0.62rem;">오른쪽 화면</span>
                  내가 타이핑한 대로 <b class="text-white">자동으로 그림(순서도)</b>이 짠! 하고 그려지는 미리보기 화면입니다.
                </li>
                <li>
                  <span class="badge bg-warning text-dark me-1" style="font-size: 0.62rem;">저장</span>
                  별도 저장 버튼이 없어도 계속 자동으로 그려지니, <b class="text-danger">잃어버리지 않으려면 나중에 꼭 메모장에 복사해두세요!</b>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class="alert alert-warning border-0 mt-3 py-2 text-center shadow-sm font-weight-bold w-100" style="font-size: 0.8rem;">
          💡 자세한 타이핑 문법(콜론, 들여쓰기, 색칠 마법)은 다음 장에서 하나씩 배워볼게요!
        </div>
      </section>

      <section data-background-color="#0b101d">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3 w-100">
          <h3 class="text-info font-magic mb-0">🐉 3일차 1교시: 신비한 동물 부화기의 마법 분기점 규칙</h3>
          <span class="badge bg-hufflepuff text-dark py-2 px-3 border border-dark fw-bold">Flowchart.fun</span>
        </div>
        
        <div class="text-left mb-2">
          <p class="text-light small mb-2">이제 마우스는 잠시 내려놓으세요. 타자를 치면 실시간으로 완벽한 생각의 지도가 그려지는 <b>텍스트 아키텍처 툴</b>을 마스터합니다.</p>
          <a href="https://flowchart.fun/" target="_blank" class="btn bg-gold-gradient text-dark fw-bold px-4 py-1.5 rounded-pill shadow hover-scale" style="font-size: 0.8rem; text-decoration: none; display: inline-block;">
            🚀 Flowchart.fun 마법 도구 광장 열기 (클릭)
          </a>
        </div>

        <div class="row g-2 text-left w-100 mx-auto mb-3">
          <div class="col-md-5">
            <div class="card card-magic bg-dark-stone text-white p-3 h-100 shadow" style="border-top: 4px solid #d4af37 !important;">
              <h5 class="text-warning fw-bold mb-2" style="font-size: 0.85rem;"><i class="fa fa-keyboard me-2"></i> 왼쪽 입력창에 받아 적을 주문</h5>
              
              <div class="p-2.5 bg-dark rounded border border-secondary position-relative">
                <pre class="m-0"><code id="magicOrderText" class="text-white font-monospace" style="font-size: 0.95rem; line-height: 1.6; display: block;">알의 보관 상태
  어떻게 해볼까?: 뜨거운 열기를 공급함
    성공!: 파이어 드래곤 부화! 🔥 .color_red</code></pre>
                
                <button @click="copyCustomText('magicOrderText', $event)" class="btn btn-sm btn-outline-warning text-gold position-absolute" style="top: 8px; right: 8px; font-size: 0.65rem; padding: 4px 10px; border-radius: 4px; font-weight: bold;">
                  <i class="fa fa-copy me-1"></i> 주문 복사
                </button>
              </div>

              <div class="mt-2 p-1.5 bg-dark rounded text-silver text-center" style="font-size: 0.72rem; border: 1px dashed #444;">
                ☝️ <b class="text-warning">[주문 복사]</b>를 누른 뒤 사이트 왼쪽에 붙여넣어(Ctrl+V) 보세요!
              </div>
            </div>
          </div>

          <div class="col-md-7">
            <div class="card card-magic bg-dark-wood text-gold p-3 h-100 shadow border border-gold">
              <h5 class="fw-bold text-white border-bottom border-secondary pb-1.5 mb-2" style="font-size: 0.85rem;">📖 초보 아키텍트를 위한 3대 마법 문법 책</h5>
              <ul class="list-unstyled mb-0 px-1" style="font-size: 0.75rem; line-height: 1.5;">
                <li class="mb-2 pb-2 border-bottom border-dark">
                  <span class="badge bg-warning text-dark me-1" style="font-size: 0.65rem;">주문 1</span> <b class="text-white">[Tab] 키 (들여쓰기)</b> ➔ <b class="text-warning">"블록 안으로 넣기"</b>
                  <p class="text-silver mb-0 mt-1" style="font-size: 0.72rem;">줄을 바꾼 뒤 키보드 왼쪽 <b>[Tab]</b>을 누르면 화살표가 자동으로 그려집니다.</p>
                </li>
                <li class="mb-2 pb-2 border-bottom border-dark">
                  <span class="badge bg-danger text-white me-1" style="font-size: 0.65rem;">중요!</span> <b class="text-white">` : ` (콜론 규칙)</b> ➔ <b class="text-warning">"화살표 내용 : 상자 내용"</b>
                  <p class="text-silver mb-0 mt-1" style="font-size: 0.72rem;">콜론 앞에는 <b>공백 없음(❌)</b>, 콜론 뒤에는 <b>반드시 한 칸 띄우기(⭕)</b>!</p>
                </li>
                <li>
                  <span class="badge bg-warning text-dark me-1" style="font-size: 0.65rem;">주문 3</span> <b class="text-white">` .color_색상 `</b> ➔ <b class="text-warning">"최종 상자 색칠 마법"</b>
                  <p class="text-silver mb-0 mt-0.5" style="font-size: 0.72rem;">끝에 한 칸 띄우고 <b>`.color_red`</b>를 적으면 상자가 빨갛게 변신합니다.</p>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class="card card-magic bg-dark-stone text-white p-3 w-100 shadow border border-secondary text-left">
          <h6 class="text-gold fw-bold mb-2" style="font-size: 0.82rem;">
            <i class="fa fa-flask-vial me-2"></i> 🧪 실험 재료실: 나만의 부화기 분기점을 설계할 5가지 신비한 동물 레시피
          </h6>
          <p class="text-silver mb-3" style="font-size: 0.7rem; line-height: 1.4;">
            앞의 3가지 마법 동물 예시를 보고 문법을 익혔다면, <b>나머지 2개의 미지 영역(❓)은 여러분이 상상하는 영리한 동물 이름과 비밀 조건, 마법 색상</b>으로 설계도를 직접 지배하고 창조해 보세요!
          </p>

          <div class="row g-2 text-center text-dark fw-bold" style="font-size: 0.72rem; line-height: 1.35;">
            <div class="col shadow-sm">
              <div class="p-2 bg-light rounded h-100 border-top border-danger border-4 d-flex flex-column justify-content-between">
                <div><span style="font-size: 1.5rem; display:block; margin-bottom: 4px;">🔥</span><b>파이어 드래곤</b></div>
                <div class="text-muted mt-2 fw-normal" style="font-size: 0.65rem; letter-spacing: -0.5px; background: #e9ecef; padding: 4px; border-radius: 4px;">
                  조건: 뜨거운 열기 공급<br><b class="text-danger">.color_red</b>
                </div>
              </div>
            </div>
            <div class="col shadow-sm">
              <div class="p-2 bg-light rounded h-100 border-top border-primary border-4 d-flex flex-column justify-content-between">
                <div><span style="font-size: 1.5rem; display:block; margin-bottom: 4px;">❄️</span><b>아이스 피닉스</b></div>
                <div class="text-muted mt-2 fw-normal" style="font-size: 0.65rem; letter-spacing: -0.5px; background: #e9ecef; padding: 4px; border-radius: 4px;">
                  조건: 얼음 마법 주입<br><b class="text-primary">.color_blue</b>
                </div>
              </div>
            </div>
            <div class="col shadow-sm">
              <div class="p-2 bg-light rounded h-100 border-top border-warning border-4 d-flex flex-column justify-content-between">
                <div><span style="font-size: 1.5rem; display:block; margin-bottom: 4px;">⚡</span><b>천둥새 (썬더버드)</b></div>
                <div class="text-muted mt-2 fw-normal" style="font-size: 0.65rem; letter-spacing: -0.5px; background: #e9ecef; padding: 4px; border-radius: 4px;">
                  조건: 짜릿한 번개 충전<br><b class="text-warning">.color_yellow</b>
                </div>
              </div>
            </div>
            <div class="col shadow-sm">
              <div class="p-2 rounded h-100 border-top border-secondary border-4 d-flex flex-column justify-content-between" style="background-color: #ced4da !important; border-style: dashed !important;">
                <div><span style="font-size: 1.5rem; display:block; margin-bottom: 4px;">❓</span><b class="text-muted">상상 속 마법 생물 A</b></div>
                <div class="text-muted mt-2 fw-normal" style="font-size: 0.65rem; letter-spacing: -0.5px; background: #fff; padding: 4px; border-radius: 4px; border: 1px dashed #adb5bd;">
                  조건: ❓❓❓<br><b class="text-secondary">.color_❓❓❓</b>
                </div>
              </div>
            </div>
            <div class="col shadow-sm">
              <div class="p-2 rounded h-100 border-top border-secondary border-4 d-flex flex-column justify-content-between" style="background-color: #ced4da !important; border-style: dashed !important;">
                <div><span style="font-size: 1.5rem; display:block; margin-bottom: 4px;">❓</span><b class="text-muted">상상 속 마법 생물 B</b></div>
                <div class="text-muted mt-2 fw-normal" style="font-size: 0.65rem; letter-spacing: -0.5px; background: #fff; padding: 4px; border-radius: 4px; border: 1px dashed #adb5bd;">
                  조건: ❓❓❓<br><b class="text-secondary">.color_❓❓❓</b>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section data-background-color="#0b101d">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3 w-100">
          <h3 class="text-info font-magic mb-0">⚡ 3일차 1교시: "오타 마법사를 잡아라!" 4대 아키텍트 자격시험</h3>
          <span class="badge bg-danger text-white py-2 px-3 border border-light">100점 마스터 도전</span>
        </div>
        <p class="text-light text-left small mb-3">
          설계 툴을 쓰기 전, 내 피에 흐르는 논리 마력을 증명할 시간입니다! <b>진짜 정상 작동하는 마법의 주문 버튼</b>을 눌러 4개의 통과 도장을 모두 획득해 보세요!
        </p>

        <div class="row g-3 text-left w-100 mx-auto">
          <div class="col-md-6">
            <div class="card h-100 bg-dark-stone text-white p-3 border border-secondary shadow flex-column justify-content-between">
              <div>
                <h5 class="text-warning fw-bold mb-1.5" style="font-size: 0.95rem;"><i class="fa fa-circle-question me-1.5"></i> Q1. 화살표를 만드는 '콜론(:)' 규칙</h5>
                <p class="text-silver mb-3" style="font-size: 0.72rem;">질문 옆에 상자를 매끄럽게 연결할 진짜 코드는?</p>
                <div class="d-flex flex-column gap-1.5">
                  <button @click="runArchitectureQuiz(1, false)" class="btn btn-dark text-start p-2 fw-bold" style="font-size: 1.05rem; font-family: monospace;">1) 어떻게 해볼까?:뜨거운 열기</button>
                  <button @click="runArchitectureQuiz(1, true)" class="btn btn-dark text-start p-2 fw-bold" style="font-size: 1.05rem; font-family: monospace;">2) 어떻게 해볼까?: 뜨거운 열기</button>
                </div>
              </div>
              <div class="mt-3 p-1.5 bg-black rounded text-center text-gold fw-bold" style="min-height: 38px; font-size: 0.78rem;" v-html="q1Result"></div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="card h-100 bg-dark-stone text-white p-3 border border-secondary shadow flex-column justify-content-between">
              <div>
                <h5 class="text-warning fw-bold mb-1.5" style="font-size: 0.95rem;"><i class="fa fa-circle-question me-1.5"></i> Q2. 상자를 물들이는 색칠 주문</h5>
                <p class="text-silver mb-3" style="font-size: 0.72rem;">상자 글자 끝에 붙여서 색상을 바꿔줄 진짜 주문은?</p>
                <div class="d-flex flex-column gap-1.5">
                  <button @click="runArchitectureQuiz(2, false)" class="btn btn-dark text-start p-2 fw-bold" style="font-size: 1.05rem; font-family: monospace;">1) .color red</button>
                  <button @click="runArchitectureQuiz(2, true)" class="btn btn-dark text-start p-2 fw-bold" style="font-size: 1.05rem; font-family: monospace;">2) .color_red</button>
                </div>
              </div>
              <div class="mt-3 p-1.5 bg-black rounded text-center text-gold fw-bold" style="min-height: 38px; font-size: 0.78rem;" v-html="q2Result"></div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="card h-100 bg-dark-stone text-white p-3 border border-secondary shadow flex-column justify-content-between">
              <div>
                <h5 class="text-warning fw-bold mb-1.5" style="font-size: 0.95rem;"><i class="fa fa-circle-question me-1.5"></i> Q3. 다음 하위 단계로 들어가는 열쇠</h5>
                <p class="text-silver mb-3" style="font-size: 0.72rem;">질문 안쪽에 다음 선택지 화살표를 밀어 넣을 때 쓰는 키는?</p>
                <div class="d-flex flex-column gap-1.5">
                  <button @click="runArchitectureQuiz(3, true)" class="btn btn-dark text-start p-2 fw-bold" style="font-size: 1.05rem; font-family: monospace;">1) 키보드 왼쪽 [Tab] 키 1번</button>
                  <button @click="runArchitectureQuiz(3, false)" class="btn btn-dark text-start p-2 fw-bold" style="font-size: 1.05rem; font-family: monospace;">2) 스페이스바(Space) 연타 5번</button>
                </div>
              </div>
              <div class="mt-3 p-1.5 bg-black rounded text-center text-gold fw-bold" style="min-height: 38px; font-size: 0.78rem;" v-html="q3Result"></div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="card h-100 bg-dark-stone text-white p-3 border border-secondary shadow flex-column justify-content-between">
              <div>
                <h5 class="text-warning fw-bold mb-1.5" style="font-size: 0.95rem;"><i class="fa fa-circle-question me-1.5"></i> Q4. 생각의 나무 설계도의 시작점</h5>
                <p class="text-silver mb-3" style="font-size: 0.72rem;">모든 데이터와 질문 화살표가 출발하는 진짜 고향 상자는?</p>
                <div class="d-flex flex-column gap-1.5">
                  <button @click="runArchitectureQuiz(4, false)" class="btn btn-dark text-start p-2 fw-bold" style="font-size: 1.05rem; font-family: monospace;">1) 맨 아래에 있는 마지막 결과 상자</button>
                  <button @click="runArchitectureQuiz(4, true)" class="btn btn-dark text-start p-2 fw-bold" style="font-size: 1.05rem; font-family: monospace;">2) 맨 위에 홀로 있는 제목/시작 상자</button>
                </div>
              </div>
              <div class="mt-3 p-1.5 bg-black rounded text-center text-gold fw-bold" style="min-height: 38px; font-size: 0.78rem;" v-html="q4Result"></div>
            </div>
          </div>
        </div>
      </section>

      <!-- ====================================================================== -->
      <!-- [완전본] 3일차 2교시 가이드: 파스텔 네온 번쩍이 버튼 + 기숙사 성향 테이블 -->
      <!-- ====================================================================== -->
      <section data-background-color="#141911">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3 w-100">
          <h3 class="text-gold font-magic mb-0">🌲 3일차 2교시 가이드: 4대 기숙사 성향 및 배정 알고리즘</h3>
          <span class="badge bg-hufflepuff text-dark py-2 px-3 border border-dark fw-bold">Flowchart 제어 매핑</span>
        </div>

        <div class="row g-3 mb-3">
          <div class="col-6">
            <div class="p-1 bg-dark rounded border border-secondary shadow position-relative" style="height: 220px; overflow: hidden;">
              <iframe width="100%" height="100%" src="https://www.youtube.com/embed/3L2-JAbXIAM" 
                      title="기숙사 테스트 소개" frameborder="0" 
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                      allowfullscreen style="border-radius: 8px;">
              </iframe>
            </div>
            <span class="text-silver opacity-75 d-block mt-1 font-monospace" style="font-size: 0.6rem;">🔮 마법 모자 배정의 비밀</span>
          </div>
          <div class="col-6">
            <div class="p-1 bg-dark rounded border border-secondary shadow position-relative" style="height: 220px; overflow: hidden;">
              <iframe width="100%" height="100%" src="https://www.youtube.com/embed/d3FXaYrgYdw" 
                      title="해리포터 기숙사 특징 요약" frameborder="0" 
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                      allowfullscreen style="border-radius: 8px;">
              </iframe>
            </div>
            <span class="text-silver opacity-75 d-block mt-1 font-monospace" style="font-size: 0.6rem;">🔮 4대 기숙사 분석 가이드</span>
          </div>
        </div>

        <div class="text-center w-100 neon-btn-container" style="margin-bottom: 45px !important;">
          <a href="https://smore.im/quiz/eAWzhcZeVJ" target="_blank" 
             class="btn neon-magic-btn fw-bold px-4 py-2 rounded-pill shadow-lg bounce-hover" 
             style="font-size: 0.9rem; text-decoration: none; display: inline-block;">
            🧙‍♂️ [심리테스트] 내 기숙사 알아보러 가기 (클릭)
          </a>
        </div>

        <div class="w-100">
          <p class="text-light small mb-2 fw-bold text-warning text-left"><i class="fa fa-sitemap me-1"></i> [마법 설계서] 4대 기숙사 성향 테이블 (3일차 제어 트리 연산 규칙)</p>
          <table class="table table-dark table-bordered card-magic alignment-middle text-center m-0 shadow-sm" style="font-size: 0.7rem; line-height: 1.3;">
            <thead>
              <tr class="text-gold bg-gold-gradient">
                <th width="10%">상징</th>
                <th width="20%">기숙사</th>
                <th width="55%">핵심 논리 필터링 조건 (IF 식별자)</th>
                <th width="15%">대표</th>
              </tr>
            </thead>
            <tbody>
              <tr style="background-color: rgba(116, 27, 27, 0.25);">
                <td class="fs-5">🦁</td>
                <td class="fw-bold text-danger">그리핀도르</td>
                <td class="text-left pl-2">마음속에 물불 안 가리는 <b>[용기]</b>가 꿈틀대나?</td>
                <td>해리</td>
              </tr>
              <tr style="background-color: rgba(17, 30, 59, 0.25);">
                <td class="fs-5">🦅</td>
                <td class="fw-bold text-info">래번클로</td>
                <td class="text-left pl-2">비밀 서고에서 밤새 공부하는 <b>[지혜]</b>를 사랑하나?</td>
                <td>헤르미온느</td>
              </tr>
              <tr style="background-color: rgba(43, 39, 17, 0.25);">
                <td class="fs-5">🦡</td>
                <td class="fw-bold text-warning">후플푸프</td>
                <td class="text-left pl-2">동료를 끝까지 믿어주는 백프로의 <b>[의리]</b>가 충만한가?</td>
                <td>세드릭</td>
              </tr>
              <tr style="background-color: rgba(17, 59, 30, 0.25);">
                <td class="fs-5">🐍</td>
                <td class="fw-bold text-success">슬리데린</td>
                <td class="text-left pl-2">최고가 되겠다는 원대한 <b>[야망]</b>과 리더십이 있는가?</td>
                <td>말포이</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      <section data-background-color="#141911" style="padding-top: 15px !important; padding-bottom: 15px !important;">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-1 mb-2 w-100">
          <h3 class="text-gold font-magic mb-0" style="font-size: 1.4rem;">🎩 3일차 2교시: 생각의 나무, 말하는 마법 모자의 기숙사 배정 트리 설계</h3>
          <span class="badge bg-hufflepuff text-dark py-1 px-2 border border-dark fw-bold" style="font-size: 0.65rem;">Flowchart.fun</span>
        </div>
        <p class="text-light text-left small mb-2" style="font-size: 0.72rem;">단 3개의 날카로운 질문만으로 4개의 기숙사로 오류 없이 정확하게 배정하는 거대한 제어 트리 구조를 구축해야 합니다.</p>

        <div class="row g-2 mb-2 text-center text-dark fw-bold w-100 mx-auto">
          <div class="col-3">
            <div class="p-1.5 bg-light rounded shadow-sm border-top border-danger border-4 hover-scale">
              <span style="font-size: 1.5rem; display: block;">🦁</span>
              <span style="font-size: 0.8rem; display: block; letter-spacing: -0.5px;">그리핀도르 <span class="text-muted" style="font-size:0.65rem;">(용기)</span></span>
            </div>
          </div>
          <div class="col-3">
            <div class="p-1.5 bg-light rounded shadow-lg border-top border-primary border-4 hover-scale">
              <span style="font-size: 1.5rem; display: block;">🦅</span>
              <span style="font-size: 0.8rem; display: block; letter-spacing: -0.5px;">래번클로 <span class="text-muted" style="font-size:0.65rem;">(지혜)</span></span>
            </div>
          </div>
          <div class="col-3">
            <div class="p-1.5 bg-light rounded shadow-lg border-top border-warning border-4 hover-scale">
              <span style="font-size: 1.5rem; display: block;">🦡</span>
              <span style="font-size: 0.8rem; display: block; letter-spacing: -0.5px;">후플푸프 <span class="text-muted" style="font-size:0.65rem;">(의리)</span></span>
            </div>
          </div>
          <div class="col-3">
            <div class="p-1.5 bg-light rounded shadow-lg border-top border-success border-4 hover-scale">
              <span style="font-size: 1.5rem; display: block;">🐍</span>
              <span style="font-size: 0.8rem; display: block; letter-spacing: -0.5px;">슬리데린 <span class="text-muted" style="font-size:0.65rem;">(야망)</span></span>
            </div>
          </div>
        </div>

        <div class="card card-magic bg-dark-stone text-white w-100 shadow border border-secondary p-2.5 mb-2 mx-auto" style="margin-bottom: 12px !important;">
          <div class="d-flex justify-content-between align-items-center flex-wrap g-2">
            <div style="flex: 1; min-width: 400px; margin-right: 20px; text-align: left;">
              <h5 class="text-mint fw-bold mb-1" style="font-size: 1.05rem;"><i class="fa fa-laptop-code me-2"></i> 알고리즘 샌드박스: 엔트리 블록 선행 학습</h5>
              <p class="text-silver mb-1.5" style="line-height: 1.4; font-size: 0.75rem;">
                혹시 접해본 적 있나요? 엔트리라는 프로그램의 [만약 ~라면, 아니면] 구조를 함께 시뮬레이션해 보세요. <br>
                Identity 구조상 <span class="text-warning fw-bold px-2 py-0.5 rounded bg-black border border-warning shadow" style="font-size: 0.8rem; display: inline-block; box-shadow: 0 0 8px rgba(212,175,55,0.3) !important;">🔥 단 3개의 핵심 질문 🔥</span>이 계단식으로 겹치지 않고 이어져야 배정이 완벽해집니다!
              </p>
              
              <div class="p-2 bg-black rounded border border-warning text-warning-emphasis" style="font-size: 0.72rem; line-height: 1.4; background-color: rgba(212,175,55,0.08) !important;">
                ⚡ <b>마법 모자의 특급 힌트:</b> 엔트리에서 [만약 ~라면, 아니면] 블록의 입속(아니면 구역)에다가, 또 다른 [만약 ~라면, 아니면] 블록을 무한 마트료시카 인형처럼 <b>겹겹이 쏙! 집어넣어 계단처럼 쌓을 수 있어요.</b> 이번 설계도 그렇게 탭(Tab)을 쳐서 겹쳐 쌓는 것이 핵심이랍니다!
              </div>
            </div>
            <div>
              <a href="https://playentry.org/" target="_blank" class="btn bg-info text-white fw-bold px-3 py-2 rounded shadow-sm" style="font-size: 0.75rem; text-decoration: none; display: inline-block; background-color: #00c0ff !important; border: none;">
                🚀 엔트리 샌드박스 열기
              </a>
            </div>
          </div>
        </div>

        <div class="card card-magic bg-dark-wood text-gold w-100 shadow border border-warning p-2 mb-2 text-left" style="margin-bottom: 15px !important;">
          <div class="d-flex align-items-center gap-2 mb-1" style="font-size: 0.75rem;">
            <span class="badge bg-warning text-dark py-0.5 px-1.5" style="font-size: 0.62rem; font-weight: bold;">🔄 변환 규칙</span>
            <b class="text-white">엔트리 시각 블록 ➔ Flowchart 텍스트 아키텍처 코드로 바꾸기</b>
          </div>
          
          <div class="row align-items-stretch g-2 text-center font-monospace mx-auto" style="font-size: 0.68rem; line-height: 1.35; max-width: 100%;">
            <!-- 1단계: 엔트리 모양 -->
            <div class="col-md-3">
              <div class="p-2 bg-black rounded border border-secondary text-silver text-left h-100">
                <span class="text-info fw-bold d-block border-bottom border-secondary pb-0.5 mb-1 text-center" style="font-size: 0.62rem;">🧩 내 머릿속 엔트리</span>
                • <b>[만약 ~라면]</b> 조건문 상자<br>
                • &nbsp;↳ <b>[참 구역]</b> 안쪽 행동
              </div>
            </div>
            
            <!-- 화살표 1 -->
            <div class="col-md-1 d-flex align-items-center justify-content-center text-secondary px-0" style="user-select: none;">
              <i class="fa fa-arrow-right d-none d-md-block fs-6"></i>
            </div>
            
            <!-- 2단계: 타이핑 규칙 -->
            <div class="col-md-3">
              <div class="p-2 bg-black rounded border border-warning text-gold text-left h-100">
                <span class="text-warning fw-bold d-block border-bottom border-warning pb-0.5 mb-1 text-center" style="font-size: 0.62rem;">⌨️ 텍스트 타이핑 규칙</span>
                • 질문 텍스트 치고 엔터(개행)<br>
                • <span class="text-success">&nbsp;<b>네:</b> 참일 때 (Tab 1번)</span><br>
                • &nbsp;<b>아니오:</b> 거짓일 때 연결
              </div>
            </div>

            <!-- 화살표 2 -->
            <div class="col-md-1 d-flex align-items-center justify-content-center text-warning px-0" style="user-select: none;">
              <i class="fa fa-arrow-right d-none d-md-block fs-6"></i>
            </div>

            <!-- 3단계: 실제 적용 예시 -->
            <div class="col-md-4">
              <div class="p-2 bg-dark rounded border border-success text-light text-left h-100">
                <span class="text-success fw-bold d-block border-bottom border-success pb-0.5 mb-1 text-center" style="font-size: 0.62rem;">📝 실제 마법 주문 예시</span>
                <div class="text-silver" style="font-size: 0.62rem; line-height: 1.3;">
                  마법 모자의 질문<br>
                  &nbsp;&nbsp;마음속 거대한 용기가 꿈틀대는가?<br>
                  &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-success fw-bold">네: 그리핀도르 기숙사! 🦁</span><br>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-danger fw-bold">아니오: [그 다음 기숙사 질문은?]</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="text-center w-100">
          <button onclick="const box = document.getElementById('hatAnswerBox'); const isHidden = box.style.display === 'none' || box.style.display === ''; box.style.display = isHidden ? 'block' : 'none'; this.innerText = isHidden ? '🙈 정답 로직 숨기기' : '👁️ 정답 로직 코드 보기 (클릭)';" class="btn bg-gold-gradient text-dark fw-bold px-4 py-1.5 rounded shadow hover-scale" style="font-size: 0.65rem;">
            👁️ 정답 로직 코드 보기 (클릭)
          </button>
          
          <div id="hatAnswerBox" class="mt-1 bg-dark p-2 rounded text-left border border-warning text-gold mx-auto fade-in" style="display: none; max-width: 580px; box-shadow: inset 0 0 15px rgba(0,0,0,0.9);">
            <pre class="m-0" style="line-height: 1.3;"><code class="text-warning font-monospace" style="font-size: 0.68rem; display: block; white-space: pre;">마법 모자의 질문
  마음속에 거대한 용기가 꿈틀거리는가?
    네: 그리핀도르 기숙사! 🦁
    아니오: 밤새도록 마법 도서관에서 책 읽는 것을 사랑하는가?
      네: 래번클로 기숙사! 🦅
      아니오: 의리와 친구를 위해 목숨도 바칠 수 있는가?
        네: 후플푸프 기숙사! 🦡
        아니오: 슬리데린 기숙사 🐍</code></pre>
          </div>
        </div>
      </section>

      <section data-background-color="#111619">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3 w-100">
          <h3 class="text-gold font-magic mb-0">🧪 3일차 2교시: 내 설계도 진짜 맞을까? 가상 모의 부하 테스트</h3>
          <span class="badge bg-info text-dark py-2 px-3 border border-dark fw-bold">가상 시뮬레이션</span>
        </div>
        <p class="text-light text-left small mb-3">
          설계도가 완성되었다면 저장하기 전에 진짜 완벽한지 검증해야 합니다. 가상의 캐릭터 대답을 들고 내 생각의 나무 지도를 손가락으로 따라가 보며 배정이 정상적으로 도달하는지 확인해 봅시다.
        </p>

        <div class="row g-2 text-left w-100 mx-auto">
          <div class="col-md-4">
            <div class="p-3 bg-dark-stone text-white rounded border border-danger shadow-sm h-100 d-flex flex-column justify-content-between">
              <div>
                <b class="text-danger" style="font-size: 0.9rem;">👤 테스트 대상: 해리 포터</b>
                <div class="p-2 my-2 bg-dark rounded small text-silver font-monospace">
                  • 질문 1(용기): <b>"네!!"</b>
                </div>
              </div>
              <p class="mb-0 text-success fw-bold p-1 bg-black rounded text-center small">
                🎯 결과: 1단계 관문 즉시 패스 ➔ 그리핀도르 배정 완료! 🦁
              </p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="p-3 bg-dark-stone text-white rounded border border-primary shadow-sm h-100 d-flex flex-column justify-content-between">
              <div>
                <b class="text-primary" style="font-size: 0.9rem;">👤 테스트 대상: 헤르미온느</b>
                <div class="p-2 my-2 bg-dark rounded small text-silver font-monospace">
                  • 질문 1(용기): "아니오"<br>
                  • 질문 2(독서): <b>"네!! 아주 좋아해요"</b>
                </div>
              </div>
              <p class="mb-0 text-success fw-bold p-1 bg-black rounded text-center small">
                🎯 결과: 1단계 실패 ➔ 2단계 지혜의 방 문 열림 ➔ 래번클로! 🦅
              </p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="p-3 bg-dark-stone text-white rounded border border-success shadow-sm h-100 d-flex flex-column justify-content-between">
              <div>
                <b class="text-success" style="font-size: 0.9rem;">👤 테스트 대상: 드레이코 말포이</b>
                <div class="p-2 my-2 bg-dark rounded small text-silver font-monospace">
                  • 질문 1(용기): "아니오"<br>
                  • 질문 2(독서): "아니오"<br>
                  • 질문 3(의리): "아니오. 내 야망이 최고임"
                </div>
              </div>
              <p class="mb-0 text-success fw-bold p-1 bg-black rounded text-center small">
                🎯 결과: 모든 조건 거부 ➔ 맨 밑 예외 덫에 포획 ➔ 슬리데린! 🐍
              </p>
            </div>
          </div>
        </div>
        <div class="mt-3 p-2 bg-dark rounded text-center text-gold border border-warning small">
          💡 "어떤 엉뚱한 대답을 탄 친구를 대입해도 단 하나의 기숙사로 무조건 떨어지는가?" 그것이 무결점 아키텍처의 핵심입니다.
        </div>
      </section>

      <section data-background-color="#191124">
        <div class="card card-magic bg-dark-stone text-white p-4 my-2 border border-purple shadow mx-auto" style="max-width: 900px;">
          <h5 class="text-purple fw-bold mb-2"><i class="fa fa-code-branch me-2"></i> 🧠 제어 흐름 디버깅: 마법 모자 논리 구문 센서</h5>
          <p class="text-silver small text-left mb-3">
            학생의 성향 데이터와 내가 선택한 <b>문법 회로 무결성</b>을 조합해 흐름을 가동해 보세요. 오타 코드가 켜지면 시스템이 어떻게 뻗는지 디버깅할 수 있습니다.
          </p>

          <div class="row text-left mb-3 font-monospace g-3" style="font-size: 0.78rem;">
            <div class="col-md-6 border-end border-secondary pr-3">
              <div class="text-warning fw-bold mb-2">📊 가상 캐릭터 프로필 데이터 설정</div>
              <div class="d-flex align-items-center gap-2 mb-1">
                <span>마음속에 거대한 용기가 있는가?:</span>
                <select v-model="simDay3Courage" class="bg-dark text-white border border-secondary rounded p-0.5 small">
                  <option value="y">네 (Yes)</option>
                  <option value="n">아니오 (No)</option>
                </select>
              </div>
              <div class="d-flex align-items-center gap-2 mb-1">
                <span>도서관 독서를 밤새도록 사랑하나?:</span>
                <select v-model="simDay3Library" class="bg-dark text-white border border-secondary rounded p-0.5 small">
                  <option value="y">네 (Yes)</option>
                  <option value="n">아니오 (No)</option>
                </select>
              </div>
              <div class="d-flex align-items-center gap-2">
                <span>의리와 친구를 위해 목숨 바치나?:</span>
                <select v-model="simDay3Loyalty" class="bg-dark text-white border border-secondary rounded p-0.5 small">
                  <option value="y">네 (Yes)</option>
                  <option value="n">아니오 (No)</option>
                </select>
              </div>
            </div>
            <div class="col-md-6 pl-3">
              <div class="text-danger fw-bold mb-2">🛠️ 코드 스펠 문법 무결성 선택</div>
              <div class="d-flex flex-column gap-1">
                <label class="cursor-pointer text-success"><input type="radio" :value="true" v-model="simDay3SyntaxOk"> ✅ 문법 정상 (콜론/들여쓰기 규칙 엄수)</label>
                <label class="cursor-pointer text-danger"><input type="radio" :value="false" v-model="simDay3SyntaxOk"> ❌ 문법 파괴 (콜론 누락 및 스페이스바 연타)</label>
              </div>
              <button @click="runDay3Simulation" class="btn btn-sm bg-purple-gradient text-white fw-bold w-100 mt-2 shadow shadow-sm">
                🔮 논리 흐름 컴파일 가동
              </button>
            </div>
          </div>

          <div class="bg-black rounded p-2.5 text-left font-monospace" style="font-size: 0.72rem; min-height: 110px; border: 1px solid #555; background: #000; padding: 8px 12px;">
            <div v-for="(log, idx) in simDay3Logs" :key="idx" :style="{ color: log.color }" class="d-flex align-items-start mb-1">
              <span class="mr-2" style="user-select: none; opacity: 0.8;">🔮</span>
              <span class="text-left w-100">{{ log.text }}</span>
            </div>
            <div v-if="simDay3ResultHouse" class="mt-2 text-center fs-5 text-white bg-dark border border-warning rounded p-1 blink-anim">
              🎯 최종 컴파일 결과 기숙사: <b class="text-gold">{{ simDay3ResultHouse }}</b>
            </div>
          </div>
        </div>
      </section>

      <section data-background-color="#1c1119">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3 w-100">
          <h3 class="text-gold font-magic mb-0">🚀 [마스터 전용] 5번째 비밀 기숙사의 창조</h3>
          <span class="badge bg-purple text-white py-2 px-3 border border-light">심화 아키텍처</span>
        </div>
        <p class="text-light text-left small mb-3">
          지도를 너무 빨리 완성했나요? 진정한 마스터 아키텍트라면 남들이 만들어 놓은 4개의 기숙사에 만족하지 않습니다. 슬리데린 밑에 <b>나만의 5번째 비밀 루트</b>를 뚫어봅시다!
        </p>

        <div class="card card-magic bg-dark-stone text-white w-100 shadow-lg border border-warning p-4 mx-auto" style="border-radius: 15px;">
          <h5 class="text-warning fw-bold mb-3" style="font-size: 1.05rem;"><i class="fa fa-hammer me-2"></i> 추가 미션: 아무 곳에도 속하지 않는 자들의 종착지 만들기</h5>
          <p class="text-silver mb-3" style="font-size: 0.8rem; line-height: 1.55;">
            용기도, 지혜도, 의리도, 심지어 슬리데린의 야망조차 없다고 대답하는 <b>'최후의 예외 인물'</b>이 나타났습니다! 이 학생을 슬리데린에 억지로 넣지 말고, <b>내가 상상한 아주 특별한 제5의 기숙사(또는 장소)</b>로 보내는 화살표를 한 줄 더 만들어 보세요.
          </p>
          
          <div class="row g-3 text-center mb-3">
            <div class="col-md-4">
              <div class="p-2.5 bg-dark rounded border border-secondary shadow-sm">
                <span class="d-block text-gold mb-1" style="font-size: 1.5rem;">🎮</span>
                <span class="fw-bold text-white small">PC방 기숙사</span>
              </div>
            </div>
            <div class="col-md-4">
              <div class="p-2.5 bg-dark rounded border border-secondary shadow-sm">
                <span class="d-block text-gold mb-1" style="font-size: 1.5rem;">🚀</span>
                <span class="fw-bold text-white small">화성 탐사 기지</span>
              </div>
            </div>
            <div class="col-md-4">
              <div class="p-2.5 bg-dark rounded border border-secondary shadow-sm">
                <span class="d-block text-gold mb-1" style="font-size: 1.5rem;">👻</span>
                <span class="fw-bold text-white small">아즈카반 감옥</span>
              </div>
            </div>
          </div>

          <div class="p-2.5 bg-black rounded border border-warning font-monospace text-left" style="font-size: 0.78rem; line-height: 1.45;">
            <span class="text-success fw-bold">💡 힌트:</span> 
            맨 밑에 있는 <span class="text-silver">아니오: 슬리데린 기숙사</span> 부분을 지우고,<br>
            <b class="text-white">아니오: 야망이 넘치는가?</b> 라는 질문으로 바꾼 뒤, 그 아래에 탭(Tab)을 눌러 <b class="text-warning">새로운 [네/아니오] 갈림길</b>을 추가해 보세요!
          </div>
        </div>
      </section>

      <section data-background-color="#161b11">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3 w-100">
          <h3 class="text-gold font-magic mb-0">🛡️ 아키텍트의 시간 초월 치트키: 스펠 링크 백업 프로토콜</h3>
          <span class="badge bg-success text-white py-2 px-3 border border-light">데이터 백업</span>
        </div>
        <p class="text-silver small text-left mb-3">내일 컴퓨터실에 오면 오늘 사용한 컴퓨터가 리셋되어 열심히 설계한 마법 모자의 두뇌가 증발할까요? <b>브라우저 인터넷 기록이 전부 삭제되더라도</b> 완벽하게 내 작품을 지켜내는 안전망을 구축합시다.</p>

        <div class="row g-3 text-left align-items-center w-100 mx-auto">
          <div class="col-md-7">
            <div class="p-3 rounded bg-dark-stone text-white border border-warning shadow-sm">
              <h6 class="fw-bold text-warning mb-2" style="font-size: 0.8rem;"><i class="fa fa-file-lines me-2"></i> 인터넷 기록 삭제 트랩을 깨부수는 방법</h6>
              <p class="small opacity-90 text-silver mb-3" style="font-size: 0.72rem; line-height: 1.55;">
                컴퓨터가 꺼지거나 internet 서핑 기록이 포맷되면 브라우저 내부의 마법 주소도 함께 깨져버릴 수 있습니다. 이럴 때는 지구상에서 가장 확실하고 안전한 데이터 저장소인 <b>[메모장]</b>에 내 핵심 코드를 백업해야 합니다.
              </p>
              
              <div class="p-2.5 bg-dark rounded border border-secondary font-weight-bold text-success" style="font-size: 0.72rem; line-height: 1.5;">
                <span class="text-warning">➔ 퇴실 전 딱 10초 미션:</span><br>
                내가 flowchart.fun 왼쪽 입력창에 열심히 두드려 만든 나만의 <b>[마법 주문(텍스트 코드)]</b>을 마우스로 처음부터 끝까지 전부 드래그하거나 <b class="text-white">Ctrl + A</b>를 눌러서 통째로 복사(Ctrl + C)하세요. 그 다음 컴퓨터 바탕화면의 <b>[메모장(Notepad)]</b>을 열어 붙여넣고(Ctrl + V) 파일로 저장해 두면 백업 마법 완료입니다!
              </div>
            </div>
          </div>
          
          <div class="col-md-5">
            <div class="p-3 rounded bg-dark-wood text-gold text-center h-100 d-flex flex-column justify-content-center border border-gold" style="min-height: 190px;">
              <h4 class="font-magic text-warning mb-2" style="font-size: 1.1rem;">⚡ 아키텍트의 메타인지</h4>
              <blockquote class="magic-quote text-white opacity-90 font-weight-bold mb-0" style="font-size: 0.72rem; line-height: 1.55; font-style: italic;">
                "내 데이터가 인터넷 세계 어디에, 어떻게, 어떤 형태로 저장되어 지켜지는지 정확히 인지하는 것, 이것이 진정한 시스템 아키텍트의 메타인지 능력이며 마법이란다."
              </blockquote>
            </div>
          </div>
        </div>
      </section>

      <section data-background-color="#111915">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3 w-100">
          <h3 class="text-gold font-magic mb-0">🐍 4일차 1교시: 주문 소환, 4대 해독제와 AI 엔진을 활용한 마법 모자 코드 컴파일</h3>
          <span class="badge bg-success text-white py-2 px-3 border border-light">AI / Online-Python</span>
        </div>
        
        <div class="text-left mb-3">
          <p class="text-light small mb-2">
            4일차 아침이 밝았습니다! 어제 바탕화면 <b>메모장에 안전하게 세이브해 두었던 나만의 마법 주문 설계도(텍스트)</b>를 복사해 올 시간입니다. 이 설계도를 AI 번역기에게 던져 '실제 작동하는 파이썬 게임 코드'로 소환하기 전, 모니터에 쏟아질 영어 외계어를 격파할 <b>딱 4가지 마법의 해독 주스</b>를 마셔봅시다.
          </p>
          <a href="https://www.online-python.com/" target="_blank" class="btn fw-bold px-4 py-1.5 rounded-pill shadow hover-scale" style="font-size: 0.8rem; text-decoration: none; display: inline-block; background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%) !important; color: white !important; border: 1px solid rgba(255,255,255,0.3);">
            🚀 마법 컴파일러 광장 즉시 열기 (로그인 필요없음 ⭕)
          </a>
        </div>

        <div class="row g-2 text-left w-100 mx-auto">
          <div class="col-md-3">
            <div class="card h-100 border-0 text-white bg-dark-stone shadow" style="border-top: 4px solid #00c0ff !important;">
              <div class="card-body p-2.5 d-flex flex-column justify-content-between">
                <div>
                  <h6 class="fw-bold mb-1.5" style="color: #00c0ff; font-size: 0.95rem;">
                    <i class="fa fa-flask me-1.5"></i>1번 해독제: <span class="text-white">print()</span>
                  </h6>
                  <p class="text-silver mb-2.5" style="font-size: 0.72rem; line-height: 1.4;">
                    모니터 화면에 글자를 보여주도록 명령하는 <b>화면 출력 주문</b>입니다.
                  </p>
                </div>
                
                <div style="font-size: 1.35rem !important; line-height: 1.4;">
                  <div class="p-2 bg-dark rounded border border-secondary position-relative mb-2" style="background-color: #1e1e24 !important;">
                    <span class="badge bg-info text-dark p-1 mb-1" style="font-size: 0.55rem; display:block; width:fit-content; font-family:sans-serif;">예시 1</span>
                    <pre class="m-0 fw-bold" id="py_print_1" style="font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; font-size: 1.35rem !important; white-space: pre-wrap;"><span style="color: #ff79c6;">print</span>(<span style="color: #f1fa8c;">"안녕!🎩"</span>)</pre>
                    <button @click="copyCustomText('py_print_1', $event)" class="btn btn-xs btn-outline-warning position-absolute" style="top: 6px; right: 6px; font-size: 0.65rem; padding: 2px 6px;"><i class="fa fa-copy"></i></button>
                  </div>
                  <div class="p-2 bg-dark rounded border border-secondary position-relative" style="background-color: #1e1e24 !important;">
                    <span class="badge bg-info text-dark p-1 mb-1" style="font-size: 0.55rem; display:block; width:fit-content; font-family:sans-serif;">예시 2</span>
                    <pre class="m-0 fw-bold" id="py_print_2" style="font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; font-size: 1.35rem !important; white-space: pre-wrap;"><span style="color: #ff79c6;">print</span>(<span style="color: #f1fa8c;">"성공🦁"</span>)</pre>
                    <button @click="copyCustomText('py_print_2', $event)" class="btn btn-xs btn-outline-warning position-absolute" style="top: 6px; right: 6px; font-size: 0.65rem; padding: 2px 6px;"><i class="fa fa-copy"></i></button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-3">
            <div class="card h-100 border-0 text-white bg-dark-stone shadow" style="border-top: 4px solid #b600ff !important;">
              <div class="card-body p-2.5 d-flex flex-column justify-content-between">
                <div>
                  <h6 class="fw-bold mb-1.5" style="color: #b600ff; font-size: 0.95rem;">
                    <i class="fa fa-flask me-1.5"></i>2번 해독제: <span class="text-white">input()</span>
                  </h6>
                  <p class="text-silver mb-2.5" style="font-size: 0.72rem; line-height: 1.4;">
                    키보드로 입력받은 글자를 <b>상자(변수)에 담아 보관하고 사용하는 주문</b>입니다.
                  </p>
                </div>
                
                <div style="font-size: 1.35rem !important; line-height: 1.4;">
                  <div class="p-2 bg-dark rounded border border-secondary position-relative mb-2" style="background-color: #1e1e24 !important;">
                    <span class="badge bg-purple text-white p-1 mb-1" style="font-size: 0.55rem; background-color:#b600ff; display:block; width:fit-content; font-family:sans-serif;">예시 1</span>
                    <pre class="m-0 fw-bold" id="py_input_1" style="font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; font-size: 1.35rem !important; white-space: pre-wrap;"><span style="color: #50fa7b;">대답</span> = <span style="color: #ff79c6;">input</span>(<span style="color: #f1fa8c;">"?"</span>)<br><span style="color: #ff79c6;">print</span>(<span style="color: #f1fa8c;">"입력한 값은 "</span> + 대답)</pre>
                    <button @click="copyCustomText('py_input_1', $event)" class="btn btn-xs btn-outline-warning position-absolute" style="top: 6px; right: 6px; font-size: 0.65rem; padding: 2px 6px;"><i class="fa fa-copy"></i></button>
                  </div>
                  <div class="p-2 bg-dark rounded border border-secondary position-relative" style="background-color: #1e1e24 !important;">
                    <span class="badge bg-purple text-white p-1 mb-1" style="font-size: 0.55rem; background-color:#b600ff; display:block; width:fit-content; font-family:sans-serif;">예시 2</span>
                    <pre class="m-0 fw-bold" id="py_input_2" style="font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; font-size: 1.35rem !important; white-space: pre-wrap;"><span style="color: #50fa7b;">이름</span> = <span style="color: #ff79c6;">input</span>(<span style="color: #f1fa8c;">"!"</span>)<br><span style="color: #ff79c6;">print</span>(<span style="color: #f1fa8c;">"반가워 "</span> + 이름)</pre>
                    <button @click="copyCustomText('py_input_2', $event)" class="btn btn-xs btn-outline-warning position-absolute" style="top: 6px; right: 6px; font-size: 0.65rem; padding: 2px 6px;"><i class="fa fa-copy"></i></button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-3">
            <div class="card h-100 border-0 text-white bg-dark-stone shadow" style="border-top: 4px solid #ff4444 !important;">
              <div class="card-body p-2.5 d-flex flex-column justify-content-between">
                <div>
                  <h6 class="fw-bold mb-1.5" style="color: #ff4444; font-size: 0.95rem;">
                    <i class="fa fa-flask me-1.5"></i>3번 해독제: <span class="text-white">if</span> (만약에)
                  </h6>
                  <p class="text-silver mb-2.5" style="font-size: 0.72rem; line-height: 1.4;">
                    조건이 올바를 때만 문을 열고 안쪽 마법을 실행하는 <b>단독 관문</b>입니다.<br>
                    💡 기호: <b>&gt;</b> 크다 / <b>&lt;</b> 작다
                  </p>
                </div>
                
                <div style="font-size: 1.35rem !important; line-height: 1.4;">
                  <div class="p-2 bg-dark rounded border border-secondary position-relative" style="background-color: #1e1e24 !important;">
                    <span class="badge bg-danger text-white p-1 mb-1" style="font-size: 0.55rem; display:block; width:fit-content; font-family:sans-serif;">예시 1</span>
                    <pre class="m-0 fw-bold" id="py_if_1" style="font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; font-size: 1.35rem !important; white-space: pre-wrap;">피 = <span style="color: #bd93f9;">40</span><br><span style="color: #ff79c6;">if</span> 피 &gt; <span style="color: #bd93f9;">30</span>:<br>  <span style="color: #ff79c6;">print</span>(<span style="color: #f1fa8c;">"고"</span>)</pre>
                    <button @click="copyCustomText('py_if_1', $event)" class="btn btn-xs btn-outline-warning position-absolute" style="top: 6px; right: 6px; font-size: 0.65rem; padding: 2px 6px;"><i class="fa fa-copy"></i></button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-3">
            <div class="card h-100 border-0 text-white bg-dark-stone shadow" style="border-top: 4px solid #00ff66 !important;">
              <div class="card-body p-2.5 d-flex flex-column justify-content-between">
                <div>
                  <h6 class="fw-bold mb-1.5" style="color: #00ff66; font-size: 0.95rem;">
                    <i class="fa fa-flask me-1.5"></i>4번 해독제: <span class="text-white">if~else</span> (양방향)
                  </h6>
                  <p class="text-silver mb-2.5" style="font-size: 0.72rem; line-height: 1.4;">
                    조건이 맞을 때와 틀릴 때, 양쪽으로 <b>길을 갈라주는 마법 상자</b>입니다.<br>
                    💡 기호: <b>==</b> 완벽히 같다
                  </p>
                </div>
                
                <div style="font-size: 1.35rem !important; line-height: 1.4;">
                  <div class="p-2 bg-dark rounded border border-secondary position-relative" style="background-color: #1e1e24 !important;">
                    <span class="badge bg-success text-white p-1 mb-1" style="font-size: 0.55rem; display:block; width:fit-content; font-family:sans-serif;">예시 1</span>
                    <pre class="m-0 fw-bold" id="py_ifelse_1" style="font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; font-size: 1.35rem !important; white-space: pre-wrap;">답 = <span style="color: #f1fa8c;">"네"</span><br><span style="color: #ff79c6;">if</span> 답 == <span style="color: #f1fa8c;">"네"</span>:<br>  <span style="color: #ff79c6;">print</span>(<span style="color: #f1fa8c;">"🦁"</span>)<br><span style="color: #ff79c6;">else</span>:<br>  <span style="color: #ff79c6;">print</span>(<span style="color: #f1fa8c;">"❌"</span>)</pre>
                    <button @click="copyCustomText('py_ifelse_1', $event)" class="btn btn-xs btn-outline-warning position-absolute" style="top: 6px; right: 6px; font-size: 0.65rem; padding: 2px 6px;"><i class="fa fa-copy"></i></button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section data-background-color="#0e1310">
        <div class="d-flex justify-content-between align-items-center border-bottom border-warning pb-2 mb-3 w-100">
          <h3 class="text-warning font-magic mb-0">🧩 4일차 1교시 실전: 찢어진 마법 주문서 복원하기</h3>
          <span class="badge bg-warning text-dark py-2 px-3 border border-dark">미니 퀴즈</span>
        </div>
        
        <p class="text-silver small text-left mb-4">
          앗! 누군가 우리의 파이썬 마법 주문서의 핵심 단어들을 찢어버렸습니다. 방금 배운 <b>4가지 해독제(print, input, if, else)</b>를 기억해내어 빈칸에 올바른 주문을 타이핑해 보세요! (소문자로 입력해야 마법이 발동합니다.)
        </p>

        <div class="row g-3 text-left w-100 mx-auto" style="max-width: 950px;">
          
          <!-- 퀴즈 1 (print) -->
          <div class="col-md-6">
            <div class="card h-100 bg-dark-stone p-3 shadow-sm transition" 
                 :class="quizAns.q1.trim() === 'print' ? 'border-success border-2' : 'border-secondary border-1'"
                 style="background-color: #1a1e24 !important;">
              <h6 class="text-info fw-bold mb-2" style="font-size: 0.8rem;"><i class="fa fa-scroll me-1"></i> Q1. 화면에 글자 띄우기</h6>
              <p class="text-silver mb-2" style="font-size: 0.65rem;">모니터에 "마법 시작!"이라고 보여주고 싶어요.</p>
              
              <div class="p-3 bg-black rounded border border-dark position-relative">
                <pre class="m-0 text-white" style="font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 1.1rem !important;">
<input type="text" v-model="quizAns.q1" class="bg-dark text-warning fw-bold text-center border-bottom border-warning border-0" placeholder="?" style="width: 70px; outline: none; font-family: inherit;">(<span style="color: #f1fa8c;">"마법 시작!"</span>)</pre>
                
                <!-- 정답 이펙트 -->
                <div v-if="quizAns.q1.trim() === 'print'" class="position-absolute text-success fw-bold fade-in" style="top: 15px; right: 15px; font-size: 0.9rem;">
                  <i class="fa fa-check-circle me-1"></i>정답!
                </div>
              </div>
            </div>
          </div>

          <!-- 퀴즈 2 (input) -->
          <div class="col-md-6">
            <div class="card h-100 bg-dark-stone p-3 shadow-sm transition" 
                 :class="quizAns.q2.trim() === 'input' ? 'border-success border-2' : 'border-secondary border-1'"
                 style="background-color: #1a1e24 !important;">
              <h6 class="text-purple fw-bold mb-2" style="color: #b600ff; font-size: 0.8rem;"><i class="fa fa-keyboard me-1"></i> Q2. 키보드로 입력받기</h6>
              <p class="text-silver mb-2" style="font-size: 0.65rem;">마법사에게 이름을 입력받아 '이름' 변수에 저장하고 싶어요.</p>
              
              <div class="p-3 bg-black rounded border border-dark position-relative">
                <pre class="m-0 text-white" style="font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 1.1rem !important;"><span style="color: #50fa7b;">이름</span> = <input type="text" v-model="quizAns.q2" class="bg-dark text-warning fw-bold text-center border-bottom border-warning border-0" placeholder="?" style="width: 70px; outline: none; font-family: inherit;">(<span style="color: #f1fa8c;">"이름이 무엇입니까? "</span>)</pre>
                
                <!-- 정답 이펙트 -->
                <div v-if="quizAns.q2.trim() === 'input'" class="position-absolute text-success fw-bold fade-in" style="top: 15px; right: 15px; font-size: 0.9rem;">
                  <i class="fa fa-check-circle me-1"></i>정답!
                </div>
              </div>
            </div>
          </div>

          <!-- 퀴즈 3 (if) -->
          <div class="col-md-6">
            <div class="card h-100 bg-dark-stone p-3 shadow-sm transition" 
                 :class="quizAns.q3.trim() === 'if' ? 'border-success border-2' : 'border-secondary border-1'"
                 style="background-color: #1a1e24 !important;">
              <h6 class="text-danger fw-bold mb-2" style="font-size: 0.8rem;"><i class="fa fa-code-branch me-1"></i> Q3. 조건의 관문 열기</h6>
              <p class="text-silver mb-2" style="font-size: 0.65rem;">'만약' HP가 0보다 크다면 "생존"을 출력하고 싶어요.</p>
              
              <div class="p-3 bg-black rounded border border-dark position-relative">
                <pre class="m-0 text-white" style="font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 1.1rem !important;">
<input type="text" v-model="quizAns.q3" class="bg-dark text-warning fw-bold text-center border-bottom border-warning border-0" placeholder="?" style="width: 40px; outline: none; font-family: inherit;"> <span style="color: #50fa7b;">HP</span> > <span style="color: #bd93f9;">0</span>:
  <span style="color: #ff79c6;">print</span>(<span style="color: #f1fa8c;">"생존"</span>)</pre>
                
                <!-- 정답 이펙트 -->
                <div v-if="quizAns.q3.trim() === 'if'" class="position-absolute text-success fw-bold fade-in" style="top: 15px; right: 15px; font-size: 0.9rem;">
                  <i class="fa fa-check-circle me-1"></i>정답!
                </div>
              </div>
            </div>
          </div>

          <!-- 퀴즈 4 (else) -->
          <div class="col-md-6">
            <div class="card h-100 bg-dark-stone p-3 shadow-sm transition" 
                 :class="quizAns.q4.trim() === 'else' ? 'border-success border-2' : 'border-secondary border-1'"
                 style="background-color: #1a1e24 !important;">
              <h6 class="text-success fw-bold mb-2" style="font-size: 0.8rem;"><i class="fa fa-code-compare me-1"></i> Q4. 그렇지 않으면?</h6>
              <p class="text-silver mb-2" style="font-size: 0.65rem;">위 조건이 틀렸을 때(그렇지 않으면) 실행되는 길을 만들어요.</p>
              
              <div class="p-3 bg-black rounded border border-dark position-relative">
                <pre class="m-0 text-white" style="font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 1.1rem !important;"><span style="color: #ff79c6;">if</span> <span style="color: #50fa7b;">HP</span> > <span style="color: #bd93f9;">0</span>:
  <span style="color: #ff79c6;">print</span>(<span style="color: #f1fa8c;">"생존"</span>)
<input type="text" v-model="quizAns.q4" class="bg-dark text-warning fw-bold text-center border-bottom border-warning border-0" placeholder="?" style="width: 60px; outline: none; font-family: inherit;">:
  <span style="color: #ff79c6;">print</span>(<span style="color: #f1fa8c;">"게임 오버"</span>)</pre>
                
                <!-- 정답 이펙트 -->
                <div v-if="quizAns.q4.trim() === 'else'" class="position-absolute text-success fw-bold fade-in" style="top: 15px; right: 15px; font-size: 0.9rem;">
                  <i class="fa fa-check-circle me-1"></i>정답!
                </div>
              </div>
            </div>
          </div>

        </div>

        <div class="mt-4 text-center">
          <p class="text-warning small fw-bold mb-0 fade-in" v-if="quizAns.q1.trim() === 'print' && quizAns.q2.trim() === 'input' && quizAns.q3.trim() === 'if' && quizAns.q4.trim() === 'else'">
            🎉 완벽합니다! 모든 주문서가 복원되었습니다! 이제 마법 컴파일러 광장으로 입장하세요!
          </p>
        </div>
      </section>

      <section data-background-color="#0e1411">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3 w-100">
          <h3 class="text-gold font-magic mb-0">🐍 4일차 1교시: 주문 소환, AI 친구를 활용한 마법 모자 코드 만들기</h3>
          <span class="badge bg-slytherin text-white py-2 px-3 border border-light">AI로 코드 만들기</span>
        </div>
        <p class="text-light text-left small mb-3">
          4일차 아침이 밝았습니다! 어제 바탕화면 <b>메모장에 안전하게 저장해 두었던 나만의 마법 모자 [생각 설계도]</b>를 복사해 올 시간입니다. 이 설계도를 AI 번역기에게 던져 '진짜 작동하는 파이썬 게임'으로 소환하기 전, 모니터에 쏟아질 영어 글자들을 쉽게 격파할 <b>딱 4가지 마법의 해독 주스</b>를 마셔봅시다.
        </p>

        <div class="row g-3 text-left w-100 mx-auto">
          <div class="col-md-5">
            <div class="card h-100 border-0 text-white bg-dark-stone p-3.5 shadow border border-secondary d-flex flex-column justify-content-between">
              <div>
                <h5 class="text-warning fw-bold mb-3" style="font-size: 1.1rem;"><i class="fa fa-robot me-2"></i> 🤖 AI 친구에게 내리는 마법 주문서</h5>
                <p class="text-silver small mb-3" style="line-height: 1.6; font-size: 0.8rem;">
                  1. 인터넷 새 창을 열고 <b>[ChatGPT]</b> 또는 <b>[Gemini]</b> 화면으로 들어갑니다.<br><br>
                  2. 어제 메모장에 보물처럼 저장해 둔 나만의 <b>[한글 생각 설계도]</b>를 마우스로 몽땅 긁어서 복사(Ctrl+C)합니다.<br><br>
                  3. AI 글자 입력창에 설계도를 붙여넣고(Ctrl+V), 맨 밑에 아래의 <b>[AI 마법 주문]</b>을 그대로 입력해 보세요!
                </p>
              </div>

              <div class="p-3 bg-dark rounded border border-warning position-relative">
                <span class="badge bg-danger text-white position-absolute" style="top: -10px; left: 15px; font-size: 0.6rem;">AI 마법 주문</span>
                <pre class="m-0 text-white fw-bold font-monospace" id="promptText" style="font-size: 0.9rem; white-space: pre-wrap; line-height: 1.4;"><span class="text-info" style="opacity: 0.9;">[ ctrl + v 한 내 한글생각 설계도 ]</span>

"내가 작성한 이 한글 생각 설계도 규칙을 바탕으로, 실제로 실행해서 게임처럼 움직이는 파이썬(Python) 코드로 완벽하게 바꿔줘! 
<span class="text-warning">단, 사용자가 대답할 때 '네'는 y로, '아니오'는 n으로 입력할 수 있게 코드를 짜줘!</span>"</pre>
                <button @click="copyCustomText('promptText', $event)" class="btn btn-xs btn-outline-warning position-absolute" style="bottom: 8px; right: 8px; font-size: 0.65rem; padding: 2px 6px;"><i class="fa fa-copy"></i> 주문 복사</button>
              </div>
            </div>
          </div>

          <div class="col-md-7">
            <div class="card h-100 border-0 text-white bg-dark-wood p-3 shadow border border-gold">
              <h5 class="text-gold fw-bold mb-2" style="font-size: 0.95rem;"><i class="fa fa-code me-2"></i> 💻 AI가 1초 만에 뚝딱 만들어준 진짜 파이썬 코드</h5>
              <div class="p-2.5 rounded" style="background-color: #1e1e24 !important; border: 1px solid #444; box-shadow: inset 0 0 10px rgba(0,0,0,0.8);">
                <pre class="m-0 fw-bold" style="font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.95rem !important; line-height: 1.4; color: #f8f8f2;">
<span style="color: #6272a4;"># 🪄 말하는 마법 모자 게임 코드</span>
<span style="color: #ff79c6;">print</span>(<span style="color: #f1fa8c;">"🎩 말하는 마법 모자 작동..."</span>)
q1 = <span style="color: #ff79c6;">input</span>(<span style="color: #f1fa8c;">"마음속에 거대한 용기가 꿈틀거리나요? (y/n): "</span>)

<span style="color: #ff79c6;">if</span> q1 == <span style="color: #f1fa8c;">"y"</span>:
    <span style="color: #ff79c6;">print</span>(<span style="color: #f1fa8c;">"🦁 그리핀도르 기숙사 배정!!"</span>)
<span style="color: #ff79c6;">else</span>:
    q2 = <span style="color: #ff79c6;">input</span>(<span style="color: #f1fa8c;">"밤새도록 마법 도서관에서 책 읽는 걸 좋아하나요? (y/n): "</span>)
    <span style="color: #ff79c6;">if</span> q2 == <span style="color: #f1fa8c;">"y"</span>:
        <span style="color: #ff79c6;">print</span>(<span style="color: #f1fa8c;">"🦅 래번클로 기숙사 배정!!"</span>)
    <span style="color: #ff79c6;">else</span>:
        q3 = <span style="color: #ff79c6;">input</span>(<span style="color: #f1fa8c;">"의리와 친구를 위해 목숨도 바칠 수 있나요? (y/n): "</span>)
        <span style="color: #ff79c6;">if</span> q3 == <span style="color: #f1fa8c;">"y"</span>:
            <span style="color: #ff79c6;">print</span>(<span style="color: #f1fa8c;">"🦡 후플푸프 기숙사 배정!!"</span>)
        <span style="color: #ff79c6;">else</span>:
            <span style="color: #ff79c6;">print</span>(<span style="color: #f1fa8c;">"🐍 슬리데린 기숙사 배정!!"</span>)</pre>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section data-background-color="#0f1512">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3 w-100">
          <h3 class="text-gold font-magic mb-0">🔍 숨은 그림 찾기 미션: 내 생각이 어떻게 코드로 바뀌었을까?</h3>
          <span class="badge bg-warning text-dark py-2 px-3 border border-dark fw-bold">4차 구조 정밀 비교</span>
        </div>
        <p class="text-light text-left small mb-3">
          우리가 한글로 만든 생각 설계도가 AI를 거쳐 어떻게 영어 코드 관문으로 변신했는지 비밀을 풀 시간입니다. <b>4가지 상징 색깔로 칠해진 구역</b>을 서로 매칭하며 숨은 그림을 찾아보세요!
        </p>

        <div class="row g-2 text-left w-100 mx-auto">
          <div class="col-md-4">
            <div class="p-2 bg-dark rounded border border-secondary h-100">
              <span class="badge bg-secondary text-white mb-2" style="font-size: 0.6rem;">1. 나의 한글 생각 설계도</span>
              <pre class="m-0 font-monospace text-white" style="font-size: 0.75rem; line-height: 1.45; white-space: pre-wrap;">
마법 모자의 질문
<span style="background-color: rgba(255, 68, 68, 0.23); display: block; padding: 2px 4px; border-left: 3px solid #ff4444;">  마음속에 거대한 용기가 꿈틀거리는가?
    네: 그리핀도르 기숙사! 🦁</span>  
<span style="background-color: rgba(0, 192, 255, 0.2); display: block; padding: 2px 4px; border-left: 3px solid #00c0ff;">  
    아니오: 밤새도록 도서관에서 책 읽는 것을 사랑하는가?
      네: 래번클로 기숙사! 🦅</span>    
<span style="background-color: rgba(255, 170, 0, 0.2); display: block; padding: 2px 4px; border-left: 3px solid #ffaa00;">  
      아니오: 의리와 친구를 위해 목숨도 바칠 수 있는가?
        네: 후플푸프 기숙사! 🦡</span><span style="background-color: rgba(0, 255, 102, 0.18); display: block; padding: 2px 4px; border-left: 3px solid #00ff66;">  
        아니오: 슬리데린 기숙사 🐍</span></pre>
            </div>
          </div>

          <div class="col-md-4">
            <div class="p-2 bg-dark rounded border border-secondary h-100" style="background-color: #1e1e24 !important;">
              <span class="badge bg-secondary text-white mb-2" style="font-size: 0.6rem;">2. 변환된 영어 파이썬 코드</span>
              <pre class="m-0 font-monospace" style="font-size: 0.75rem; line-height: 1.45; color: #f8f8f2;">
print("🎩 마법 모자 작동...")
<span style="background-color: rgba(255, 68, 68, 0.23); display: block; padding: 2px 4px; border-left: 3px solid #ff4444;">
q1 = input("용기가 있나요? (y/n): ")
  if q1 == "y":
    print("🦁 그리핀도르 배정!!")</span><span style="background-color: rgba(0, 192, 255, 0.2); display: block; padding: 2px 4px; border-left: 3px solid #00c0ff;">
  else:
    q2 = input("독서를 좋아하나요? (y/n): ")
    if q2 == "y":
      print("🦅 래번클로 배정!!")</span><span style="background-color: rgba(255, 170, 0, 0.2); display: block; padding: 2px 4px; border-left: 3px solid #ffaa00;">    
    else:
      q3 = input("의리가 중요합니까? (y/n): ")
      if q3 == "y":
        print("🦡 후플푸프 배정!!")</span><span style="background-color: rgba(0, 255, 102, 0.18); display: block; padding: 2px 4px; border-left: 3px solid #00ff66;">        
      else:
        print("🐍 슬리데린 배정!!")</span></pre>
            </div>
          </div>

          <div class="col-md-4 d-flex flex-column gap-1 justify-content-between">
            <div onclick="const desc = document.getElementById('scan1'); desc.style.display = desc.style.display === 'none' ? 'block' : 'none';" class="p-2 rounded cursor-pointer hover-scale border shadow-sm" style="background-color: rgba(255, 68, 68, 0.08) !important; border-color: #ff4444 !important;">
              <div class="d-flex justify-content-between align-items-center fw-bold" style="font-size: 0.7rem;">
                <span style="color: #ff4444;"><i class="fa fa-magnifying-glass me-1"></i> 1번 보물: 용기의 방</span>
                <span class="badge bg-danger text-white" style="font-size: 0.52rem;">확인 (클릭)</span>
              </div>
              <div id="scan1" class="mt-1 text-white bg-dark p-2 rounded" style="display: none; line-height: 1.4; font-size: 0.7rem; border-left: 3px solid #ff4444;">
                👉 한글 설계도의 첫 번째 질문인 <b class="text-warning">[용기 ➔ 네]</b> 선이 파이썬의 대장문인 <b class="text-danger">if q1 == "y":</b> 코드로 번역되었습니다.
              </div>
            </div>

            <div onclick="const desc = document.getElementById('scan2'); desc.style.display = desc.style.display === 'none' ? 'block' : 'none';" class="p-2 rounded cursor-pointer hover-scale border shadow-sm" style="background-color: rgba(0, 192, 255, 0.08) !important; border-color: #00c0ff !important;">
              <div class="d-flex justify-content-between align-items-center fw-bold" style="font-size: 0.7rem;">
                <span style="color: #00c0ff;"><i class="fa fa-magnifying-glass me-1"></i> 2번 보물: 지혜의 샛길</span>
                <span class="badge bg-info text-dark" style="font-size: 0.52rem;">확인 (클릭)</span>
              </div>
              <div id="scan2" class="mt-1 text-white bg-dark p-2 rounded" style="display: none; line-height: 1.4; font-size: 0.7rem; border-left: 3px solid #00c0ff;">
                👉 용기가 없다고 고개를 저은 뒤 만나는 파란색 <b class="text-info">else:</b> 문틀입니다. 그 안에서 독서 광장 질문인 <b class="text-info">if q2 == "y":</b> 관문이 열리게 됩니다.
              </div>
            </div>

            <div onclick="const desc = document.getElementById('scan3'); desc.style.display = desc.style.display === 'none' ? 'block' : 'none';" class="p-2 rounded cursor-pointer hover-scale border shadow-sm" style="background-color: rgba(255, 170, 0, 0.08) !important; border-color: #ffaa00 !important;">
              <div class="d-flex justify-content-between align-items-center fw-bold" style="font-size: 0.7rem;">
                <span style="color: #ffaa00;"><i class="fa fa-magnifying-glass me-1"></i> 3번 보물: 의리의 관문</span>
                <span class="badge bg-warning text-dark" style="font-size: 0.52rem;">확인 (클릭)</span>
              </div>
              <div id="scan3" class="mt-1 text-white bg-dark p-2 rounded" style="display: none; line-height: 1.4; font-size: 0.7rem; border-left: 3px solid #ffaa00;">
                👉 용기도 없고 독서도 아니라고 했을 때 미끄러져 들어오는 두 번째 <b class="text-warning">else:</b> 아래층입니다. 그 깊숙한 안쪽에서 의리를물어보는 세 번째 <b class="text-warning">if q3 == "y":</b> 관문이 작동합니다!
              </div>
            </div>

            <div onclick="const desc = document.getElementById('scan4'); desc.style.display = desc.style.display === 'none' ? 'block' : 'none';" class="p-2 rounded cursor-pointer hover-scale border shadow-sm" style="background-color: rgba(0, 255, 102, 0.08) !important; border-color: #00ff66 !important;">
              <div class="d-flex justify-content-between align-items-center fw-bold" style="font-size: 0.7rem;">
                <span style="color: #00ff66;"><i class="fa fa-magnifying-glass me-1"></i> 4번 보물: 야망의 종착지</span>
                <span class="badge bg-success text-white" style="font-size: 0.52rem;">확인 (클릭)</span>
              </div>
              <div id="scan4" class="mt-1 text-white bg-dark p-2 rounded" style="display: none; line-height: 1.4; font-size: 0.7rem; border-left: 3px solid #00ff66;">
                👉 용기, 지혜, 의리라는 모든 마법 문틀을 우회하고 통과해 버린 <b>나머지 몽땅 다</b>를 잡아내는 최하단 최종 예외 상자 <b class="text-success">else:</b> 구역입니다. 여기에 걸린 아이들은 슬리데린으로 직행합니다!
              </div>
            </div>
          </div>
        </div>
      </section>

      <section data-background-color="#0e1519">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3 w-100">
          <h3 class="text-gold font-magic mb-0">🧹 4일차 2교시 선행 지식: 공중 스포츠 퀴디치 경기 규칙</h3>
          <span class="badge bg-slytherin text-white py-2 px-3 border border-light">인프라 스케일 아웃</span>
        </div>
        
        <div class="row align-items-center w-100 g-3 text-left">
          <div class="col-md-5">
            <h5 class="text-warning fw-bold mb-2" style="font-size: 0.9rem;"><i class="fa fa-circle-info me-1"></i> 프로그램 확장을 위한 규칙 분석</h5>
            <p class="text-silver small" style="line-height: 1.6; font-size: 0.75rem;">
              기숙사 배정 엔진 밑에 이어 붙일 <b>[퀴디치 선발 시스템]</b> 아키텍처를 이해하려면 마법사들의 국가대표 스포츠 규칙을 명확히 알아야 합니다. <br><br>
              수색꾼(Seeker)이 추격해야 할 황금 스니치가 얼마나 빠른지, 비행 적성 테스트 탈락 시 충격을 완화할 안전 그물망 설계가 왜 필요한지 우측 비디오 스펠을 시청하며 아이디어를 획득해 보세요.
            </p>
          </div>
          
          <div class="col-md-7 text-center">
            <div class="p-1 bg-dark rounded border border-secondary shadow position-relative" style="height: 330px; overflow: hidden;">
              <iframe width="100%" height="100%" src="https://www.youtube.com/embed/BNbseijF2oQ" 
                      title="퀴디치 경기 규칙" frameborder="0" 
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                      allowfullscreen style="border-radius: 8px;">
              </iframe>
            </div>
            <span class="text-silver opacity-75 d-block mt-2 font-monospace" style="font-size: 0.65rem;">⚡ 런타임 제어권 스캔: 국가대표 기동 포지션 적성 확인 비디오</span>
          </div>
        </div>
      </section>

      <section data-background-color="#151119">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3 w-100">
          <h3 class="text-gold font-magic mb-0">🧹 4일차 2교시: 아키텍트 확장, 퀴디치 대표 선발 시스템 증축</h3>
          <span class="badge bg-slytherin text-white py-2 px-3 border border-light">2단계 고도화</span>
        </div>
        <p class="text-light text-left small mb-4">
          기숙사 배정만으론 부족합니다! 아키텍트는 이제 기존 코드 밑에 <b>[퀴디치 국가대표 선발 시스템]</b>을 이어 붙입니다. AI에게 아래 규칙을 알려주고 내 게임을 더 거대하게 확장해 보세요!
        </p>

        <div class="d-flex flex-column text-left w-100 mx-auto" style="gap: 35px !important;">
          <div class="card border-0 text-white bg-dark-stone shadow border-top border-danger border-4" style="padding: 25px 30px;">
            <div class="d-flex justify-content-between align-items-center flex-wrap g-4">
              <div style="flex: 1; min-width: 400px; margin-right: 30px;">
                <h5 class="text-danger fw-bold mb-2" style="font-size: 1.1rem;"><i class="fa fa-broom me-2"></i> STEP 1. 빗자루 비행 면허 테스트</h5>
                <p class="text-silver mb-0" style="font-size: 0.8rem; line-height: 1.55;">
                  가장 먼저 학생에게 빗자루를 잘 타는지 물어봅니다. 만약 <b>[아니오]</b>를 고르면? <br>
                  게임이 그냥 끝나지 않고, 사용자의 돌발 행동을 막아내는 <b>'안전 구역 예외 처리'</b> 규칙이 작동합니다!
                </p>
              </div>
              <div class="p-3 rounded font-weight-bold text-center border border-danger shadow-sm" style="font-size: 0.82rem; background-color: rgba(255,0,0,0.12) !important; color: #ff6b6b; min-width: 300px; line-height: 1.4;">
                💥 "으악! 빗자루에서 미끄러져 뇌진탕으로<br>폼프리 부인 병동에 실려갔습니다. (게임오버)"
              </div>
            </div>
          </div>

          <div class="card border-0 text-white bg-dark-stone shadow border-top border-info border-4" style="padding: 25px 30px;">
            <div class="d-flex justify-content-between align-items-center flex-wrap g-4">
              <div style="flex: 1; min-width: 400px; margin-right: 40px;">
                <h5 class="text-info fw-bold mb-2" style="font-size: 1.1rem;"><i class="fa fa-crosshairs me-2"></i> STEP 2. 포지션 정밀 적성 검사</h5>
                <p class="text-silver mb-0" style="font-size: 0.8rem; line-height: 1.55;">
                  비행 테스트를 통과한 고수들에게만 <b>[시력 검사]</b> 질문을 한 번 더 던집니다. <br>
                  눈이 얼마나 좋은지에 따라 내가 활약할 퀴디치 경기 포지션이 자동으로 결정됩니다!
                </p>
              </div>
              <div class="d-flex gap-2.5" style="min-width: 340px;">
                <div class="p-2.5 bg-dark rounded border border-info text-center" style="width: 165px; box-shadow: 0 4px 10px rgba(0,0,0,0.3);">
                  <span class="text-info d-block mb-1" style="font-size: 0.65rem; font-weight: 500;">시력 매우 좋음 (y)</span>
                  <b class="text-white" style="font-size: 0.85rem;">✨ 수색꾼 (Seeker)</b>
                </div>
                <div class="p-2.5 bg-dark rounded border border-info text-center" style="width: 165px; box-shadow: 0 4px 10px rgba(0,0,0,0.3);">
                  <span class="text-info d-block mb-1" style="font-size: 0.65rem; font-weight: 500;">시력 보통 (n)</span>
                  <b class="text-white" style="font-size: 0.85rem;">🛡️ 파수꾼 (Keeper)</b>
                </div>
              </div>
            </div>
          </div>

          <div class="p-4 bg-dark-wood rounded border border-warning shadow position-relative w-100" style="margin-top: 10px;">
            <span class="badge bg-warning text-dark position-absolute" style="top: -10px; left: 25px; font-size: 0.65rem; padding: 4px 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.5);">AI 확장 마법 주문 (복사해서 붙여넣으세요!)</span>
            <pre class="m-0 text-white fw-bold font-monospace" id="expandPrompt" style="font-size: 0.88rem; white-space: pre-wrap; line-height: 1.5; padding-right: 110px;">"이미 만든 마법 모자 코드 바로 밑에 퀴디치 선발 기능을 추가해줘. 먼저 빗자루를 타는지 물어보고 'n'이면 병원 실려가는 메시지와 함께 끝내줘. 'y'이면 다시 시력을 물어보고 좋으면 수색꾼, 아니면 파수꾼이라고 출력해줘!"</pre>
            <button @click="copyCustomText('expandPrompt', $event)" class="btn btn-xs btn-outline-warning position-absolute" style="bottom: 15px; right: 20px; font-size: 0.72rem; padding: 6px 14px;"><i class="fa fa-copy me-1"></i> 주문 복사</button>
          </div>
        </div>
      </section>

      <section data-background-color="#112419">
        <div class="card card-magic bg-dark-stone text-white p-4 my-2 border border-success shadow mx-auto" style="max-width: 900px;">
          <h5 class="text-success fw-bold mb-2"><i class="fa fa-bolt me-2"></i> 🧹 런타임 검증: 퀴디치 가동 및 예외 복구 회로(Fallback) 테스트베드</h5>
          <p class="text-silver small text-left mb-3">
            프로그램 구동 중 돌발 추락 예외가 났을 때 시스템이 완전히 뻗어버리지 않게 충격을 흡수하는 <b>Fallback(대안) 안전장치</b>를 켜고 꺼보세요!
          </p>

          <div class="row text-left font-monospace g-3 mb-3" style="font-size: 0.78rem;">
            <div class="col-md-6 border-end border-secondary pr-3">
              <div class="text-gold fw-bold mb-2">🕹️ 비행 제어 및 적성 환경 설정</div>
              <div class="d-flex align-items-center gap-2 mb-1">
                <span>빗자루 비행을 잘 타는가?:</span>
                <select v-model="simDay4BroomOk" class="bg-dark text-white border border-secondary rounded p-0.5 small">
                  <option value="y">예 (y)</option>
                  <option value="n">아니오 (n) -> [추락 예외 유발]</option>
                </select>
              </div>
              <div class="d-flex align-items-center gap-2">
                <span>황금 스니치 포착 시력 능력:</span>
                <select v-model="simDay4Vision" class="bg-dark text-white border border-secondary rounded p-0.5 small">
                  <option value="y">매우 좋음 (y)</option>
                  <option value="n">보통 (n)</option>
                </select>
              </div>
            </div>
            <div class="col-md-6 pl-3">
              <div class="text-info fw-bold mb-2">🛡️ 예외 복구 안전 회로 스위치 (Try-Catch 단)</div>
              <div class="d-flex gap-2 align-items-center mb-2">
                <span class="small">안전망 가동 상태:</span>
                <button @click="simDay4FallbackActive = !simDay4FallbackActive" class="btn btn-xs fw-bold px-3"
                        :class="simDay4FallbackActive ? 'btn-success' : 'btn-danger'">
                  {{ simDay4FallbackActive ? 'ON (안전막 작동)' : 'OFF (회로 해제)' }}
                </button>
              </div>
              <button @click="runDay4Simulation" class="btn btn-sm btn-success text-white fw-bold w-100 shadow shadow-sm">
                ⚡ 엔진 런타임 기동 (Run)
              </button>
            </div>
          </div>

          <div class="bg-black rounded p-2.5 text-left font-monospace" style="font-size: 0.72rem; min-height: 115px; border: 1px solid #444; box-shadow: inset 0 0 10px rgba(0,0,0,0.8); background: #000; padding: 8px 12px;">
            <div class="d-flex justify-content-around text-muted border-bottom border-secondary pb-1 mb-2">
              <span>🔮 마법 예언 거울의 실시간 중계 스트리밍</span>
              <span :class="simDay4Status === 'CRASH' ? 'text-danger fw-bold blink-anim' : 'text-success fw-bold'">
                인프라 상태: {{ simDay4Status === 'READY' ? '대기 중' : (simDay4Status === 'RUNNING' ? '하늘을 나는 중' : (simDay4Status === 'SUCCESS' ? '합격 성공' : (simDay4Status === 'FALLBACK' ? '우회 안전 착륙' : '💥 대폭발 크래시'))) }}
              </span>
            </div>
            <div v-for="(log, idx) in simDay4Logs" :key="idx" :style="{ color: log.color }" class="d-flex align-items-start mb-1">
              <span class="mr-2" style="user-select: none; opacity: 0.8;">✨</span>
              <span class="text-left w-100">{{ log.text }}</span>
            </div>
          </div>
        </div>
      </section>

      <section data-background-color="#111115">
        <div class="text-center w-100 mb-3">
          <h3 class="text-gold font-magic" style="font-size: 2.2rem;">🚀 최종 히든 미션: 비밀 동아리방 개척 및 동료 평가</h3>
          <p class="text-silver mx-auto mb-3" style="max-width: 800px; font-size: 0.9rem;">
            드디어 나만의 거대한 마법 세계가 완성되었습니다. 공유된 코드를 클릭하여,<br>
            내 생각의 설계도대로 코드가 정확하게 작동하는지 서로 <b>[플레이 테스트]</b>를 수행해 봅시다!
          </p>
        </div>

        <div class="card card-magic bg-dark-stone text-white w-100 shadow-lg border border-warning mb-4" style="padding: 22px 28px; border-radius: 15px;">
          <h5 class="text-gold fw-bold mb-2" style="font-size: 1.05rem;"><i class="fa fa-shuttle-space me-2"></i> 퀴디치 탈락자를 위한 대안(Fallback) 아키텍처</h5>
          <p class="text-silver mb-3" style="font-size: 0.8rem; line-height: 1.5;">
            빗자루 비행 테스트에서 탈락했거나 대표팀에 뽑히지 못했다고 낙담할 필요는 없습니다. 진정한 시스템 아키텍트는 <b>새로운 대안(Fallback)</b>을 창조해 내니까요! 병동에 누워있거나 빈둥거리는 학생들을 위해 아래 예시처럼 <b>내가 상상하는 우주 최강 동아리방</b>을 코드 맨 밑에 자유롭게 증축하라고 AI에게 속삭여보세요!
          </p>
          
          <div class="row g-2 text-center text-dark fw-bold mb-2.5" style="font-size: 0.78rem;">
            <div class="col-md-3"><div class="p-2 bg-light rounded shadow-sm border-start border-danger border-4">🍗 바삭 치킨 동아리</div></div>
            <div class="col-md-3"><div class="p-2 bg-light rounded shadow-sm border-start border-primary border-4">♟️ 살아있는 체스 동아리</div></div>
            <div class="col-md-3"><div class="p-2 bg-light rounded shadow-sm border-start border-warning border-4">💤 합법적 꿀잠 동아리</div></div>
            <div class="col-md-3"><div class="p-2 bg-light rounded shadow-sm border-start border-success border-4">👾 방과후 탕후루 연구회</div></div>
          </div>
          
          <div class="p-2.5 bg-dark rounded border border-secondary font-monospace position-relative" style="font-size: 0.82rem; line-height: 1.45;">
            <span class="text-success fw-bold">💡 AI 지령 치트키:</span> <span class="text-white">"만약 퀴디치 대표팀에 못 들어가면 최종 예외 창에 그냥 끝내지 말고, 내가 제일 좋아하는 <b>[원하는 동아리 이름]</b> 방으로 강제 배정되는 재미있는 메시지를 추가해줘!"</span>
          </div>
        </div>
        <div class="text-center pt-3 mt-3 border-top border-secondary mx-auto w-100" style="max-width: 850px;">
          <p class="text-silver small mb-2" style="font-size: 1rem; opacity: 0.9;">
            📸 자신만의 독특한 동아리를 작성한 코드를 공유해봅시다!
          </p>
          <a href="https://padlet.com/swhacademy/padlet-12m4cejjbdou3wcz" target="_blank" 
             class="btn text-white fw-bold px-4 py-2 rounded-pill shadow-lg hover-scale bounce-hover" 
             style="font-size: 0.85rem; background: linear-gradient(135deg, #ff69b4, #ff1493); text-decoration: none; display: inline-block; border: 2px solid #ffb6c1;">
            📌 자신이 만든 세상에서 제일 이상하고 신기한 동아리는? (클릭)
          </a>
        
        </div>
      </section>

      <section data-background-color="#111519">
        <div class="d-flex justify-content-between align-items-center border-bottom border-gold pb-2 mb-3 w-100">
          <h3 class="text-gold font-magic mb-0">👾 아키텍트의 놀이터: 코드 해킹으로 게임 개조하기 (Modding)</h3>
          <span class="badge bg-primary text-white py-2 px-3 border border-light">모딩(Modding)</span>
        </div>
        <p class="text-light text-left small mb-3">
          전 세계의 유명한 프로그래머들은 남이 만든 게임의 속을 뜯어고치는 <b>'모딩(Modding)'</b>을 하면서 코딩을 배웁니다. AI가 짜준 코드가 잘 돌아간다면, 이제 이 세계를 <b>[호그와트]</b>에서 <b>[여러분이 좋아하는 다른 세계]</b>로 완전히 개조해 봅시다!
        </p>

        <div class="row g-3 text-left w-100 mx-auto">
          <div class="col-md-6">
            <div class="card h-100 border-0 bg-dark-stone text-white p-3.5 shadow-lg" style="border-left: 5px solid #00c0ff !important;">
              <h5 class="text-info fw-bold mb-2" style="font-size: 1rem;"><i class="fa fa-unlock-keyhole me-2"></i> 해킹의 절대 법칙: 큰따옴표(" ")를 찾아라!</h5>
              <p class="text-silver mb-3" style="font-size: 0.78rem; line-height: 1.55;">
                파이썬 코드에서 <b class="text-danger">print</b>나 <b class="text-danger">if</b> 같은 영어 명령어 자체를 건드리면 컴퓨터가 에러를 뿜으며 기절합니다. 하지만! <b>큰따옴표 <span class="text-warning">" "</span> 안에 들어있는 초록색 글자들</b>은 여러분이 무슨 말로 바꾸든, 어떤 이모티콘을 넣든 컴퓨터가 무조건 허락하는 <b>'아키텍트의 자유 구역'</b>입니다.
              </p>
              <div class="p-2 bg-black rounded font-monospace text-silver" style="font-size: 0.75rem;">
                <span class="text-danger">print</span>(<span class="text-success">"여기에 있는 글자는 마음대로 바꿔도 됨! ⚽🍗"</span>)
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="card h-100 border-0 bg-dark-stone text-white p-3.5 shadow-lg" style="border-left: 5px solid #ff4444 !important;">
              <h5 class="text-danger fw-bold mb-2" style="font-size: 1rem;"><i class="fa fa-futbol me-2"></i> 개조 아이디어: 마법 학교 ➔ 축구 국가대표 선발전</h5>
              <p class="text-silver mb-3" style="font-size: 0.78rem; line-height: 1.55;">
                호그와트 기숙사 대신 <b>유럽 축구팀 배정 게임</b>이나 <b>아이돌 그룹 선발 게임</b>으로 세계관을 통째로 바꿔보세요! 큰따옴표 안의 질문과 결과만 쏙쏙 바꾸면 5분 만에 완전히 새로운 게임이 탄생합니다.
              </p>
              <div class="p-2 bg-black rounded font-monospace text-silver" style="font-size: 0.72rem; line-height: 1.5;">
                q1 = input(<span class="text-success">"달리기 속도가 엄청나게 빠릅니까? (y/n): "</span>)<br>
                if q1 == "y":<br>
                &nbsp;&nbsp;print(<span class="text-success">"⚽ 손흥민의 토트넘 팀으로 영입!!"</span>)
              </div>
            </div>
          </div>
        </div>

        <div class="alert bg-gold-gradient text-dark border-0 mt-4 p-2.5 text-center font-weight-bold shadow-lg w-100 mx-auto" style="max-width: 900px; font-size: 0.85rem;">
          🚀 <b>해커의 미션:</b> 코드를 개조하여 <b>세상에 하나뿐인 나만의 엉뚱한 심리테스트 게임</b>을 만들고, 옆 친구와 노트북을 바꿔서 테스트해 보세요! 가장 웃긴 결과를 만든 사람이 오늘의 우승자입니다!
        </div>
      </section>

      <section data-background-color="#141119">
        <div class="text-center w-100 mb-3">
          <h3 class="text-gold font-magic" style="font-size: 2.3rem;">🏁 마법 학교 최종 수료식</h3>
          <p class="text-silver mx-auto mb-3" style="max-width: 800px; font-size: 0.95rem;">
            모든 훈련 과정을 훌륭하게 통과한 마법 아키텍트 여러분, 축하합니다!
          </p>
        </div>

        <div class="card card-magic bg-dark-stone text-white w-100 p-3 shadow-lg text-left border-0 mx-auto mb-3" style="border-radius: 15px; max-width: 850px;">
          <h6 class="text-success fw-bold border-bottom border-secondary pb-2 mb-2">
            <i class="fa fa-handshake me-2"></i> 동료 평가(Peer Review)
          </h6>
          <p class="small opacity-90 italic mb-0" style="line-height: 1.6; font-size: 0.82rem;">
            "너는 퀴디치에 떨어져 병원에 누워있는 친구들한테 그냥 게임오버를 주는 게 아니라, <b>[바삭 치킨 동아리 🍗]방으로 배달 전단을 보내주는 예외 처리 설계</b>를 했구나! <br>
            단순히 멈추는 시스템이 아니라 사용자의 기분까지 완벽하게 케어해주는 위트 있고 강력한 설계야!"
          </p>
        </div>

        <div class="card card-magic bg-dark-wood text-gold w-100 p-4 shadow-lg border border-gold d-flex flex-column justify-content-center mx-auto mb-4" style="border-radius: 18px; max-width: 850px;">
          <div class="mb-2"><span style="font-size: 3rem;">📜</span></div>
          <h4 class="text-gold fw-bold mb-2" style="font-size: 1.3rem;">그랜드 아키텍트 마법사 인증</h4>
          <p class="text-white opacity-90 mb-0 font-weight-bold" style="line-height: 1.6; font-size: 0.9rem;">
            "여러분은 오늘 어려운 영문 문법을 억지로 외우지 않았지만, 세상 그 어떤 프로그래머보다 강력한 <b>[시스템 설계 철학]</b>을 완성했습니다. <br>
            다가오는 인공지능 시대의 진짜 주인은 AI의 코드를 복사하는 사람이 아니라, 생각을 지배하고 예외 공간을 완벽하게 설계하는 아키텍트, 바로 여러분입니다!"
          </p>
        </div>

        <div class="w-100 text-center py-2.5 bg-black rounded-pill border border-danger shadow-lg mx-auto" style="max-width: 800px;">
          <h2 class="text-danger fw-bold mb-0" style="font-size: 1.4rem; letter-spacing: -1px; animation: blink 1s infinite;">
            🚨 마지막 설문 조사! 꼭 참여하고 하차하세요! 🚨
          </h2>
        </div>

        <div class="mt-2 text-center">
           <span class="text-silver small" style="font-size: 0.75rem;">오늘 수업이 어땠는지 아키텍트의 마지막 의견을 들려주세요.</span>
        </div>
      </section>

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

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

export default {
  components: { HomeButton },
  data() {
    return {
      // 1일차 1교시: 라면 레시피 오류 인터랙션 토글 상태 배열
      showComponentHint: [false, false, false, false, false, false],
      ramyunComponents: [
        { 
          title: "부품 A", 
          hint: "🧭 조리를 시작할 때 가장 먼저 냄비에 부어야 하는 기본 액체 자원은 무엇일까요? (제약 조건: 정확히 550ml가 필요해요!)" 
        },
        { 
          title: "부품 B", 
          hint: "📦 액체와 모든 데이터(재료)들을 내부에 안전하게 담아두는 도구는?" 
        },
        { 
          title: "부품 C", 
          hint: "🔥 차가운 상태의 액체를 팔팔 끓게하는 '에너지원'은?" 
        },
        { 
          title: "부품 D", 
          hint: "⚡ 국물이 끓기 시작할 때 투입되는 가장 덩치가 큰 핵심 데이터로, 꼬불꼬불하게 생긴 주된 재료는?" 
        },
        { 
          title: "부품 E", 
          hint: "🌶️ 국물의 얼큰한 맛 and 붉은 색깔을 결정하며, 액체에 흔적도 없이 사르르 녹아드는 가루 형태의 자원은?" 
        },
        { 
          title: "시스템 데이터 F", 
          hint: "🌿 파, 버섯, 당근 등으로 이루어져 라면의 맛과 완성도를 미세하게 업그레이드해주는 '보조 자원'은?" 
        }
      ],
      showExample: false,

      // 1일차 1교시 라면 2단계 파이프라인 연결 세션용 데이터셋
      showFlowHint: [false, false, false, false],
      showFlowExample: false,
      
      ramyunFlows: [
        { 
          title: "Step 1. 시작점 찾기", 
          hint: "🎬 요리를 시작하려면 가장 먼저 단단한 [그릇]이 필요해요. 도화지 맨 왼쪽에 [냄비] 상자를 먼저 이쁘게 그려주세요!" 
        },
        { 
          title: "Step 2. 첫 번째 화살표", 
          hint: "💧 이제 그릇 안에 무언가를 부어야겠죠? 방금 그린 [냄비] 상자에서 [물] 상자 방향으로 첫 번째 화살표를 쭉 연결해 보세요!" 
        },
        { 
          title: "Step 3. 두 번째 화살표", 
          hint: "🔥 물을 채웠으니 이제 불을 켤 시간! [물] 상자에서 뜨거운 에너지를 뿜어내는 [가스불] 상자로 두 번째 화살표를 이어주세요." 
        },
        { 
          title: "Step 4. 마지막 화살표", 
          hint: "🍜 이제 가스불도 켰으니 다 넣읍시다! [가스불] 상자에서 [면발], [스프], [건더기] 상자로 화살표를 동시에 연결하고, 마지막 [완성] 상자까지 한 줄로 쭉 이어주면 끝!" 
        }
      ],

      showRamyunTrap: [false, false, false],
      ramyunTraps: [
        { 
          title: "사건 1. 물바다 사건 (양 정하기)", 
          desc: "로봇에게 그냥 '물'이라고만 했더니 냄비가 넘치게 물을 부어버렸어요! 설계도에 정확한 양(550ml)을 명확하게 적어줘야 합니다." 
        },
        { 
          title: "사건 2. 생라면 죽 사건 (끓는점 확인)", 
          desc: "물도 안 끓었는데 면을 넣어버려 밀가루 죽이 됐어요! 중간에 '물이 100도씨로 끓는가?'라는 질문 상자를 넣어 기다리게 해야 합니다." 
        },
        { 
          title: "사건 3. 지옥의 숯불 사건 (타이머 추가)", 
          desc: "면을 다 넣고도 멈추라는 말이 없어서 밤새 끓이다가 다 타버렸어요! 반드시 '4분 뒤에 가스불 끄기'라는 종료 명령이 필요합니다." 
        }
      ],

      // 1교시 라면 루프 상태 데이터
      ramyunMinutes: 0,
      ramyunLoopStatus: '조리 전',
      ramyunLoopEmoji: '🥣',
      ramyunLoopLog: '',

      // 1일차 2교시 무인편의점 해피패스 플래그
      showHappyPath: false,

      // 2교시 무인 마법 상점 데이터
      selectedGuestKey: '',
      storeLogs: [],
      storeGuests: {
        happy:   { name: "착한 네빌", emoji: "👦", condition: "돈 정상 / 2개 구매", items: 2, cash: 10, scanFail: 0 },
        window:  { name: "구경꾼 말포이", emoji: "👱", condition: "물건 안 삼 (0개)", items: 0, cash: 5, scanFail: 0 },
        broke:   { name: "가난한 론", emoji: "👨‍🦰", condition: "돈 부족 (-2원)", items: 3, cash: 1, scanFail: 0 },
        damaged: { name: "낙서 대장 해리", emoji: "⚡", condition: "바코드 훼손", items: 1, cash: 10, scanFail: 4 }
      },

      // 2일차 1교시 급식실 병목현상 체크 토글
      showCafeteriaTrap: [false, false, false, false],
      cafeteriaTraps: [
        { 
          persona: "♿ 1. 휠체어를 탄 론의 슬픈 외침 (계단 트랩)", 
          desc: "급식실 들어가는 길목과 배식대 앞을 보세요! 높은 '계단'이 가로막고 있어서 휠체어를 탄 친구나 다리를 다쳐 깁스한 친구는 이 통곡의 벽 때문에 아예 밥을 먹으러 들어갈 수가 없습니다." 
        },
        { 
          persona: "🚪 2. 똑똑한 헤르미온느의 경고 (입출구 동일)", 
          desc: "오른쪽 아래를 보면 들어오는 입구와 나가는 출구가 같은 문으로 뭉쳐 있어요! 70명이 한꺼번에 몰리면 밥 먹으러 들어오는 줄과 다 먹고 나가는 줄이 정면으로 엉켜 문이 꽉 막혀버립니다." 
        },
        { 
          persona: "👦 3. 덩치가 큰 큰돌이의 찡그림 (좁은 통로)", 
          desc: "테이블과 의자 간격이 너무 빽빽해서 밥 먹는 내내 뒤 사람과 등이 계속 부딪해요! 뜨거운 국물이 담긴 식판을 들고 지나가다가 누군가 의자를 갑자기 뒤로 빼면 대형 사고가 날 수 있습니다." 
        },
        { 
          persona: "🔄 4. 식판을 반납하려는 해리의 멘붕 (교차 충돌)", 
          desc: "다 먹은 식판을 버리는 곳이 하필 '배식대 바로 뒤'에 있어요! 밥을 다 먹고 나오려면 이제 막 줄을 서기 시작한 친구들의 인간 성벽을 역주행으로 비집고 뚫고 가야 해서 대혼란이 일어납니다." 
        }
      ],

      // 2일차 3교시: 도서관 사용자 페르소나 데이터셋
      personas: [
        { name: "거인 해그리드", type: "초거대 사용자", feature: "키가 3미터가 넘고 손바닥이 거대함.", problem: "책장이 너무 촘촘하거나 의자가 작으면 가구를 파괴하고 통로를 마비시킴.", bg: "#3a221d" },
        { name: "휠체어 탄 마법사 교수", type: "지체 제약 사용자", feature: "하반신 마법 오작동으로 마법 바퀴 의자로 이동함.", problem: "도서관 중앙의 웅장한 100계단을 만나면 한 걸음도 전진할 수 없는 시스템 블로킹 발생.", bg: "#1d293a" },
        { name: "짐이 너무 무거운 신입생", type: "정보 과부하 사용자", feature: "양손에 두꺼운 마법책 20권을 들고 시야가 가려짐.", problem: "도서관 반납 창구가 어디에 있는지 직관적으로 보이지 않으면 길을 잃고 눈물을 흘림.", bg: "#1d3a22" }
      ],

      showLibraryTrap: [false, false, false],
      libraryTraps: [
        { zone: "존 A: 대강당 지하 비밀 서고 계단", desc: "오직 가파른 나선형 계단으로만 진입 가능함. 휠체어를 탄 마법사 교수의 접근성(Accessibility) 수치가 0이 되어 완벽한 서비스 거부 오류가 일어나는 심각한 아키텍처 결함 구역." },
        { zone: "존 B: 촘촘한 벌집 모양 1인용 열람실", desc: "책상 간격이 50cm로 극단적으로 밀착됨. 거인 해그리드가 입장하자마자 엉덩이로 옆 책상 4개를 도미노처럼 무너뜨려 도서관 전체 공간의 가동이 물리적으로 중단되는 트래픽 붕괴 지점." },
        { zone: "존 C: 본관 4층 구석의 단 한 장뿐인 반납 대장", desc: "모든 학생이 책을 반납하려면 무조건 4층 구석 책상으로 한 줄로 걸어와 깃펜으로 이름을 적어야 함. 시험 기간에 500명의 신입생이 병목 현상(Bottleneck)을 일으켜 복도 전체가 마비되는 최악의 정보 흐름 아키텍처." }
      ],

      // 2일차 부하 분산/캐시
      simDay2Mode: 'single', 
      simDay2Processed: 0,
      simDay2Waiting: 70,
      simDay2Tps: 1,
      simDay2Logs: ['대기 상태 - 환경 준비 완료'],


      // 3일차 퀴즈 전역 상태 관리
      q1Result: '🎯 버튼을 눌러 정답을 확인하세요!',
      q2Result: '🎯 버튼을 눌러 정답을 확인하세요!',
      q3Result: '🎯 버튼을 눌러 정답을 확인하세요!', 
      q4Result: '🎯 버튼을 눌러 정답을 확인하세요!', 

      // 3일차 제어구조 디버깅
      simDay3Courage: 'y',
      simDay3Library: 'n',
      simDay3Loyalty: 'n',
      simDay3SyntaxOk: true,
      simDay3Logs: ['보안 관제 디버깅 엔진 대기 중'],
      simDay3ResultHouse: '',


      // 4일차 7교시: 3대 외계어 해독 주스 데이터셋
      decodePotions: [
        { char: "1. print() [루모스 주문]", color: "#ffdb58", meaning: "컴퓨터 모니터 화면에 내가 원하는 아름다운 한국어 문장이나 숫자를 '빛으로 당장 띄워라!'라고 명령하는 출력 마법.", example: "print('슬리데린!')" },
        { char: "2. input() [귀청 Charms]", color: "#58ffdb", meaning: "컴퓨터가 자기 할 말만 하는 게 아니라, 사람이 키보드로 입력하는 소중한 대답을 '귀 기울여 듣고 뇌 속에 저장해라!'라고 시키는 입력 수집 마법.", example: "ans = input('너의 이름은?')" },
        { char: "3. if / else [갈림길 선택 마법]", color: "#ff58db", meaning: "우리가 3일차에 그렸던 생각의 나무 화살표와 100% 똑같음. 조건이 '네'이면 이 길로 가고, '아니오'이면 저 길로 원천 격리하는 무적의 갈림길 마법.", example: "if score > 80:" }
      ],

      showCodeScan: [false, false, false],
      codeScans: [
        { title: "숨은 그림 1: 내 설계도의 [용기] 질문 화살표 추적", desc: "코드 3번째 줄의 `if q1 == 'y':` 부분이 바로 우리가 3일차에 Flowchart.fun 왼쪽 창에 적었던 '용기가 있나요? ➔ 네' 화살표가 컴퓨터 영어 주문으로 정밀하게 번역되어 소환된 현장입니다." },
        { title: "숨은 그림 2: [래번클로] 독서 분기점의 보물찾기", desc: "코드 7번째 줄의 `if q2 == 'y':` 문장은 첫 번째 질문에서 '용기가 없다(else)'고 대답해서 미끄러져 내려온 학생들을 대상으로 '독서 책 읽기를 좋아하는가'라는 두 번째 필터링 장치를 가동하는 핵심 아키텍처입니다." },
        { title: "숨은 그림 3: 마지막 슬리데린 자동 수렴 구조의 비밀", desc: "코드 맨 마지막 줄의 `else:` 밑에 있는 슬리데린 배정문은 질문을 더 던지지 않습니다. 왜냐하면 용기도 없고, 독서도 싫고, 의리도 없다고 대답한 학생들은 논리적 필터링 거름망의 중력 법칙에 의해 자동으로 슬리데린이라는 그릇으로 수렴되어 안착하기 때문입니다." }
      ],
      //4일차 파이썬 문법 퀴즈
      
      quizAns: {
        q1: '',
        q2: '',
        q3: '',
        q4: ''
      },

      // 4일차 런타임 우회 예외 처리
      simDay4BroomOk: 'y',
      simDay4Vision: 'y',
      simDay4FallbackActive: true,
      simDay4Logs: [{ text: '커널 로드 완료 - 트랙 진입 준비', color: '#ccc2b1' }],
      simDay4Status: 'READY',

    };
  },
  methods: {
    // 순간이동 포탈 함수
    goSlide(number) {
      if (this.deck) {
        this.deck.slide(number);
      } else {
        console.error("호그와트 텔레포트 마법 실패: Reveal 인스턴스가 존재하지 않습니다.");
      }
    },
    // 레이아웃 깨짐 방지 내장형 토글 리프레시 엔진
    toggleComponentHint(index) {
      this.showComponentHint[index] = !this.showComponentHint[index];
      this.refreshRevealLayout();
    },
    toggleRamyunTrap(index) {
      this.showRamyunTrap[index] = !this.showRamyunTrap[index];
      this.refreshRevealLayout();
    },
    toggleExample() {
      this.showExample = !this.showExample;
      this.refreshRevealLayout();
    },
    toggleFlowHint(index) {
      this.showFlowHint[index] = !this.showFlowHint[index];
      this.refreshRevealLayout();
    },
    toggleFlowExample() {
      this.showFlowExample = !this.showFlowExample;
      this.refreshRevealLayout();
    },
    // 1일차 1교시 라면 루프 런타임 시뮬레이터 엔진
    stepRamyunLoop() {
      this.ramyunMinutes++;
      if (this.ramyunMinutes < 4) {
        this.ramyunLoopStatus = '보글보글 끓는 중...';
        this.ramyunLoopEmoji = '♨️';
        this.ramyunLoopLog = `[조건 실패] 아직 4분이 안 됨! 컴퓨터는 루프 안쪽 코드를 다시 실행하여 계속 끓입니다. (현재 ${this.ramyunMinutes}분)`;
      } else if (this.ramyunMinutes === 4) {
        this.ramyunLoopStatus = '완벽 완성!';
        this.ramyunLoopEmoji = '🍜';
        this.ramyunLoopLog = '🎉 [조건 성공!] 딱 4분에 도달했습니다! 무한 루프를 탈출하여 가스불을 끄고 요리를 안전하게 마칩니다!';
      } else {
        this.ramyunLoopStatus = '지옥의 숯불!';
        this.ramyunLoopEmoji = '🔥';
        this.ramyunLoopLog = '🚨 [시스템 폭발] 종료 조건을 확인하지 못하고 지나쳐서 냄비가 불타버렸습니다! 무한 정체의 위험성!';
      }
      this.refreshRevealLayout();
    },
    resetRamyunLoop() {
      this.ramyunMinutes = 0;
      this.ramyunLoopStatus = '조리 전';
      this.ramyunLoopEmoji = '🥣';
      this.ramyunLoopLog = '🧹 새로운 냄비 자원을 로드했습니다.';
      this.refreshRevealLayout();
    },
    // 1일차 2교시 매점 해피패스 토글
    toggleHappyPath() {
      this.showHappyPath = !this.showHappyPath;
      this.refreshRevealLayout();
    },
    // 1일차 2교시 무인 매점 방어벽 IF 체인 검증 엔진
    selectGuest(key) {
      this.selectedGuestKey = key;
      this.storeLogs = [];
    },
    runStoreDefensiveIf() {
      const guest = this.storeGuests[this.selectedGuestKey];
      this.storeLogs = [];
      
      this.storeLogs.push({ text: `🔮 [손님 퇴장 시도] ${guest.name}이(가) 출구 센서 앞으로 다가옵니다.`, colorClass: 'text-white' });
      
      if (guest.items === 0) {
        this.storeLogs.push({ text: `  ↳ 🛡️ [만약에] 장바구니에 담은 물건이 0개인가? -> Yes!`, colorClass: 'text-success' });
        this.storeLogs.push({ text: `  📢 [결과] "구매한 물건이 없으므로 계산을 패스하고 출구 문을 자동으로 열어줍니다." 🔓 (탈출 완료)`, colorClass: 'text-gold fw-bold' });
        this.refreshRevealLayout();
        return;
      } else {
        this.storeLogs.push({ text: `  ↳ ⚙️ [만약에] 장바구니 물건 0개인가? -> No! (다음 조건 관문으로 패스)`, colorClass: 'text-secondary' });
      }

      if (guest.scanFail >= 3) {
        this.storeLogs.push({ text: `  ↳ 🛡️ [만약에] 바코드 스캔 실패 횟수가 3번을 넘었는가? -> Yes! (에러 발견)`, colorClass: 'text-danger' });
        this.storeLogs.push({ text: `  🚨 [결과] 시스템 잠금! 모니터에 [도움 요청] 창을 팝업하고 관리인 필치 아저씨를 강제 소환합니다!`, colorClass: 'text-danger fw-bold' });
        this.refreshRevealLayout();
        return;
      }

      const requiredMoney = guest.items * 3;
      if (guest.cash < requiredMoney) {
        this.storeLogs.push({ text: `  ↳ 🛡️ [만약에] 가지고 있는 돈이 물건 값(${requiredMoney}원)보다 부족한가? -> Yes! (에러 발견)`, colorClass: 'text-danger' });
        this.storeLogs.push({ text: `  🛑 [결과] 퇴장 차단! 모니터에 [과자 반환 및 결제 취소] 버튼을 강제로 활성화하여 물건을 내려놓게 조치합니다.`, colorClass: 'text-warning fw-bold' });
      } else {
        this.storeLogs.push({ text: `  ↳ 🛡️ 모든 만약에(IF) 감시 벽 통과! 결제 금액 정상 충족 확인.`, colorClass: 'text-success' });
        this.storeLogs.push({ text: `  🎉 [결과] 결제 완료 처리! "맛있게 드세요!" 사운드 출력 후 문이 스르륵 열립니다. 🔓`, colorClass: 'text-gold fw-bold' });
      }
      this.refreshRevealLayout();
    },
    // 가동 구조 갱신 자동화
    refreshRevealLayout() {
      this.$nextTick(() => { if (this.deck) this.deck.layout(); });
    },
    // 2일차 컴포넌트 제어부
    toggleCafeteriaTrap(idx) {
      this.showCafeteriaTrap[idx] = !this.showCafeteriaTrap[idx];
      this.refreshRevealLayout();
    },
    toggleLibraryTrap(index) {
      this.showLibraryTrap[index] = !this.showLibraryTrap[index];
      this.refreshRevealLayout();
    },
    toggleCodeScan(index) {
      this.showCodeScan[index] = !this.showCodeScan[index];
      this.refreshRevealLayout();
    },
    setDay2Mode(mode) {
      this.simDay2Mode = mode;
      if (mode === 'single') this.simDay2Tps = 1;
      if (mode === 'multi') this.simDay2Tps = 2;
      if (mode === 'cache') this.simDay2Tps = 5;
      this.resetDay2Simulation();
    },
    runDay2Simulation() {
      this.simDay2Logs = ['🚀 메인 트래픽 부하 인입 시작 - 70인 동시 진입'];
      const interval = setInterval(() => {
        if (this.simDay2Waiting <= 0) {
          clearInterval(interval);
          this.simDay2Waiting = 0;
          this.simDay2Logs.push('🎉 [성공] 모든 대기 트래픽의 병목 구간 탈출 처리가 무결점으로 완료되었습니다.');
          this.refreshRevealLayout();
          return;
        }
        let processCount = this.simDay2Tps;
        this.simDay2Waiting -= processCount;
        this.simDay2Processed += processCount;
        
        if (this.simDay2Mode === 'single') {
          this.simDay2Logs.push(`⚠️ [정체] 수저/정수기 동선 뭉침 병목으로 지연 발생.. 남은 인원: ${this.simDay2Waiting}명`);
        } else if (this.simDay2Mode === 'multi') {
          this.simDay2Logs.push(`⚡ [분산] 로드밸런싱 분신술 작동! 채널 분할 수렴 중.. 남은 인원: ${this.simDay2Waiting}명`);
        } else {
          this.simDay2Logs.push(`✨ [캐싱] 셀프바 사전 적재 버퍼 효과로 초속 프리패스! 남은 인원: ${this.simDay2Waiting}명`);
        }
        if (this.simDay2Waiting < 0) {
          this.simDay2Processed = 70;
          this.simDay2Waiting = 0;
        }
        this.refreshRevealLayout();
      }, 300);
    },
    resetDay2Simulation() {
      this.simDay2Processed = 0;
      this.simDay2Waiting = 70;
      this.simDay2Logs = ['🧹 통계 분석 계기판 자원이 정화되었습니다.'];
      this.refreshRevealLayout();
    },
    //2일차 2교시 급식실 실제 ux 디자인
    // [UX 빌더] 부품을 마우스로 집어 들었을 때 ID 기억
  dragUx(event) {
    event.dataTransfer.setData("text", event.target.id);
  },
  
  // [UX 빌더] 목적지에 마우스를 놓았을 때 부품 이동
  dropUx(event) {
    const data = event.dataTransfer.getData("text");
    const draggedElement = document.getElementById(data);
    
    // 드롭 가능한 타겟을 부품상자와 폰화면으로 제한
    const target = event.target.closest('#ux-toolbox, #ux-screen');
    
    if (target && draggedElement) {
      target.appendChild(draggedElement);
      
      // 폰 화면 안에 부품이 처음 들어오면 안내 텍스트 숨기기
      const placeholder = document.getElementById('placeholder-text');
      if (target.id === 'ux-screen' && placeholder) {
        placeholder.style.display = 'none';
      }
    }
  },
  // [UX 빌더] 도화지 초기화 (부품 원위치 및 안내문구 복구)
  resetUxBuilder() {
    const toolbox = document.getElementById('ux-toolbox');
    const items = ['ux-1', 'ux-2', 'ux-3', 'ux-4', 'ux-5'];
    
    // 1. 폰에 있는 부품들을 다시 원래 상자로 모두 이동
    items.forEach(id => {
      const el = document.getElementById(id);
      if (el && toolbox) {
        toolbox.appendChild(el);
      }
    });
    
    // 2. 스마트폰 화면의 안내 텍스트 다시 표시
    const placeholder = document.getElementById('placeholder-text');
    if (placeholder) {
      placeholder.style.display = 'block';
    }
  },

    // 3일차 아키텍처 자격시험 컴파일 판단
    runArchitectureQuiz(quizNum, isCorrect) {
      if (quizNum === 1) {
        this.q1Result = isCorrect 
          ? '⭕ <span class="text-success">정답!</span> 콜론 뒤에 완벽하게 한 칸을 예쁘게 띄웠군요! 기적의 아키텍트 탄생!' 
          : '❌ <span class="text-danger">오답!</span> 콜론 바로 뒤에 숨구멍(빈칸)을 안 주면 컴퓨터가 숨이 막혀 지도를 못 그려요!';
      } else if (quizNum === 2) {
        this.q2Result = isCorrect 
          ? '⭕ <span class="text-success">정답!</span> 중간에 부품을 고정하는 언더바(_) 나사못을 꽉 박아준 당신은 이미 프로 설계자입니다!' 
          : '❌ <span class="text-danger">오답!</span> 그냥 빈칸으로 띄우면 컴퓨터가 명령어가 아니라 일반 글자인 줄 알고 지나쳐요!';
      } else if (quizNum === 3) {
        this.q3Result = isCorrect
          ? '⭕ <span class="text-success">정답!</span> 맞아요! [Tab] 키야말로 컴퓨터실 아키텍트의 가장 강력한 치트키 무기입니다!'
          : '❌ <span class="text-danger">오답!</span> 스페이스바로 칸을 맞추면 줄이 미세하게 틀어져서 화살표가 엉뚱한 데로 발사됩니다!';
      } else if (quizNum === 4) {
        this.q4Result = isCorrect
          ? '⭕ <span class="text-success">정답!</span> 정확합니다! 모든 생각과 조건의 물줄기는 항상 맨 위(시작점)에서 아래로 흘러갑니다!'
          : '❌ <span class="text-danger">오답!</span> 결과 상자는 종착지입니다. 출발은 무조건 생각의 뿌리인 맨 위 상자에서 시작됩니다!';
      }
    },
    copyMagicText() {
      const text = "알의 보관 상태\n  어떻게 해볼까?: 뜨거운 열기를 공급함\n    성공!: 파이어 드래곤 부화! 🔥 .color_red";
      navigator.clipboard.writeText(text).then(() => {
        this.copySuccess = true;
        setTimeout(() => { this.copySuccess = false; }, 2000);
      }).catch(err => { console.error('복사 실패:', err); });
    },
    copyCustomText(elementId, event) {
      const targetText = document.getElementById(elementId).innerText;
      navigator.clipboard.writeText(targetText).then(() => {
        const currentBtn = event.currentTarget;
        const originalHtml = currentBtn.innerHTML;
        
        currentBtn.innerHTML = '<i class="fa fa-check"></i> 성공!';
        currentBtn.classList.remove('btn-outline-warning');
        currentBtn.classList.add('btn-success', 'text-white');
        
        setTimeout(() => {
          currentBtn.innerHTML = originalHtml;
          currentBtn.classList.remove('btn-success', 'text-white');
          currentBtn.classList.add('btn-outline-warning');
        }, 2000);
      }).catch(err => { console.error('해독 코드 복사 실패:', err); });
    },
    runDay3Simulation() {
      this.simDay3Logs = [];
      this.simDay3ResultHouse = '';
      
      if (!this.simDay3SyntaxOk) {
        this.simDay3Logs.push({ text: '❌ [구문 파괴 에러] SyntaxError: 필수 지령 콜론(:) 식별 실패!', color: '#ff4444' });
        this.simDay3Logs.push({ text: '🚨 [컴파일 중단] 스페이스바 공백 연타로 인해 탭 제어 트리가 완전히 단선되었습니다.', color: '#ff4444' });
        return;
      }
      this.simDay3Logs.push({ text: '⚙️ [정상 파싱] 구조 설계도가 시스템 스레드에 정상 적재되었습니다.', color: '#55efc4' });
      this.simDay3Logs.push({ text: '➔ [1차 감시선 스캔] 거대한 용기 조건식 연산 중...', color: '#fff' });
      
      if (this.simDay3Courage === 'y') {
        this.simDay3Logs.push({ text: '  ↳ [참 결과 수렴] 용기 검증 게이트 통과 완료.', color: '#ffaa00' });
        this.simDay3ResultHouse = '그리핀도르 🦁';
      } else {
        this.simDay3Logs.push({ text: '  ↳ [거짓 분기 낙하] else 우회선 진입 ➔ 2차 지혜 조건 분기 연산', color: '#aaa' });
        if (this.simDay3Library === 'y') {
          this.simDay3Logs.push({ text: '    ↳ [참 결과 수렴] 지혜 검증 게이트 통과 완료.', color: '#00c0ff' });
          this.simDay3ResultHouse = '래번클로 🦅';
        } else {
          this.simDay3Logs.push({ text: '    ↳ [거짓 분기 낙하] else 우회선 진입 ➔ 3차 의리 조건 분기 연산', color: '#aaa' });
          if (this.simDay3Loyalty === 'y') {
            this.simDay3Logs.push({ text: '      ↳ [참 결과 수렴] 의리 검증 게이트 통과 완료.', color: '#ffeaa7' });
            this.simDay3ResultHouse = '후플푸프 🦡';
          } else {
            this.simDay3Logs.push({ text: '      ↳ [최종 필터 포획] 모든 기성 게이트 우회 손님 자동 안착.', color: '#00ff66' });
            this.simDay3ResultHouse = '슬리데린 🐍';
          }
        }
      }
      this.refreshRevealLayout();
    },
    runDay4Simulation() {
      this.simDay4Logs = [{ text: '🎯 퀴디치 대표 선발 시스템 자원 스레드 활성화', color: '#fff' }];
      this.simDay4Status = 'RUNNING';
      
      setTimeout(() => {
        if (this.simDay4BroomOk === 'y') {
          this.simDay4Logs.push({ text: '✅ [면허 통과] 비행 가동성 물리 테스트 무결점 패스.', color: '#55efc4' });
          if (this.simDay4Vision === 'y') {
            this.simDay4Logs.push({ text: '✨ [포지션 검증] 시력 최상 판정! 초소형 스니치 궤적 추적 제어권 획득.', color: '#ffaa00' });
            this.simDay4Logs.push({ text: '🏆 [최종 성공] 국가대표 명단 할당 완료 ➔ 수색꾼(Seeker)', color: '#ff79c6' });
            this.simDay4Status = 'SUCCESS';
          } else {
            this.simDay4Logs.push({ text: '🛡️ [포지션 검증] 시력 보통 판정! 거대 쿼플 공 골대 방어 회로 매핑.', color: '#00c0ff' });
            this.simDay4Logs.push({ text: '🏆 [최종 성공] 국가대표 명단 할당 완료 ➔ 파수꾼(Keeper)', color: '#00c0ff' });
            this.simDay4Status = 'SUCCESS';
          }
        } else {
          this.simDay4Logs.push({ text: '🚨 [치명적 런타임 에러] RuntimeException: 빗자루 제어 상실 및 추락 발생!', color: '#ff4444' });
          if (this.simDay4FallbackActive) {
            this.simDay4Logs.push({ text: '🩹 [Try-Catch 완충] 예외 복구 로직이 충격을 흡수해 시스템 다운을 막아냅니다.', color: '#a370f7' });
            this.simDay4Logs.push({ text: '🍗 [대안 우회 완료] 사용자 실망 방지용 "바삭 치킨 동아리방" 리다이렉트!', color: '#ffeaa7' });
            this.simDay4Status = 'FALLBACK';
          } else {
            this.simDay4Logs.push({ text: '💥 [코어 크래시] 복구 핸들러 전무. 메인 메모리 붕괴. 강제 코어덤프 리셋.', color: '#ff4444' });
            this.simDay4Logs.push({ text: '❌ [GAME OVER] 피할 수 없는 병동 행.', color: '#ff4444' });
            this.simDay4Status = 'CRASH';
          }
        }
        this.refreshRevealLayout();
      }, 400);
    },

  },
  mounted() {
    this.deck = initializeReveal(this.$refs.revealRef, false);
    this.deck.on('slidechanged', (event) => {
      console.log("현재 순간이동 완료된 방의 고유 좌표 인덱스: " + event.indexh);
    });
  },
  unmounted() {
    if (this.deck) {
      this.deck.destroy();
    }
  },
  computed: {
    ramyunLoopClass() {
      if (this.ramyunMinutes === 0) return 'border-secondary';
      if (this.ramyunMinutes > 0 && this.ramyunMinutes < 4) return 'border-cooking text-warning';
      if (this.ramyunMinutes === 4) return 'border-success-cooking';
      return 'border-burnt';
    },
    ramyunLogClass() {
      if (this.ramyunMinutes === 4) return 'alert-success';
      if (this.ramyunMinutes > 4) return 'alert-danger';
      return 'alert-warning';
    }
  }
};
</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/css/reveal-lecture.css');

/* 신규 인터랙티브 슬라이드용 테마 계열 하드닝 스타일링 */
.border-purple { border-color: #a370f7 !important; }
.bg-purple-gradient { background: linear-gradient(135deg, #a370f7 0%, #722ed1 100%) !important; }

/* 실시간 인터랙션 색상 레이아웃 바인더 */
.border-cooking { border-color: #ffaa00 !important; background-color: rgba(255, 170, 0, 0.05) !important; }
.border-success-cooking { border-color: #28a745 !important; background-color: rgba(40, 167, 69, 0.1) !important; color: #28a745 !important; }
.border-burnt { border-color: #dc3545 !important; background-color: rgba(220, 53, 69, 0.1) !important; color: #dc3545 !important; }
.text-mint { color: #55efc4 !important; }
.transition { transition: all 0.25s ease-in-out; }

/* 호그와트 고풍스러운 스타일링 커스텀 하드닝 */
.text-gold { color: #d4af37 !important; }
.text-silver { color: #ccc2b1 !important; }
.text-stone { color: #e4dfd5 !important; }
.bg-dark-stone { background-color: #242529 !important; }
.bg-dark-wood { background-color: #1e1510 !important; }

/* 4대 기숙사 시그니처 톤 컴포넌트 매칭 */
.row-gryffindor { background-color: #3b1111 !important; color: #d4af37 !important; }
.row-ravenclaw { background-color: #111e3b !important; color: #74b9ff !important; }
.row-hufflepuff { background-color: #2b2711 !important; color: #ffeaa7 !important; }
.row-slytherin { background-color: #113b1e !important; color: #55efc4 !important; }
.bg-gryffindor { background-color: #741b1b !important; }

/* 레이아웃 액센트 및 마더프레임 격식 */
.magic-border { border: 4px double #d4af37; border-radius: 12px; }
.border-bottom-gold { border-bottom: 2px solid #d4af37 !important; }
.bg-gold-gradient { background: linear-gradient(135deg, #d4af37 0%, #aa7c11 100%) !important; }
.card-magic { border-radius: 14px; border: 1px solid #444; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.magic-quote { border-left: 5px solid #d4af37; padding-left: 15px; font-style: italic; color: #f5f2eb; }
.font-magic { font-family: 'Georgia', serif; }
.cursor-pointer { cursor: pointer; }

/* 가독성 렌더링을 유도하는 가속 모션 커스텀 */
.hover-scale { transition: transform 0.2s ease-in-out; }
.hover-scale:hover { transform: scale(1.03); border-color: #d4af37 !important; }
.bounce-hover:hover { animation: bounce 0.4s infinite alternate; }
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-4px); } }
.flash-anim { animation: pulse 2s infinite; }
@keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }
.blink-anim { animation: blink 1s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.fade-in { animation: fadeIn 0.4s ease-in-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }


/* ====================================================================== */
/* 알고리즘 순서도 마름모(조건문) 회전용 CSS */
/* ====================================================================== */
.rhombus {
  transform: rotate(45deg);
  /* 마름모 모서리를 뾰족하게 두려면 아래 줄을 지우고, 살짝 부드럽게 하려면 그대로 두세요 */
  /* border-radius: 6px;  */
  transition: all 0.3s ease;
}

.rhombus:hover {
  transform: rotate(45deg) scale(1.05); /* 마우스 올렸을 때 살짝 커지는 애니메이션 (선택) */
}




/* ====================================================================== */
/* 3일차 2교시 기숙사 선택 파스텔톤 네온 플래시 버튼 전용 스펙  */
/* ====================================================================== */
.neon-btn-container {
  margin-bottom: 45px !important;
}

.neon-magic-btn {
  background: #fef08a !important; /* 부드러운 파스텔 레몬 옐로우 */
  color: #713f12 !important;      /* 가독성을 확보하는 딥 브라운 글자 */
  border: 3px solid #fde047 !important;
  font-size: 1.05rem;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 15px #fef08a, 0 0 30px #fde047, inset 0 0 10px #fef08a !important;
  animation: pastelNeonGlow 1.8s infinite alternate ease-in-out;
}

.neon-magic-btn:hover {
  transform: scale(1.04) !important;
  box-shadow: 0 0 25px #fde047, 0 0 50px #facc15, inset 0 0 15px #fef08a !important;
}

@keyframes pastelNeonGlow {
  0% {
    opacity: 0.85;
    filter: brightness(0.95);
    box-shadow: 0 0 10px #fef08a, 0 0 20px #fde047, inset 0 0 8px #fef08a !important;
  }
  100% {
    opacity: 1;
    filter: brightness(1.1);
    box-shadow: 0 0 22px #fef08a, 0 0 45px #facc15, inset 0 0 14px #fef08a !important;
  }
}
</style>