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

      <!-- 슬라이드 1: 메인 타이틀 및 8교시 대행선 매트릭스 -->
      <section data-background-color="#050c0e">
        <div class="magic-border p-4 position-relative bg-deep-jungle text-cyan shadow-lg">
          <h2 class="text-cyan fw-bold tracking-wide fade-in-up mb-3">🌿 판도라 시스템 아키텍트</h2>
          <h4 class="text-emerald text-uppercase subtitle mb-4">에이와의 신경망과 AI 게임 빌더</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-emerald text-left opacity-75" style="font-size: 0.8rem;">🏹 초등학교 5~6학년 대상 (4일 특강 / 총 8교시 마스터 과정)</caption>
            <thead>
              <tr class="text-cyan bg-cyan-gradient border-bottom-cyan">
                <th width="15%">주차/일자</th>
                <th width="10%">교시</th>
                <th width="50%">핵심 아키텍처 설계 주제 (학습 내용)</th>
                <th width="15%">사용 도구</th>
                <th width="10%">포탈</th>
              </tr>
            </thead>
            <tbody>
              <!-- 1일차 -->
              <tr class="row-omaticaya">
                <td rowspan="2" class="fw-bold align-middle">1일차<br><span class="text-cyan">(시스템 구조)</span></td>
                <td>1교시</td>
                <td class="text-left fw-bold pl-3">해체 분석기: 맛있는 라면 레시피 아키텍처</td>
                <td>Excalidraw</td>
                <td><i class="fa fa-leaf text-cyan fs-5 cursor-pointer bounce-hover" @click="goSlide(1)"></i></td>
              </tr>
              <tr class="row-omaticaya border-bottom-cyan">
                <td>2교시</td>
                <td class="text-left fw-bold pl-3">빈틈없는 규칙: RDA 자원 채굴 기지 무인 보급망 방어 설계</td>
                <td>Excalidraw</td>
                <td><i class="fa fa-leaf text-cyan fs-5 cursor-pointer bounce-hover" @click="goSlide(3)"></i></td>
              </tr>
              <!-- 2일차 -->
              <tr class="row-metkayina">
                <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-leaf text-blue fs-5 cursor-pointer bounce-hover" @click="goSlide(5)"></i></td>
              </tr>
              <tr class="row-metkayina border-bottom-cyan">
                <td>4교시</td>
                <td class="text-left fw-bold pl-3">동선 최적화: 영혼의 나무(Tree of Souls) 샤헤일루 광역 동선 최적화 설계</td>
                <td>Excalidraw</td>
                <td><i class="fa fa-leaf text-blue fs-5 cursor-pointer bounce-hover" @click="goSlide(7)"></i></td>
              </tr>
              <!-- 3일차 -->
              <tr class="row-ikran">
                <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">조건 로직: 신비한 생물과의 교감(Shaheylu) 분기점 규칙 설계</td>
                <td>Flowchart.fun</td>
                <td><i class="fa fa-leaf text-yellow fs-5 cursor-pointer bounce-hover" @click="goSlide(9)"></i></td>
              </tr>
              <tr class="row-ikran border-bottom-cyan">
                <td>6교시</td>
                <td class="text-left fw-bold pl-3">생각의 나무: 에이와(Eywa)의 운명적 부족 배정 트리 & 스펠 링크 백업</td>
                <td>Flowchart.fun</td>
                <td><i class="fa fa-leaf text-yellow fs-5 cursor-pointer bounce-hover" @click="goSlide(11)"></i></td>
              </tr>
              <!-- 4일차 -->
              <tr class="row-rda">
                <td rowspan="2" class="fw-bold align-middle">4일차<br><span class="text-purple">(구현과 확장)</span></td>
                <td>7교시</td>
                <td class="text-left fw-bold pl-3">주문 소환: 3대 해독제와 AI 엔진을 활용한 부족 배정 코드 컴파일</td>
                <td>AI / Replit</td>
                <td><i class="fa fa-leaf text-purple fs-5 cursor-pointer bounce-hover" @click="goSlide(13)"></i></td>
              </tr>
              <tr class="row-rda">
                <td>8교시</td>
                <td class="text-left fw-bold pl-3">아키텍트 확장: 토루크 막토(Toruk Makto) 최종 선발 및 이크란 비행 추락 예외 처리</td>
                <td>Replit / AI</td>
                <td><i class="fa fa-leaf text-purple fs-5 cursor-pointer bounce-hover" @click="goSlide(15)"></i></td>
              </tr>
            </tbody>
          </table>
          <p class="text-cyan flash-anim small mt-2 fw-bold">👉 우측의 마법 나뭇잎 아이콘을 클릭하면 해당 학습 차시로 즉시 순간이동합니다!</p>
        </div>
      </section>

      <!-- 슬라이드 2: 1일차 1교시 - 라면 레시피 아키텍처 (라면 유지) -->
      <section data-background-color="#151518">
        <div class="d-flex justify-content-between align-items-center border-bottom border-cyan pb-2 mb-3">
          <h3 class="text-cyan font-magic mb-0">🍲 1일차 1교시: 해체 분석기, 라면 레시피 아키텍처</h3>
          <span class="badge bg-omaticaya text-cyan py-2 px-3 border border-cyan">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-deep-jungle text-cyan h-100 p-3 shadow text-left border border-cyan">
              <h5 class="text-cyan fw-bold border-bottom border-cyan pb-2">📐 시스템 설계자(Architect)의 관점</h5>
              <ul class="list-unstyled p-0 m-0 mt-2 small" style="line-height: 1.7;">
                <li><i class="fa fa-cube text-warning me-2"></i><b>부품 분해:</b> [물 550ml], [냄비], [가스불], [면], [분말스프], [건더기]</li>
                <li><i class="fa fa-random text-warning me-2"></i><b>인과관계 연결:</b> 냄비 ➔ 물 투입 ➔ 가스불 ON ➔ 100°C 도달 ➔ 스프/면 동시 투입 ➔ 4분 타이머</li>
              </ul>
              <div class="alert bg-cyan-gradient text-dark border-0 mt-2 p-2 text-center font-weight-bold small">
                🔥 미션: Excalidraw에 접속하여 라면 제조 공정 설계도를 사각형 and 화살표로 빈틈없이 그려보세요!
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 슬라이드 3: 1일차 1교시 - 라면 변수 시뮬레이터 (오류 추론 인터랙션) -->
      <section data-background-color="#121214">
        <h4 class="text-cyan mb-3 font-magic text-left">🧪 마법의 변수 실험: 만약 이 연결고리가 끊어진다면?</h4>
        <p class="text-silver small text-left mb-4">아키텍처 설계도가 완성되면, 실제로 시스템을 가동하기 전에 머릿속으로 오류를 미리 감지하는 <b>'시뮬레이션 역량'</b>이 발동합니다. 아래 변수를 클릭해 사고를 예방해 보세요.</p>

        <div class="row g-3 text-left">
          <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 fw-bold d-flex justify-content-between align-items-center py-2" style="font-size: 0.85rem;">
                <span>{{ item.title }}</span>
                <span class="text-cyan font-magic">🔎</span>
              </div>
              <div class="card-body bg-light text-dark p-3" style="font-size: 0.8rem; min-height: 110px;">
                <div v-if="!showRamyunTrap[idx]" class="text-muted text-center pt-3 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">{{ item.desc }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="alert alert-info border-0 mt-4 py-2 text-center shadow-sm font-weight-bold" style="font-size: 0.85rem;">
          💡 <b>깨달음:</b> 코딩을 전혀 몰라도, 화살표의 순서나 조건 하나가 바뀌면 전체 시스템의 결과물이 엉망이 된다는 것을 이해할 수 있습니다!
        </div>
      </section>

      <!-- 슬라이드 4: 1일차 2교시 - RDA 자원 채굴 기지 무인 보급망 방어 설계 -->
      <section data-background-color="#0a1118">
        <div class="d-flex justify-content-between align-items-center border-bottom border-cyan pb-2 mb-3">
          <h3 class="text-cyan font-magic mb-0">🤖 1일차 2교시: 빈틈없는 규칙, RDA 자원 채굴 기지 무인 보급망 방어 설계</h3>
          <span class="badge bg-omaticaya text-cyan py-2 px-3 border border-cyan">Excalidraw</span>
        </div>
        <p class="text-light text-left">이제 판도라 행성의 자원을 노리는 인간들의 핵심 물류 인프라를 지탱하는 상상의 주춧돌을 세워봅시다. 인간 관리자 없이 인공지능 로봇으로 스스로 돌아가는 <b>'RDA 기지 무인 보급망'</b>의 아키텍처를 빈틈없이 설계해야 합니다.</p>

        <div class="card card-magic bg-dark-stone border-dark text-white text-left p-3 shadow mx-auto" style="max-width: 900px;">
          <h5 class="text-cyan fw-bold mb-2"><i class="fa fa-shield-halved me-2"></i> 1단계 기본 정상 흐름 (Happy Path) 설계</h5>
          <div class="d-flex justify-content-around align-items-center bg-dark p-3 rounded-3 text-center fw-bold text-silver border border-secondary mb-3" style="font-size: 0.8rem;">
            <div class="p-2 border border-secondary rounded bg-dark-stone">1. 헬기/AMP 슈트 진입</div>
            <i class="fa fa-arrow-right text-cyan"></i>
            <div class="p-2 border border-secondary rounded bg-dark-stone">2. 보급 물품 선택</div>
            <i class="fa fa-arrow-right text-cyan"></i>
            <div class="p-2 border border-secondary rounded bg-dark-stone">3. 마법 ID 스캔</div>
            <i class="fa fa-arrow-right text-cyan"></i>
            <div class="p-2 border border-secondary rounded bg-dark-stone">4. 에너지 소모 승인</div>
            <i class="fa fa-arrow-right text-cyan"></i>
            <div class="p-2 border border-secondary rounded bg-dark-stone">5. 해치 오픈 및 출격</div>
          </div>
          
          <h5 class="text-danger fw-bold mb-2"><i class="fa fa-skull-crossbones me-2"></i> 아키텍트의 의무: 예외 상황(Edge Case) 방어벽 구축</h5>
          <p class="small text-silver mb-2 opacity-75">평화로운 기본 흐름은 누구나 만듭니다. 진짜 실력자는 외부 침입자나 돌발 오류를 막아내는 <b>'예외 분기 상자(If)'</b>를 꼼꼼하게 배치하는 사람입니다.</p>
          <ul class="mb-0 px-4 small text-warning font-weight-bold" style="line-height: 1.6;">
            <li>"기지 승인 ID가 없는 나비족(Na'vi) 원주민이 침입하여 보급창 접근을 시도하면 시스템은 어떻게 차단해야 하는가?"</li>
            <li>"보급 물품의 재고가 완전히 바닥났음에도 강제로 로봇이 출고 명령을 내리려 하면 어떤 예외 처리 로직이 발동해야 하는가?"</li>
          </ul>
        </div>
      </section>

      <!-- 슬라이드 5: 1일차 2교시 - 예외 공격 및 상호 크리틱 디펜스 -->
      <section data-background-color="#0b151e">
        <h4 class="text-cyan mb-3 font-magic text-left">⚔️ 2교시 실전 실습: 설계도 무력화 공격과 디펜스 워크숍</h4>
        <p class="text-silver small text-left mb-4">주도적이지 않은 학생들의 눈빛이 가장 번뜩이는 순간입니다. 정답 맞추기가 아니라, 옆 친구가 Excalidraw로 설계한 RDA 기지 성벽에 논리적인 구멍을 내서 <b>'털어버리는 탈탈 공격 미션'</b>입니다.</p>

        <div class="row text-left g-3">
          <div class="col-md-6">
            <div class="card h-100 border-danger bg-dark-stone text-white p-3 shadow-sm">
              <h5 class="text-danger fw-bold mb-2">💥 빌런 나비족 전사의 논리 공격 포커스</h5>
              <ul class="mb-0 px-3 small" style="line-height: 1.8; color: #ff9999;">
                <li>"나 무인 보급창 인식 장치 안 거치고 그냥 해치 문 부수고 들어갈 건데? 네 설계도에는 강제 침입 감지 센서나 비상 경보음 상자(`print("비상!!")`)가 없네? 보급품 탈취 성공!"</li>
                <li>"남은 재고 수량이 0개인데 마이너스 강제 출고 코드를 날리면 시스템이 멍청하게 승인할 걸? 수량 검사하는 조건문 있어?"</li>
              </ul>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card h-100 border-success bg-deep-jungle text-cyan p-3 shadow-sm">
              <h5 class="text-success fw-bold mb-2">🛡️ 가드 아키텍트 학생의 완벽 방어 수술</h5>
              <p class="small text-silver mb-2">공격을 당한 학생은 기분 나빠할 필요 없이, 즉시 자신의 설계도 중앙에 <b>분기 화살표와 방어용 예외 규칙 박스</b>를 업데이트합니다.</p>
              <div class="p-2 bg-dark rounded border border-success text-center fw-bold text-success small">
                [스캔된 ID가 인간 직원인가?] ➔ 아니오 ➔ 보급창 게이트 영구 폐쇄 및 AMP 슈트 자동 경보 로직 추가!
              </div>
            </div>
          </div>
        </div>
        <div class="alert bg-cyan-gradient text-dark border-0 mt-4 p-2 text-center small font-weight-bold shadow-sm">
          💡 이 상호 작용을 통해 아이들은 "아! 완벽한 소프트웨어 설계란 예외적인 변수들을 모두 통제할 수 있는 논리의 그물망이구나!"를 전율과 함께 체득합니다.
        </div>
      </section>

      <!-- 슬라이드 6: 2일차 3교시 - 판도라 연결 허브와 사용 제약 조건 -->
      <section data-background-color="#05121a">
        <div class="d-flex justify-content-between align-items-center border-bottom border-cyan pb-2 mb-3">
          <h3 class="text-cyan font-magic mb-0">🌿 2일차 3교시: 공간 인지, 판도라 연결 허브와 사용 제약 조건</h3>
          <span class="badge bg-metkayina text-cyan py-2 px-3 border border-cyan">Excalidraw</span>
        </div>
        <p class="text-light text-left">아키텍처 설계의 또 다른 위대한 기둥은 시스템을 사용하는 존재를 깊이 연구하는 <b>'사용자 중심 사고(UX, User Experience)'</b>입니다. 오늘 우리는 판도라 행성 교감 도서관의 공간 구조 설계자가 되어 극단적인 세 명의 사용자를 만납니다.</p>

        <div class="row g-3 text-left mt-3">
          <div v-for="(p, i) in avatars" :key="i" class="col-md-4">
            <div class="card h-100 border-0 card-magic shadow-sm text-white" :style="{ backgroundColor: p.bg }">
              <div class="card-body p-3 d-flex flex-column justify-content-between">
                <div>
                  <div class="d-flex justify-content-between align-items-center border-bottom pb-2 mb-2">
                    <h6 class="fw-bold mb-0 text-white">{{ p.name }}</h6>
                    <span class="badge bg-white text-dark small" style="font-size: 0.65rem;">{{ p.type }}</span>
                  </div>
                  <p class="card-text small mb-2 text-white opacity-90" style="line-height: 1.5;"><b>특징:</b> {{ p.feature }}</p>
                </div>
                <div class="p-2 bg-dark-stone rounded text-warning fw-bold small mt-2" style="font-size: 0.72rem; line-height: 1.4;">
                  ⚠️ {{ p.problem }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 슬라이드 7: 2일차 3교시 - 판도라 허브 트랩과 구조적 제약조건 추론 -->
      <section data-background-color="#051016">
        <h4 class="text-cyan mb-3 font-magic text-left">🛑 판도라 생태광장 아키텍처의 트랩: 왜 누군가는 멈춰 서는가?</h4>
        <p class="text-silver small text-left mb-4">현재 연결 허브 설계안의 특정 지점이 왜 이 세 명의 사용자에게 통곡의 벽이 되는지 아키텍트의 눈으로 추론해 보세요. 항목을 클릭하면 구조적 제약조건 분석이 해제됩니다.</p>

        <div class="row g-3 text-left">
          <div v-for="(item, idx) in libraryTraps" :key="idx" class="col-md-4">
            <div class="card h-100 border-dark bg-dark-stone hover-scale shadow-sm cursor-pointer" @click="toggleLibraryTrap(idx)">
              <div class="card-header bg-navy text-white fw-bold d-flex justify-content-between align-items-center py-2" style="font-size: 0.85rem;">
                <span>{{ item.zone }}</span>
                <span class="text-cyan">🚨</span>
              </div>
              <div class="card-body bg-light text-dark p-3" style="font-size: 0.8rem; min-height: 120px;">
                <div v-if="!showLibraryTrap[idx]" class="text-muted text-center pt-3 fw-bold">클릭하여 제약조건 및 병목현상 해독 🖱️</div>
                <div v-else class="fade-in">
                  <div class="text-primary fw-bold mb-1">📐 아키텍트의 분석 결과:</div>
                  <p class="mb-0 text-dark opacity-90 fw-bold">{{ item.desc }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

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

      <!-- 슬라이드 8: 2일차 4교시 - 영혼의 나무 샤헤일루 광역 동선 최적화 설계 -->
      <section data-background-color="#051410">
        <div class="d-flex justify-content-between align-items-center border-bottom border-cyan pb-2 mb-3">
          <h3 class="text-cyan font-magic mb-0">📐 2일차 4교시: 동선 최적화, 영혼의 나무(Tree of Souls) 샤헤일루 광역 동선 최적화 설계</h3>
          <span class="badge bg-metkayina text-cyan py-2 px-3 border border-cyan">Excalidraw</span>
        </div>
        <p class="text-light text-left">3교시의 가슴 아픈 관찰을 바탕으로, 4교시에는 Excalidraw 화이트보드 위에 <b>'누구도 소외되지 않고 정체 없이 에이와의 신경망 자원을 순환시키는 최적 공간'</b>의 마스터플랜을 직접 그립니다.</p>

        <div class="row g-3 text-left">
          <div class="col-md-7">
            <div class="card card-magic bg-dark-stone text-white p-3 h-100 shadow">
              <h5 class="text-cyan fw-bold border-bottom border-secondary pb-2">🛠️ 마스터플랜 아키텍처 필수 요구 사양</h5>
              <ul class="px-3 small mt-2 text-silver font-weight-bold" style="line-height: 1.8;">
                <li><b class="text-warning">이크란 고속 전용 공중 항로:</b> 하늘로만 비행 생물이 접근하도록 에어 인프라 동선을 그려 거대한 연구 장비나 기지 구조물에 부딪히는 불상사를 원천 차단할 것.</li>
                <li><b class="text-warning">인간 제이크 설리 전용 하이패스 링크 슬로프:</b> 아바타 링크가 끊어져 기지 안에서 휠체어를 타야 할 때도 지형지물 저항 없이 미끄러지듯 이동할 수 있는 유니버설 경사로 배치.</li>
                <li><b class="text-warning">30초 자동 반납 신경 가닥 배치:</b> 부족민들이 에이와의 음성을 듣기 위해 단 하나의 촉수 앞에 줄을 서는 정체 구역을 제거하기 위해, 분산형 광역 교감 포인트 설계.</li>
              </ul>
            </div>
          </div>
          <div class="col-md-5">
            <div class="card card-magic bg-deep-jungle text-cyan p-3 h-100 shadow border border-cyan text-center d-flex flex-column justify-content-center">
              <h5 class="fw-bold mb-3"><i class="fa fa-gauge-high me-2"></i> 아키텍트의 금언</h5>
              <blockquote class="magic-quote text-white opacity-90 small font-weight-bold">
                "가장 짧고, 가장 쾌적하며, 유지보수 비용이 전혀 들어가지 않는 동선 구조를 찾아내는 것이 바로 최적화(Optimization)의 마법이다."
              </blockquote>
              <p class="mb-0 mt-3 small text-cyan blink-anim fw-bold">👉 지금 바로 Excalidraw에 무적의 30초 논리 맵을 설계하세요!</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 슬라이드 9: 3일차 5교시 - 신비한 생물과의 교감(Shaheylu) 분기점 규칙 설계 -->
      <section data-background-color="#141911">
        <div class="d-flex justify-content-between align-items-center border-bottom border-cyan pb-2 mb-3">
          <h3 class="text-cyan font-magic mb-0">🐉 3일차 5교시: 조건 로직, 신비한 생물과의 교감(Shaheylu) 분기점 규칙 설계</h3>
          <span class="badge bg-ikran text-dark py-2 px-3 border border-dark fw-bold">Flowchart.fun</span>
        </div>
        <p class="text-light text-left">3일차부터는 아날로그 마우스를 넘어, 글씨를 쓰면 실시간으로 완벽한 생각의 계층형 나무가 그려지는 혁신적인 <b>디지털 텍스트 아키텍처 툴(Flowchart.fun)</b>을 마스터합니다. 먼저 신비한 생물과 머리카락 촉수를 잇는 교감(샤헤일루) 시스템을 조율해 봅시다.</p>

        <div class="row g-3 text-left">
          <div class="col-md-6">
            <div class="card card-magic bg-dark-stone text-white p-3 h-100 shadow">
              <h5 class="text-warning fw-bold border-bottom border-secondary pb-2"><i class="fa fa-keyboard me-2"></i> 아키텍트가 왼쪽에 칠 타자 (텍스트 입력)</h5>
              <p class="small text-muted mb-2">키보드의 Tab(들여쓰기) 키 하나가 화살표의 위계질서를 창조합니다.</p>
              <pre class="m-0"><code class="text-white font-monospace" style="font-size: 0.8rem; display: block; background: #222; padding: 12px; border-radius: 6px; line-height: 1.5;">
생물과의 신경망 접촉
  강력한 의지를 불어넣음
    지상의 제왕 다이어호스와 동기화 완료! 🐎
  하늘에서 나를 죽이려는 놈의 부리를 붙잡음
    야생의 이크란(비행 생물) 교감 성공! 🦅
  완전한 살기와 공포에 맞섬
    판도라 최강의 포식자 타나토르와 일체화! 🐅
</code></pre>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card card-magic bg-deep-jungle text-cyan p-3 h-100 shadow border border-cyan d-flex flex-column justify-content-between">
              <div>
                <h5 class="text-cyan fw-bold border-bottom border-cyan pb-2"><i class="fa fa-sitemap me-2"></i> 컴퓨터 오른쪽에 그려질 마법 화살표 나무</h5>
                <p class="small text-white opacity-90 mt-2">우리가 어설픈 프로그래밍 언어의 문법 구조를 단 한 줄도 암기하지 않았음에도 불구하고, 오직 나의 순수한 <b>'조건과 분기 논리'</b>만으로 완벽한 판도라 생태계 동기화 지도가 자동 빌드됩니다.</p>
              </div>
              <div class="bg-cyan text-dark font-weight-bold text-center p-3 rounded-3 shadow-sm small">
                🚀 바로 지금 flowchart.fun 사이트를 브라우저에 열고 왼쪽 텍스트 코드를 붙여넣어 교감 시스템을 가동시켜 보세요!
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 슬라이드 10: 3일차 6교시 - 에이와(Eywa)의 운명적 부족 배정 트리 설계 -->
      <section data-background-color="#141119">
        <div class="d-flex justify-content-between align-items-center border-bottom border-cyan pb-2 mb-3">
          <h3 class="text-cyan font-magic mb-0">Hat 3일차 6교시: 생각의 나무, 에이와(Eywa)의 운명적 부족 배정 트리 설계</h3>
          <span class="badge bg-ikran text-dark py-2 px-3 border border-dark fw-bold">Flowchart.fun</span>
        </div>
        <p class="text-light text-left">기초 훈련이 끝났으니 오늘 최고의 메인 대작전인 <b>'에이와(Eywa) 신경망의 부족 배정 알고리즘 두뇌'</b>를 설계할 시간입니다. 신입 아바타가 들어왔을 때 단 3개의 날카로운 질문만으로 판도라의 4개 핵심 부족으로 오류 없이 정확하게 배정하는 거대한 제어 트리 구조를 구축해야 합니다.</p>

        <div class="card card-magic bg-dark-stone text-white p-3 text-left shadow mx-auto mb-3" style="max-width: 900px;">
          <h6 class="text-cyan fw-bold border-bottom border-secondary pb-2 mb-2"><i class="fa fa-network-wired me-2"></i> 에이와의 들여쓰기 뇌 구조 뼈대 프로토콜</h6>
          <pre class="m-0"><code class="text-warning font-monospace" style="font-size: 0.75rem; display: block; background: #1a1a1a; padding: 10px; border-radius: 6px; line-height: 1.4;">
에이와의 첫 번째 질문: 빽빽한 거대 숲과 나무 위에서의 생활을 열망하는가?
  네
    당신은 숲의 수호자! 숲의 전사 [오마티카야] 부족으로 가라! 🌲
  아니오
    두 번째 질문: 끝없는 에메랄드빛 바다와 수중 생물과의 호흡을 갈망하는가?
      네
        당신은 물의 지배자! 바다의 부족 [멧카이나] 부족으로 가라! 🌊
      아니오
        세 번째 질문: 절벽 위 거대한 한 줄기 바람과 이크란 비행을 목숨보다 사랑하는가?
          네 ➔ 당신은 하늘의 지배자! [타이랑이] 공중 부족 배정! 🌪️
          아니오 ➔ 당신은 판도라의 신비로운 지식을 기록하는 역사학자! [아누라이] 부족 배정! 📜
</code></pre>
        </div>
      </section>

      <!-- 슬라이드 11: 3일차 6교시 - 주소창 치트키 백업 메커니즘 (가장 중요) -->
      <section data-background-color="#16111b">
        <h4 class="text-cyan mb-3 font-magic text-left">🛡️ 아키텍트의 시간 초월 치트키: 스펠 링크 백업 프로토콜</h4>
        <p class="text-silver small text-left mb-3">내일 도서관에 오면 오늘 사용한 컴퓨터가 리셋되어 열심히 설계한 에이와의 두뇌가 증발할까요? 절대 아닙니다. 아키텍트는 <b>도구의 특성(URL 인코딩 패턴)</b>을 파악해 자원을 지켜냅니다.</p>

        <div class="row g-3 text-left align-items-center">
          <div class="col-md-7">
            <div class="p-3 rounded-4 bg-dark-stone text-white border border-warning shadow-sm">
              <h6 class="fw-bold text-warning mb-2"><i class="fa fa-link me-2"></i> 로그인도 회원가입도 필요 없는 데이터 세이브 메커니즘</h6>
              <p class="small opacity-90" style="line-height: 1.6;">
                `Flowchart.fun`은 놀랍게도 우리가 왼쪽 창에 한글로 타이핑을 치는 즉시, 그 모든 글자 데이터가 브라우저 맨 위의 **주소창(URL) 주소 자체로 완벽하게 변환되어 실시간 압축**됩니다. 
              </p>
              <div class="p-2 bg-dark rounded border border-secondary font-monospace text-center text-success small mb-2" style="font-size: 0.7rem; word-break: break-all;">
                https://flowchart.fun/#c3lhbXBsZS10ZXh0LWxvZ2ljLXRyZWU...
              </div>
              <p class="mb-0 text-cyan small fw-bold">➔ 퇴실 전 딱 10초 미션: 이 긴 주소를 통째로 복사해서 도서관 공용 패들렛(Padlet) 게시판에 본인 이름으로 저장하고 하차하세요! 내일 클릭하면 1초 만에 그대로 부활합니다.</p>
            </div>
          </div>
          <div class="col-md-5">
            <div class="p-3 rounded-4 bg-deep-jungle text-cyan text-center h-100 d-flex flex-column justify-content-center border border-cyan">
              <h3 class="font-magic text-warning mb-2">⚡ 메타인지 알림</h3>
              <p class="small text-white opacity-90 font-weight-bold mb-0">"내 데이터가 인터넷 세계 어디에 어떻게 어떤 형태로 저장되어 지켜지는지 정확히 인지하는 것, 이것이 진정한 아키텍트의 메타인지 능력입니다."</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 슬라이드 12: 4일차 7교시 - 3대 외계어 해독제와 부족 배정 코드 컴파일 -->
      <section data-background-color="#191118">
        <div class="d-flex justify-content-between align-items-center border-bottom border-cyan pb-2 mb-3">
          <h3 class="text-cyan font-magic mb-0">🐍 4일차 7교시: 주문 소환, 3대 해독제와 AI 엔진을 활용한 부족 배정 코드 컴파일</h3>
          <span class="badge bg-rda text-white py-2 px-3 border border-light">AI / Replit</span>
        </div>
        <p class="text-light text-left">4일차 아침이 밝았습니다. 패들렛 링크를 클릭해 어제의 두뇌 설계도를 1초 만에 부활시킵니다. 이제 이 설계도를 복사해 AI 번역기에게 던져 **'실제 작동하는 파이썬 게임 코드'**로 자동 소환합니다. 그 전에, 모니터에 쏟아질 영어 외계어를 격파할 딱 3가지 마법의 해독 주스를 마십니다.</p>

        <div class="row g-3 text-left">
          <div v-for="(potion, idx) in decodePotions" :key="idx" class="col-md-4">
            <div class="card h-100 border-0 text-white bg-dark-stone shadow-sm">
              <div class="card-body p-3 d-flex flex-column justify-content-between">
                <div>
                  <h6 class="fw-bold mb-2" :style="{ color: potion.color }">
                    <i class="fa fa-flask me-2"></i>{{ potion.char }}
                  </h6>
                  <p class="small opacity-90" style="font-size: 0.78rem; line-height: 1.5;"><b>해독 의미:</b> {{ potion.meaning }}</p>
                </div>
                <div class="mt-2 p-2 bg-dark rounded font-monospace text-center small text-silver" style="font-size: 0.7rem;">
                  {{ potion.example }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 슬라이드 13: 4일차 7교시 - 파이썬 컴파일러 코드 추적 인터랙션 -->
      <section data-background-color="#140e13">
        <h4 class="text-cyan mb-2 font-magic text-left">💻 보물찾기 코드 스캔 미션: 내 생각이 들어있는 주소 추적</h4>
        <p class="text-silver small text-left mb-3">AI가 1초 만에 뱉어낸 파이썬 원본 코드입니다. 문법을 다 알 필요는 없습니다. 방금 마신 3대 해독제 돋보기를 들고 코드를 스캔해 보세요. 항목을 클릭하면 내가 그린 순서도 화살표가 어떻게 영어 주문(`if`)으로 둔갑했는지 보물찾기 비밀이 해제됩니다.</p>

        <div class="row g-2 text-left">
          <div class="col-md-5">
            <pre class="m-0"><code class="python" style="font-size: 0.68rem; display: block; background: #272822; color: #f8f8f2; padding: 12px; border-radius: 6px; line-height: 1.35; height: 360px; overflow-y: auto;">
# 🌿 에이와 부족 배정 소스 코드
print("🌿 에이와 신경망 탐색 중...")
q1 = input("숲에서의 생활을 원하나요? (y/n): ")

if q1 == "y":
    print("🌲 오마티카야 부족으로 최종 배정!!")
else:
    q2 = input("바다와 바다 생물을 좋아하나요? (y/n): ")
    if q2 == "y":
        print("🌊 멧카이나 부족으로 최종 배정!!")
    else:
        q3 = input("이크란 비행을 사랑하나요? (y/n): ")
        if q3 == "y":
            print("🌪️ 타이랑이 공중 부족 배정!!")
        else:
            print("📜 아누라이 역사 부족 배정!!")
</code></pre>
          </div>
          <div class="col-md-7">
            <div class="d-flex flex-column gap-2" style="max-height: 360px; overflow-y: auto;">
              <div v-for="(box, i) in codeScans" :key="i" class="p-2 rounded bg-dark-stone border border-secondary cursor-pointer hover-scale" @click="toggleCodeScan(i)">
                <div class="d-flex justify-content-between align-items-center small fw-bold text-silver">
                  <span>{{ box.title }}</span>
                  <span class="text-warning font-magic" style="font-size:0.75rem;">스캔 매칭 ⬇️</span>
                </div>
                <div v-if="showCodeScan[i]" class="mt-2 text-success bg-white p-2 rounded small font-weight-bold" style="font-size: 0.75rem; line-height: 1.4;">
                  👉 {{ box.desc }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 슬라이드 14: 4일차 8교시 - 아키텍트 확장: 퀴디치 대신 퀴디치 포지션과 동일한 퀴디치 선수 선발 대신 토루크 막토 전사 선발 -->
      <section data-background-color="#111519">
        <div class="d-flex justify-content-between align-items-center border-bottom border-cyan pb-2 mb-3">
          <h3 class="text-cyan font-magic mb-0">🧹 4일차 8교시: 아키텍트 확장, 토루크 막토(Toruk Makto) 최종 선발 및 이크란 비행 추락 예외 처리</h3>
          <span class="badge bg-rda text-white py-2 px-3 border border-light">Replit / AI</span>
        </div>
        <p class="text-light text-left">부족만 배정하고 끝나는 시시한 게임은 아키텍트의 자존심이 허락하지 않습니다. 마지막 8교시에는 기존의 부족 배정 코드 바로 밑에, 구름을 가르는 판도라 최고의 공중 전사인 **'토루크 막토 대표 전사 선발 및 이크란 비행 테스트 2단계 시스템'**을 거대하게 확장하여 연계 구축합니다.</p>

        <div class="card card-magic bg-dark-stone border-dark text-white text-left p-3 shadow mx-auto" style="max-width: 920px;">
          <h5 class="text-warning fw-bold mb-2"><i class="fa fa-code-branch me-2"></i> 2단계 고도화 아키텍처 미션</h5>
          <p class="small text-silver mb-3">아이들은 코드를 직접 한 땀 한 땀 치지 않고, AI에게 자연어(우리말 규칙)로 명령하여 연계 코드를 증축하는 **'바이브 코딩(Vibe Coding)'**의 진수를 경험합니다.</p>
          
          <div class="p-3 bg-dark rounded-3 border border-secondary font-monospace text-silver mb-1" style="font-size: 0.72rem; line-height: 1.5;">
            🔮 <b>전사 선발 논리 설계 사양:</b><br>
            부족 배정이 완료된 전사에게 ➔ "할렐루야 산맥에서 절벽 위 빗자루 대신 이크란 비행 테스트를 통과했나요?" 질문 ➔ **[아니오] 선택 시: 기류에 휩쓸려 절벽 밑으로 미끄러져 추락했습니다! 폼프리 부인 병동 대신 기지 응급 링크 룸으로 후송되었습니다! (게임 오버 예외 처리 완료)** ➔ [네] 선택 시 ➔ "시력이 소리개처럼 좋고 거대한 붉은 비행 생물을 길들였습니까?" ➔ [네: 전설의 공중 리더 '토루크 막토(Toruk Makto)' 수색꾼 선발!] / [아니오: 하늘을 수호하는 일반 이크란 전사 배치!]
          </div>
        </div>
      </section>

      <!-- 슬라이드 15: 4일차 8교시 - 상호 테스트 리뷰 및 마스터 수료식 -->
      <section data-background-color="#111115">
        <h4 class="text-cyan mb-3 font-magic text-center">🏁 판도라 최종 코드 리뷰 및 그랜드 아키텍트 수료식</h4>
        <p class="text-silver small text-center mb-4">완성된 게임 링크를 띄우고 옆 친구와 노트북을 서로 통째로 바꾸어 앉습니다. 코드가 내 생각의 순서도 흐름대로 정교하게 돌아가는지 서로 **'상호 플레이 테스트(Code Review)'**를 수행합니다.</p>

        <div class="row g-3 text-center justify-content-center">
          <div class="col-md-5">
            <div class="card card-magic bg-dark-stone text-white h-100 p-3 shadow-sm text-left">
              <h6 class="text-success fw-bold border-bottom border-secondary pb-2">🤝 동료 평가(Peer Review) 프로토콜</h6>
              <p class="small opacity-90 mt-2" style="line-height: 1.6;">
                "너는 이크란 비행 테스트에서 '아니오'를 눌렀을 때 그냥 끝나는 게 아니라, 절벽으로 추락해 인간 몸의 기지 치료실로 강제 복귀되는 위트 있는 예외 시나리오와 함께 시스템이 완벽하게 가드되도록 방어벽을 설계했구나! 논리가 아주 강력해!"
              </p>
            </div>
          </div>
          <div class="col-md-5">
            <div class="card card-magic bg-deep-jungle text-cyan h-100 p-3 shadow border border-cyan d-flex flex-column justify-content-center">
              <h2 class="font-magic text-warning mb-2">🌿</h2>
              <h6 class="text-cyan fw-bold mb-1">그랜드 아키텍트 판도라 마스터 인증</h6>
              <p class="small text-white opacity-90 mb-0 font-weight-bold" style="line-height: 1.5;">
                "여러분은 오늘 어려운 영문 코딩 문법을 하나도 외우지 않았지만, 세상 그 어떤 프로그래머보다 강력한 시스템 설계 철학을 완성했습니다. 다가올 인공지능 시대의 진짜 주인은 생각을 지배하는 아키텍트 바로 여러분입니다!"
              </p>
            </div>
          </div>
        </div>

        <div class="py-3 text-center mt-3">
          <h2 class="text-danger fw-bold blink-anim mb-0" style="font-size: 2rem; letter-spacing: -1px;">🚨 마지막 설문 꼭 참여해 주세요! 🚨</h2>
        </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교시: 라면 레시피 오류 인터랙션 토글 상태 배열 (유지)
      showRamyunTrap: [false, false, false],
      ramyunTraps: [
        { title: "변수 1: 가스불 결핍 사건", desc: "냄비에 물과 면, 스프를 다 채웠으나 가스불 ON 화살표 링크가 유실됨. 물 온도가 100°C에 도달할 수 없어 밀가루 죽으로 변해 시스템 정지." },
        { title: "변수 2: 물 2리터 홍수 사건", desc: "물 공급 컴포넌트가 제약조건(550ml)을 위반하여 2000ml를 방류함. 스프의 염도가 희석되어 아무 맛도 나지 않는 치명적인 시스템 로직 오류 발생." },
        { title: "변수 3: 선조리 후 가열 사건", desc: "불을 켜고 물이 끓기도 전에 면과 스프를 냄비에 동시 투입하여 15분간 가열함. 면발의 구조적 탄력성이 붕괴되어 유지보수 불가능한 상태로 폭발." }
      ],

      // 2일차 3교시: 판도라 연결 허브 아바타 사용자 페르소나 데이터셋
      avatars: [
        { name: "인간 오퍼레이터 제이크 설리", type: "인간 오퍼레이터 (제약 조건)", feature: "원래 인간 몸 상태에서는 다리가 불편하여 휠체어로만 이동 가능함.", problem: "아바타 캡슐 싱크 룸으로 가기 위한 진입로에 가파른 턱이 있으면 스스로의 힘으로 아바타 접속기 가동 불가.", bg: "#3a2c1d" },
        { name: "초거대 툴쿤/타나토르 연구원", type: "대형 생물학 아바타", feature: "나비족 아바타 신체에 3미터가 넘는 대형 기골을 지님.", problem: "연결 허브의 천장이 너무 낮거나 출입구 폭이 좁으면 장비를 파괴하고 전체 교감 네트워크 데이터 정체 유발.", bg: "#1d2a3a" },
        { name: "화살통을 잔뜩 멘 나비족 소년 사냥꾼", type: "무장 전사 신입생", feature: "양손에 거대한 전사용 장궁과 화살통을 지녀 시야가 좁음.", problem: "에이와의 음성을 전송하는 중앙 전송 단말의 반납/교환 창구가 한눈에 보이지 않으면 길을 잃고 시스템 지연 유발.", bg: "#1d3a27" }
      ],

      // 2일차 3교시: 도서관 대신 판도라 허브 구조적 트랩 토글 상태 배열
      showLibraryTrap: [false, false, false],
      libraryTraps: [
        { zone: "존 A: 대강당 대신 기지 지하 링크 룸 집결 계단", desc: "오직 가파른 고정식 철제 나선형 계단으로만 설계됨. 휠체어를 탄 인간 제이크 설리의 접근성(Accessibility) 수치가 0이 되어 완벽한 서비스 거부 오류가 일어나는 심각한 아키텍처 결함 구역." },
        { zone: "존 B: 촘촘한 벌집 모양 1인용 캡슐 접속 방", desc: "캡슐 유닛 간격이 50cm로 극단적으로 밀착됨. 덩치가 거대한 타나토르/툴쿤 연구 아바타가 입장하자마자 장비를 건드려 도미노처럼 연결이 해제되는 데이터 붕괴 지점." },
        { zone: "존 C: 영혼의 나무 구석의 단 한 가닥뿐인 교감 촉수", desc: "모든 아바타가 에이와의 음성 로그를 동기화하려면 무조건 광장 구석 단 하나의 촉수로만 차례대로 걸어와 머리카락을 이어야 함. 축제 기간에 500명이 동시에 몰려 심각한 병목 현상(Bottleneck)을 일으키는 최악의 정보 흐름 설계." }
      ],

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

      // 4일차 7교시: 코드 추적 스캔 토글 상태 배열
      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:` 밑에 있는 아누라이 부족 배정문은 질문을 더 던지지 않습니다. 왜냐하면 숲도 싫고, 바다도 싫고, 공중 비행도 싫다고 대답한 학생들은 논리적 필터링 거름망의 중력 법칙에 의해 자동으로 아누라이 부족이라는 그릇으로 수렴되어 안착하기 때문입니다." }
      ]
    };
  },
  methods: {
    // 순간이동 포탈 함수
    goSlide(number) {
      if (this.deck) {
        this.deck.slide(number);
      } else {
        console.error("판도라 텔레포트 마법 실패: Reveal 인스턴스가 존재하지 않습니다.");
      }
    },
    // 각 차시별 레이아웃 깨짐을 원천 방어하는 레이아웃 리프레시 내장형 토글 함수 시리즈
    toggleRamyunTrap(index) {
      this.showRamyunTrap[index] = !this.showRamyunTrap[index];
      this.$nextTick(() => { if (this.deck) this.deck.layout(); });
    },
    toggleLibraryTrap(index) {
      this.libraryTraps[index] = !this.libraryTraps[index]; // Note: keeping state key sync with template
      this.showLibraryTrap[index] = !this.showLibraryTrap[index];
      this.$nextTick(() => { if (this.deck) this.deck.layout(); });
    },
    toggleCodeScan(index) {
      this.showCodeScan[index] = !this.showCodeScan[index];
      this.$nextTick(() => { if (this.deck) this.deck.layout(); });
    }
  },
  mounted() {
    // 라이브러리 연동 가동 및 초기화 셋업 실행
    this.deck = initializeReveal(this.$refs.revealRef, false);
    this.deck.on('slidechanged', (event) => {
      console.log("현재 순간이동 완료된 방의 고유 좌표 인덱스: " + event.indexh);
    });
  },
  unmounted() {
    if (this.deck) {
      this.deck.destroy();
    }
  }
};
</script>

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

/* 판도라 생태계 광채 스타일링 커스텀 메이크업 */
.text-cyan { color: #00f3ff !important; }
.text-emerald { color: #00ffaa !important; }
.text-bioglow { color: #d0f0ff !important; }
.bg-deep-jungle { background-color: #051412 !important; }
.bg-dark-stone { background-color: #1a2226 !important; }

/* 판도라 부족 및 RDA 시그니처 로우 컬러 스펙트럼 배정 */
.row-omaticaya { background-color: #0a291b !important; color: #00ffaa !important; }
.row-metkayina { background-color: #0a2429 !important; color: #00d4ff !important; }
.row-ikran { background-color: #29260a !important; color: #ffe600 !important; }
.row-rda { background-color: #24292e !important; color: #b2bec3 !important; }

/* 마법 테두리 및 그라디언트 터치 */
.magic-border { border: 4px double #00f3ff; border-radius: 12px; }
.border-bottom-cyan { border-bottom: 2px solid #00f3ff !important; }
.bg-cyan-gradient { background: linear-gradient(135deg, #00f3ff 0%, #0088cc 100%) !important; }
.card-magic { border-radius: 14px; border: 1px solid #33444d; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }

/* 아키텍트 전용 정밀 인라인 인용구 격식 */
.magic-quote { border-left: 5px solid #00f3ff; padding-left: 15px; font-style: italic; color: #eef9ff; }
.font-magic { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.cursor-pointer { cursor: pointer; }

/* 역동성을 주는 모션 임팩트 효과 */
.hover-scale { transition: transform 0.2s ease-in-out; }
.hover-scale:hover { transform: scale(1.03); border-color: #00f3ff !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); } }
</style>