<template>
  <div class="layout" :class="{ 'code-collapsed': isCollapsed }">
    <HomeButton />
    <div class="reveal" ref="revealRef">
      <div class="slides">
        <section
          v-for="slide in slides"
          :key="slide.key"
          :data-key="slide.key"
        >
          <h2 v-html="slide.title" />
          <ul>
            <li v-for="(bullet, i) in slide.bullets" :key="i" v-html="bullet" />
          </ul>
          <pre v-if="slide.code?.html"><code class="language-html"></code></pre>
          <pre v-if="slide.code?.css"><code class="language-css"></code></pre>
          <pre v-if="slide.code?.js"><code class="language-javascript"></code></pre>
        </section>

        <section>
          <h1 id="toc_30">👏🏽</h1>
          <h2 id="수고하셨어요-o">수고하셨어요 ^o^</h2>
        </section>
      </div>
    </div>

    <CodeEditor
      :html="currentCode.html"
      :css="currentCode.css"
      :js="currentCode.js"
      @update="onCodeUpdate"
    />
  </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";
import CodeEditor from '@/components/services/editor/CodeEditor.vue';

export default {
	components: {
		HomeButton: HomeButton,
    CodeEditor: CodeEditor
	},
	data() {
		return {
			isCollapsed: false,
      currentKey: '', 
      slides: [

{
  key: 'getElementIdBasic',
  title: '자바스크립트 기초: getElementById로 글자 복사하기',
  bullets: [
    "`getElementById`는 ID로 HTML 요소를 찾아줘요.",
    "찾은 요소의 `textContent`를 읽어서 다른 곳에 넣을 수 있어요.",
    "아래 코드는 페이지가 열리면 자동으로 실행돼요."
  ],
  code: {
    html: `
      <!-- 원본 글자 -->
      <p id="original">🍌 바나나</p>

      <!-- 결과가 나타날 부분 -->
      <p id="copied"></p>
    `,
    css: ``,
    js: `
      // id가 'original'인 요소를 가져와요
      var original = document.getElementById('original');

      // id가 'copied'인 요소를 가져와요
      var copied = document.getElementById('copied');

      // original의 글자를 copied에 복사해요
      copied.textContent = original.textContent;
    `
  }
},



{
			key: 'getElementId',
			title: '자바스크립트로 요소 조회하기',
			bullets: [
				'<code>document.getElementById</code>로 ID로 요소를 조회할 수 있습니다.',
				'<code>document.getElementsByClassName</code>으로 클래스명으로 여러 요소를 조회할 수 있습니다.',
				'<code>document.querySelector</code>는 CSS 선택자 문법으로 하나를,',
				'<code>document.querySelectorAll</code>은 여러 요소를 조회합니다.'
			],
			code: {
				html: `<div id="myDiv">Hello</div>\n<div class="myClass">Box 1</div>\n<div class="myClass">Box 2</div>`,
				css: `.myClass { color: blue; margin: 5px; }`,
				js: `const el = document.getElementById('myDiv');\nconsole.log(el.textContent);\n\nconst boxes = document.getElementsByClassName('myClass');\nfor (let box of boxes) {\n  console.log(box.textContent);\n}\n\nconst firstBox = document.querySelector('.myClass');\nconst allBoxes = document.querySelectorAll('.myClass');`
			}
		},		
    
    
    
      {
  key: "jsVars",
  title: "변수 선언과 활용",
  bullets: [
    "`var`, `let`, `const`로 변수 선언",
    "`let`은 블록 스코프, `const`는 상수",
    "`const`로 선언된 객체는 내부 값은 변경 가능"
  ],
  code: {
    html: `
<div id="result" style="font-weight: bold; font-size: 1.2em;"></div>
    `,
    css: ``,
    js: `
let name = "홍길동";
const age = 20;
let output = "이름: " + name + "\\n나이: " + age;

document.getElementById("result").textContent = output;
    `
  }
},

  {
  key: "jsArithmetic",
  title: "사칙연산 예제",
  bullets: [
    "`+`, `-`, `*`, `/`, `%` 연산자 사용 가능",
    "문자열 + 숫자는 문자열로 변환됨"
  ],
  code: {
    html: `
<div id="result" style="font-weight: bold; font-size: 1.2em; white-space: pre-line;"></div>
    `,
    css: "",
    js: `
let a = 10;
let b = 3;

let output = "";
output += "덧셈: " + (a + b) + "\\n";
output += "뺄셈: " + (a - b) + "\\n";
output += "곱셈: " + (a * b) + "\\n";
output += "나눗셈: " + (a / b) + "\\n";
output += "나머지: " + (a % b);

document.getElementById("result").textContent = output;
    `
  }
},

  {
  key: "operators",
  title: "자바스크립트 연산자",
  bullets: [
    "산술 연산자: +, -, *, /, %",
    "대입 연산자: =, +=, -=, *=, /=",
    "비교 연산자: ==, ===, !=, !==, >, <, >=, <=",
    "논리 연산자: &&, ||, !",
    "typeof, instanceof 도 연산자입니다."
  ],
  code: {
    html: `<div id="output"></div>`,
    css: `#output { font-family: monospace; padding: 1rem; background: #f4f4f4; }`,
    js: `const a = 10;
const b = 3;

const result = {
  sum: a + b,
  isEqual: a == b,
  isStrictEqual: a === b,
  isGreater: a > b,
  logic: a > 5 && b < 5,
  type: typeof a
};

document.getElementById("output").textContent =
  'sum: ' + result.sum + '\\n' +
  'isEqual: ' + result.isEqual + '\\n' +
  'isStrictEqual: ' + result.isStrictEqual + '\\n' +
  'isGreater: ' + result.isGreater + '\\n' +
  'logic: ' + result.logic + '\\n' +
  'type: ' + result.type;`
  }
},

{
  key: "JsOnclick",
  title: "HTML onclick 이벤트",
  bullets: [
    "`onclick`은 요소를 클릭했을 때 JavaScript 코드를 실행합니다.",
    "버튼, 이미지, 텍스트 등 다양한 요소에 사용 가능합니다.",
    "간단한 인터랙션 구현에 유용합니다."
  ],
  code: {
    html: `<button id="DoIt">눌러보세요</button>
<p id="message">여기에 메시지가 표시됩니다.</p>`,
    css: `#message {
  font-weight: bold;
  color: blue;
}`,
    js: `const bt = document.getElementById('DoIt'); 
bt.onclick = function() {
document.getElementById('message').textContent = "버튼이 클릭되었습니다!";
}`
  }
},

{
  key: "jsInputBasicJsEvent",
  title: "input 값 받아 화면에 출력하기 (자바스크립트 이벤트 사용)",
  bullets: [
    "input 태그와 버튼을 HTML에 간단히 둡니다.",
    "`onclick` 이벤트 리스너를 자바스크립트에서 등록합니다.",
    "입력된 숫자를 버튼 클릭 시 화면에 출력합니다.",
    "자바스크립트로 이벤트를 분리해 관리하는 기본 패턴입니다."
  ],
  code :{
  html: `
    <input type="number" id="numInput" placeholder="숫자를 입력하세요" />
    <button id="checkBtn">확인</button>
    <p>입력한 숫자: <span id="output"></span></p>
  `,
  css: ``,
  js: `
    const input = document.getElementById('numInput');
    const btn = document.getElementById('checkBtn');
    const output = document.getElementById('output');
    btn.onclick = function() {
      output.textContent = input.value;
    };
  `
  }
},

{
  key: "jsConcatOnClickQuiz",
  title: "퀴즈: 두 문자를 입력하고 '결과 보기' 버튼을 누르면 입력한 문자를 결합해 보여주세요!",
  bullets: [
    "두 개의 input에 각각 문자를 입력합니다.",
    "'결과 보기' 버튼을 클릭하면 두 입력값이 합쳐져서 아래에 표시됩니다.",
    "함수 대신 버튼의 onclick 이벤트를 사용해 구현합니다.",
    "문자열 결합과 간단한 이벤트 처리 연습에 좋아요."
  ],
  code : {
  html: `
    <input type="text" id="numInput1" placeholder="첫번째 문자 입력" />
    <input type="text" id="numInput2" placeholder="두번째 문자 입력" />
    <button id="showResultBtn">결과 보기</button>
    <p>입력한 문자 결합: <span id="result"></span></p>
  `,
  css: ``,
  js: `
    const input1 = document.getElementById('numInput1');
    const input2 = document.getElementById('numInput2');
    const btn = document.getElementById('showResultBtn');
    const result = document.getElementById('result');

    btn.onclick = function() {
      result.textContent = input1.value + input2.value;
    };
  `
  }
},


  {
  key: "jsCondition",
  title: "조건문",
  bullets: [
    "`if`, `else if`, `else`를 사용하여 조건에 따라 실행 분기",
    "`===` (값과 타입 비교)와 `==` (값만 비교)의 차이에 주의"
  ],
  code: {
    html: `
<div id="result" style="font-weight:bold; font-size:1.2em;"></div>
    `,
    css: ``,
    js: `
let score = 85;
let result = "";

if (score >= 90) {
  result = "A 학점";
} else if (score >= 80) {
  result = "B 학점";
} else {
  result = "C 이하";
}

document.getElementById("result").textContent = result;
    `
  }
},

{
  key: "jsCompareStringsQuiz",
  title: "퀴즈: 두 문자열이 같은지 비교해봅시다!",
  bullets: [
    "두 개의 입력창에 각각 문자열을 입력받습니다.",
    "‘비교하기’ 버튼을 누르면 두 문자열이 같은지 확인해서 결과를 보여줍니다.",
    "같으면 ‘같음’, 다르면 ‘다름’ 이라는 글자가 나타납니다.",
    "문자열 비교와 조건문(if) 연습에 좋습니다."
  ],
  code :{
  html: `
    <input type="text" id="compareInput1" placeholder="첫번째 문자열 입력" />
    <input type="text" id="compareInput2" placeholder="두번째 문자열 입력" />
    <button id="compareBtn">비교하기</button>
    <p>비교 결과: <span id="compareResult"></span></p>
  `,
  css: ``,
  js: `
    const compareInput1 = document.getElementById('compareInput1');
    const compareInput2 = document.getElementById('compareInput2');
    const compareBtn = document.getElementById('compareBtn');
    const compareResult = document.getElementById('compareResult');

    compareBtn.onclick = function() {
      if (compareInput1.value === compareInput2.value) {
        compareResult.textContent = "같음";
      } else {
        compareResult.textContent = "다름";
      }
    };
  `
  }
},

{
  key: "jsScoreAverageQuiz",
  title: "퀴즈: 국어, 영어, 수학 점수를 입력받아 평균에 따라 평가를 표시해보세요!",
  bullets: [
    "국어, 영어, 수학 점수를 각각 입력받습니다.",
    "‘결과보기’ 버튼을 누르면 평균을 계산합니다.",
    "평균 점수에 따라 다음과 같이 평가를 출력합니다:",
    "  - 30점 이하 → ‘분발하세요’",
    "  - 30~70점 → ‘적당해요’",
    "  - 70점 이상 → ‘잘했어요’",
    "힌트: `Number(입력값.value)` 를 써야 숫자 계산이 정확히 됩니다!"
  ],
  code : {
  html: `
    <input type="number" id="korean" placeholder="국어 점수 입력" />
    <input type="number" id="english" placeholder="영어 점수 입력" />
    <input type="number" id="math" placeholder="수학 점수 입력" />
    <button id="checkScoreBtn">결과보기</button>
    <p>평가: <span id="scoreResult"></span></p>
  `,
  css: ``,
  js: `
    const korean = document.getElementById('korean');
    const english = document.getElementById('english');
    const math = document.getElementById('math');
    const button = document.getElementById('checkScoreBtn');
    const result = document.getElementById('scoreResult');

    button.onclick = function() {
      const k = Number(korean.value);
      const e = Number(english.value);
      const m = Number(math.value);
      const avg = (k + e + m) / 3;

      if (avg <= 30) {
        result.textContent = "분발하세요";
      } else if (avg <= 70) {
        result.textContent = "적당해요";
      } else {
        result.textContent = "잘했어요";
      }
    };
  `
  }
},

{
  key: "quizToggleImage",
  title: "실습 퀴즈: 이미지 토글",
  bullets: [
    "버튼을 클릭하면 이미지를 보였다가 안 보이게 토글해보세요!",
    "`style.display` 속성을 활용해보세요.",
    "`none`과 `block` 값을 번갈아 설정합니다.",
    "`if...else` 문을 사용해 구현해보세요."
  ],
  code: {
    html: `
<button onclick="toggleImage()">이미지 토글</button>
<br><br>
<img id="myImage" src="https://via.placeholder.com/150" style="display: block;">
`,
    css: ``,
    js: `
function toggleImage() {
  const img = document.getElementById("myImage");
  if (img.style.display === "none") {
    img.style.display = "block";
  } else {
    img.style.display = "none";
  }
}
`
  }
},



  {
  key: "jsLoop",
  title: "반복문",
  bullets: [
    "`for`, `while`, `do...while` 제공",
    "`for...of`, `for...in` 도 있음"
  ],
  code: {
    html: `
<div id="result" style="white-space: pre-line; font-weight: bold;"></div>
    `,
    css: "",
    js: `
let output = "";
for (let i = 1; i <= 5; i++) {
  output += i + "번 반복\\n";
}

document.getElementById("result").textContent = output;
    `
  }
},

  {
  key: "function",
  title: "함수(Function)",
  bullets: [
    "`function` 키워드 또는 화살표 함수 `=>`로 함수를 정의합니다.",
    "함수는 재사용 가능한 코드 블록입니다.",
    "`return`을 통해 값을 반환할 수 있습니다."
  ],
  code: {
    html: `
<div id="result" style="white-space: pre-line; font-weight: bold;"></div>
    `,
    css: "",
    js: `
// 함수 선언
function greet(name) {
  return "안녕하세요, " + name + "!";
}

// 함수 호출
let message = greet("철수");

// 화살표 함수
const add = (a, b) => a + b;

let output = "";
output += message + "\\n";
output += "합: " + add(3, 5);

document.getElementById("result").textContent = output;
    `
  }
},


{
  key: "jsAddEventListenerBasic",
  title: "AddEventListener 사용법",
  bullets: [
    "`addEventListener`는 이벤트(클릭, 입력 등)를 감지해 실행할 수 있게 합니다.",
    "`click`은 버튼을 눌렀을 때의 이벤트입니다.",
    "`input`은 텍스트 입력란에 입력할 때마다 발생하는 이벤트입니다.",
    "버튼을 누르면 &lt;p&gt; 태그에 메시지가 나타나고, 입력할 때도 &lt;p&gt; 태그에 입력값이 표시되도록 해봅시다!"
  ],
  code : {
  html: `
    <button id="showBtn">눌러보세요</button>
    <input type="text" id="textInput" placeholder="글자를 입력해보세요" />
    <p id="message"></p>
  `,
  css: ``,
  js: `
    const showBtn = document.getElementById('showBtn');
    const textInput = document.getElementById('textInput');
    const message = document.getElementById('message');

    showBtn.addEventListener('click', function() {
      message.textContent = "버튼을 눌렀어요!";
    });

    textInput.addEventListener('input', function() {
      message.textContent = "입력한 글자: " + this.value;
    });
  `
  }
},

{
  key: "jsEvenNumbersQuiz",
  title: "퀴즈: 입력한 숫자까지 짝수만 출력해보세요!",
  bullets: [
    "숫자를 입력받습니다.",
    "입력한 숫자까지 반복문을 사용해 반복합니다.",
    "짝수만 골라서 화면에 출력해보세요!",
    "`%` 연산자를 사용하면 짝수를 쉽게 판별할 수 있어요!",
    "버튼 클릭 이벤트는 `addEventListener`를 사용해 처리해보세요."
  ],
  code : {
  html: `
    <input type="number" id="evenInput" placeholder="숫자를 입력하세요" />
    <button id="evenBtn">짝수 출력</button>
    <p>짝수 결과: <span id="evenResult"></span></p>
  `,
  css: ``,
  js: `
    const evenInput = document.getElementById('evenInput');
    const evenBtn = document.getElementById('evenBtn');
    const evenResult = document.getElementById('evenResult');

    evenBtn.addEventListener('click', function() {
      const limit = Number(evenInput.value);
      let result = '';
      for (let i = 1; i <= limit; i++) {
        if (i % 2 === 0) {
          result += i + ' ';
        }
      }
      evenResult.textContent = result; 
    });
  `
  }
},

{
  key: "jsTemplateLiteralCompare",
  title: "문자열 연결 vs 템플릿 리터럴 비교해보기",
  bullets: [
    "문자열 + 변수를 연결하는 전통적인 방법입니다.",
    "템플릿 리터럴은 백틱(`)과 `${}`를 이용해 더 간단하고 읽기 쉬워요.",
    "아래 예제와 결과를 비교해 보세요!"
  ],
  code :{
  html: `
    <pre id="concatExample"></pre>
    <pre id="templateExample"></pre>
  `,
  css: `
    pre { background: #f0f0f0; padding: 10px; margin-bottom: 10px; font-size: 16px; }
  `,
  js: `
    const concatExample = document.getElementById('concatExample');
    const templateExample = document.getElementById('templateExample');
    
    const name = "철수";
    const age = 10;
    
    // 문자열 연결
    let concatStr = "내 이름은 " + name + "이고, 나이는 " + age + "살입니다.";
    
    // 템플릿 리터럴
    let templateStr = \`내 이름은 \${name}이고, 나이는 \${age}살입니다.\`;
    
    concatExample.textContent = "문자열 연결 결과:\n" + concatStr;
    templateExample.textContent = "템플릿 리터럴 결과:\n" + templateStr;
  `
  }
},

{
  key: "jsGugudanQuiz",
  title: "퀴즈: 원하는 단의 구구단을 출력해보세요!",
  bullets: [
    "원하는 숫자(단)를 입력받습니다.",
    "1부터 9까지 곱한 결과를 출력해보세요.",
    "반복문을 활용해서 깔끔하게 만들 수 있어요!",
    "출력 형식: 7 x 1 = 7",
    "문자열 안에 변수나 표현식을 넣고 싶으면 `${}`를 사용해보세요. 이를 템플릿 리터럴이라고 합니다."
  ],
  code :{
  html: `
    <input type="number" id="danInput" placeholder="단을 입력하세요 (예: 7)" />
    <button id="danBtn">구구단 출력</button>
    <pre id="danResult"></pre>
  `,
  css: ``,
  js: `
    const danInput = document.getElementById('danInput');
    const danBtn = document.getElementById('danBtn');
    const danResult = document.getElementById('danResult');

    danBtn.addEventListener('click', function() {
      const dan = Number(danInput.value);
      let result = '';
      for (let i = 1; i <= 9; i++) {
        result += \`\${dan} x \${i} = \${dan * i}\\n\`;
      }
      danResult.textContent = result;
    });
  `
  }
},





{
  key: "object",
  title: "자바스크립트 객체",
  bullets: [
    "객체는 관련 있는 데이터를 하나로 묶은 구조입니다.",
    "속성(key)과 값(value)으로 구성됩니다.",
    "메서드는 객체의 함수입니다.",
    "점(.) 또는 대괄호([]) 표기법으로 접근합니다."
  ],
  code: {
    html: `<div id="obj-output"></div>`,
    css: `#obj-output { white-space: pre-line; background: #f4f4f4; padding: 1rem; font-family: monospace; }`,
    js: `const student = {
  name: "홍길동",
  age: 20,
  major: "컴퓨터공학",
  greet: function() {
    return "안녕하세요, " + this.name + "입니다.";
  }
};

// 객체 값 가져오기
const msg = [
  "이름: " + student.name,
  "전공: " + student["major"],
  "인사말: " + student.greet()
].join("\\n");

document.getElementById("obj-output").textContent = msg;`
  }
}, 
// this는 안넣어도 되나..?

{
  "key": "jsConstructorPerson",
  "title": "객체 응용",
  "bullets": [
    "생성자 함수는 객체를 여러 개 만들 때 매개변수로 초기값을 넣을 수 있어요.",
    "`this` 키워드로 속성을 지정합니다.",
    "메서드도 생성자 함수 안에 넣어 객체마다 다르게 동작하도록 할 수 있어요.",
    "아래 예제를 보고, 새로운 사람 객체를 만들어보세요!"
  ],
  code : {
  "html": "<div id='output'></div>",
  "css": "",
  "js": `
function Person(lastName, firstName, age, hobby) {
  this.lastName = lastName;
  this.firstName = firstName;
  this.age = age;
  this.hobby = hobby;

  this.introduce = function() {
    return \`안녕하세요! 저는 \${this.lastName}\${this.firstName}이고, 나이는 \${this.age}살이며, 취미는 \${this.hobby}입니다.\`;
  }
}

const person1 = new Person('김', '철수', 25, '축구');
const person2 = new Person('이', '영희', 30, '독서');

const outputDiv = document.getElementById('output');
outputDiv.innerHTML = person1.introduce() + '<br>' + person2.introduce();
`}
},

{
  "key": "jsConstructorInputQuiz",
  "title": "퀴즈: 입력한 값으로 사람 객체를 만들고 소개해보세요!",
  "bullets": [
    "성, 이름, 나이, 취미를 입력받습니다.",
    "입력한 값을 매개변수로 전달해 객체를 생성합니다.",
    "객체의 메서드로 자기소개 문장을 출력해보세요.",
    "`this`와 `new` 키워드를 꼭 기억하세요!"
  ],
  code :{
  "html": `
    <input type="text" id="lastName" placeholder="성을 입력하세요" />
    <input type="text" id="firstName" placeholder="이름을 입력하세요" />
    <input type="number" id="age" placeholder="나이를 입력하세요" />
    <input type="text" id="hobby" placeholder="취미를 입력하세요" />
    <button id="makeBtn">소개 만들기</button>
    <p id="result"></p>
  `,
  "css": "",
  "js": `
    function Person(lastName, firstName, age, hobby) {
      this.lastName = lastName;
      this.firstName = firstName;
      this.age = age;
      this.hobby = hobby;

      this.introduce = function() {
        return \`안녕하세요! 저는 \${this.lastName}\${this.firstName}이고, 나이는 \${this.age}살이며, 취미는 \${this.hobby}입니다.\`;
      }
    }

    const makeBtn = document.getElementById('makeBtn');
    const result = document.getElementById('result');

    makeBtn.addEventListener('click', function() {
      const lastName = document.getElementById('lastName').value;
      const firstName = document.getElementById('firstName').value;
      const age = document.getElementById('age').value;
      const hobby = document.getElementById('hobby').value;

      const newPerson = new Person(lastName, firstName, age, hobby);
      result.textContent = newPerson.introduce();
    });
  `
  }
},

{
  key: "string",
  title: "문자열 (String)",
  bullets: [
    "문자열은 `'`, `\"`, 백틱(`)으로 감쌉니다.",
    "문자열은 불변(immutable)하며 다양한 메서드 사용 가능.",
    "`length`, `slice()`, `substring()`, `replace()` 등 주요 메서드 학습."
  ],
  code: {
    html: `<div id="string-result"></div>`,
    css: `#string-result {
  padding: 1rem;
  background: #f9f9f9;
  border: 1px solid #ccc;
  font-family: monospace;
  white-space: pre-line;
}`,
    js: `const str = "Hello, JavaScript!";
const methods = [
  "원본문자열: " + str,
  "길이 (length): " + str.length,
  "부분추출 slice(7, 17): " + str.slice(7, 17),
  "부분추출 substring(0, 5): " + str.substring(0, 5),
  "대문자 (toUpperCase): " + str.toUpperCase(),
  "소문자 (toLowerCase): " + str.toLowerCase(),
  "포함 여부 (includes 'Java'): " + str.includes("Java"),
  "시작 여부 (startsWith 'Hello'): " + str.startsWith("Hello"),
  "끝 여부 (endsWith '!'): " + str.endsWith("!"),
  "위치 찾기 indexOf('Java'): " + str.indexOf("Java"),
  "치환 replace('Hello', 'Hi'): " + str.replace("Hello", "Hi"),
  "공백 제거 trim(): " + "   trimmed   ".trim(),
  "문자 배열로 split(' '): " + str.split(" ").join(","),
  "문자열 반복 repeat(2): " + str.repeat(2),
  "문자열 결합 str + '👍': " + (str + " 👍")
];

document.getElementById("string-result").textContent = methods.join("\\n");`
  }
},

{
  key: "number",
  title: "숫자 (Number)",
  bullets: [
    "숫자는 정수와 실수 모두 포함하며, JavaScript는 하나의 Number 타입만 존재합니다.",
    "기본적인 산술 연산자: +, -, *, /, %",
    "내장 메서드와 객체: toFixed(), toString(), parseInt(), parseFloat(), isNaN(), Number() 등",
    "Math 객체를 통해 다양한 수학 연산 지원"
  ],
  code: {
    html: `<div id="number-output"></div>`,
    css: `#number-output {
  padding: 1rem;
  background: #eef;
  border-radius: 8px;
  font-family: monospace;
  white-space: pre-line;
}`,
    js: `const num = 123.456;
let output = "";

output += \`원본 숫자: \${num}\\n\`;
output += \`소수 둘째 자리까지 (toFixed): \${num.toFixed(2)}\\n\`;
output += \`문자열 변환 (toString): \${num.toString()}\\n\`;
output += \`문자열 → 정수 (parseInt): \${parseInt("42px")}\\n\`;
output += \`문자열 → 실수 (parseFloat): \${parseFloat("3.14px")}\\n\`;
output += \`숫자 변환 (Number): \${Number("123")}\\n\`;
output += \`숫자 여부 확인 (isNaN): \${isNaN("abc")}\\n\`;
output += \`Math.round: \${Math.round(num)}\\n\`;
output += \`Math.floor: \${Math.floor(num)}\\n\`;
output += \`Math.ceil: \${Math.ceil(num)}\\n\`;
output += \`Math.random (0~1): \${Math.random()}\\n\`;

document.getElementById("number-output").textContent = output;`
  }
},

{
  "key": "jsDateFormatQuiz",
  "title": "퀴즈: 날짜를 연, 월, 일로 나눠 출력해보세요!",
  "bullets": [
    "8자리 숫자 형식(예: `20110405`)으로 날짜를 입력받습니다.",
    "`substring`을 사용해 앞에서부터 연/월/일을 자릅니다.",
    "`0000년 00월 00일` 형식으로 바꿔 출력해보세요!",
    "힌트: 문자열에서 일정 부분을 자를 땐 `substring(시작, 끝)`을 사용합니다."
  ],
  code :{
  "html": `
    <input type="text" id="dateInput" placeholder="예: 20110405" maxlength="8" />
    <button id="convertBtn">날짜 변환</button>
    <p id="convertedDate"></p>
  `,
  "css": "",
  "js": `
    const dateInput = document.getElementById('dateInput');
    const convertBtn = document.getElementById('convertBtn');
    const convertedDate = document.getElementById('convertedDate');

    convertBtn.addEventListener('click', function() {
      const raw = dateInput.value;
      if (raw.length !== 8 || isNaN(raw)) {
        convertedDate.textContent = "8자리 숫자를 입력하세요!";
        return;
      }
      const year = raw.substring(0, 4);
      const month = raw.substring(4, 6);
      const day = raw.substring(6, 8);

      convertedDate.textContent = \`\${year}년 \${month}월 \${day}일\`;
    });
  `
  }
},


{
  key: "jsCapitalizeWordsQuiz",
  title: "퀴즈: input을 받고 등록 버튼을 누르면 각 어절별 첫글자는 무조건 대문자로 표기되게 만들어보세요!",
  bullets: [
    "input에 문장을 입력받습니다.",
    "등록 버튼을 누르면 각 단어의 첫 글자를 대문자로 변환합니다.",
    "문자열을 단어별로 나누고, 배열의 각 단어에 변환을 적용하기 위해 `.map()` 메서드를 사용합니다.",
    "`.map()`은 배열을 순회하며 각 요소에 함수를 적용해 새 배열을 반환합니다.",
    "변환된 결과를 화면에 보여줍니다.",
    "문자열 조작과 이벤트 처리 연습에 좋습니다."
  ],
  code: {
  html: `
    <input type="text" id="sentenceInput" placeholder="문장을 입력하세요" />
    <button id="registerBtn">등록</button>
    <p>결과: <span id="result"></span></p>
  `,
  css: ``,
  js: `
    const input = document.getElementById('sentenceInput');
    const btn = document.getElementById('registerBtn');
    const result = document.getElementById('result');
    const showAnswerBtn = document.getElementById('showAnswerBtn');
    
    btn.onclick = () => {
      const text = input.value.trim();
      if (!text) {
        result.textContent = '';
        return;
      }
      const capitalized = text
        .split(' ')
        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
        .join(' ');
      result.textContent = capitalized;
    };
  `
  }
},


{
  key: "array",
  title: "배열과 메서드",
  bullets: [
    "배열(Array)은 여러 값을 순차적으로 저장하는 자료구조입니다.",
    "배열은 대괄호 `[]`를 사용하여 생성합니다.",
    "자주 사용하는 메서드: push(), pop(), shift(), unshift(), slice(), splice(), join(), includes(), indexOf(), map(), filter(), forEach(), reduce() 등"
  ],
  code: {
    html: `<div id="array-output"></div>`,
    css: `#array-output {
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 8px;
  font-family: monospace;
  white-space: pre-line;
}`,
    js: `const fruits = ["🍎", "🍌", "🍇"];
let output = "";

output += \`원본 배열: \${fruits}\\n\`;

fruits.push("🍊");
output += \`push 후: \${fruits}\\n\`;

const last = fruits.pop();
output += \`pop() 결과: \${last}, 현재 배열: \${fruits}\\n\`;

fruits.unshift("🍓");
output += \`unshift 후: \${fruits}\\n\`;

fruits.splice(1, 1, "🥝");
output += \`splice 후: \${fruits}\\n\`;

const hasBanana = fruits.includes("🍌");
output += \`includes("🍌") 결과: \${hasBanana}\\n\`;

const upper = fruits.map(f => f + "✨");
output += \`map 결과: \${upper}\\n\`;

document.getElementById("array-output").textContent = output;`
  }
},

{
  key: "jsArrayAccessFruits",
  title: "배열 인덱싱",
  bullets: [
    "배열에 과일 이름들을 넣어봅시다.",
    "배열의 값은 `배열[숫자]`로 하나씩 꺼낼 수 있어요.",
    "반복문을 사용하면 모든 값을 순서대로 꺼낼 수 있어요.",
    "배열은 0번부터 시작합니다!"
  ],
  code : {
  html: `
    <p>직접 꺼낸 과일들:</p>
    <p id="fruitDirect"></p>

    <p>반복문으로 꺼낸 과일들:</p>
    <p id="fruitLoop"></p>
  `,
  css: ``,
  js: `
    const fruits = ['사과', '바나나', '포도', '수박', '딸기'];

    // 직접 꺼내기
    const directFruits = fruits[0] + ", " + fruits[1] + ", " + fruits[2];
    document.getElementById('fruitDirect').textContent = directFruits;

    // 반복문으로 꺼내기
    let loopFruits = "";
    for (let i = 0; i < fruits.length; i++) {
      loopFruits += fruits[i] + " ";
    }
    document.getElementById('fruitLoop').textContent = loopFruits;
  `
  }
},

{
  key: "jsMouseColorToggle",
  title: "마우스 오버/아웃 글자색 변경",
  bullets: [
    "버튼에 마우스를 올리면 글자색이 파란색으로 변함",
    "마우스를 떼면 글자색이 빨간색으로 변함",
    "`onmouseover` 와 `onmouseout` 이벤트 사용"
  ],
  code: {
    html: `
<button id="colorBtn" style="color: red;">마우스를 올려보세요</button>
<p>터치패드에서도 잘 동작할까요? 안 한다면 어떻게 고쳐야 할까요?</p>
`,
    css: ``,
    js: `
const btn = document.getElementById('colorBtn');
btn.onmouseover = () => btn.style.color = 'blue';
btn.onmouseout = () => btn.style.color = 'red';
`
  }
},

{
  "key": "jsWeekdayColorHoverIfElse",
  "title": "퀴즈: 마우스를 올리면 요일별 색으로 바뀌어요! (if-else 사용)",
  "bullets": [
    "요일 배열과 색깔 배열을 각각 만들어봅시다.",
    "마우스를 올릴 때 요일을 보여주고 배경색을 해당 요일의 색으로 바꿔봅시다.",
    "마우스를 떼면 다시 초기상태로 돌아오게 해보세요.",
    "`mouseover`, `mouseout`, 배열 인덱스 접근을 연습할 수 있어요!",
    " if-else 문으로 글자색을 바꿔봅시다."
  ],
  code :{
  "html": `
    <div id="dayBox" style="width: 200px; height: 100px; background-color: lightgray; display: flex; align-items: center; justify-content: center; border: 2px solid #333; font-size: 20px;">
      요일 상자
    </div>
  `,
  "css": ``,
  "js": `
    const dayBox = document.getElementById('dayBox');
    const days = ['월요일', '화요일', '수요일', '목요일', '금요일', '토요일', '일요일'];
    const colors = ['yellow', 'red', 'blue', 'brown', 'gray', 'black', 'white'];

    let index = 0;

    dayBox.addEventListener('mouseover', function () {
      dayBox.textContent = days[index];
      dayBox.style.backgroundColor = colors[index];
      
      // 삼항 연산자 대신 if-else 사용
      if (colors[index] === 'black') {
        dayBox.style.color = 'white';
      } else {
        dayBox.style.color = 'black';
      }

      index = (index + 1) % days.length;
    });

    dayBox.addEventListener('mouseout', function () {
      dayBox.textContent = '요일 상자';
      dayBox.style.backgroundColor = 'lightgray';
      dayBox.style.color = 'black';
    });
  `
  }
},


{
  key: 'randomBool',
  title: 'JavaScript 랜덤과 부울',
  bullets: [
    '`Math.random()` 은 0 이상 1 미만의 소수를 반환합니다.',
    '`Math.floor()` 는 소수점 이하를 제거하여 정수로 만듭니다.',
    '이 두 가지를 조합하면 정수 난수를 생성할 수 있습니다.',
    'Boolean 값은 `true` 또는 `false`만을 가집니다.',
    '랜덤 값을 이용해 무작위 Boolean 값을 만들 수 있습니다.'
  ],
  code: {
    html: `
<h3>랜덤 숫자와 부울 값 생성</h3>
<div id="result" style="white-space: pre-wrap; background: #111; color: #0f0; padding: 1em; border-radius: 8px; font-family: monospace;"></div>
`,
    css: `
h3 {
  color: #4ec9b0;
}
#result {
  background-color: #111;
  color: #0f0;
}
`,
    js: `
// 0 이상 10 미만의 랜덤 정수 5개 생성
let output = '랜덤 정수 생성 (0 ~ 9):\\n';
for (let i = 0; i < 5; i++) {
  const randInt = Math.floor(Math.random() * 10);
  output += randInt + ' ';
}

// 랜덤 Boolean 값 생성
output += '\\n\\n랜덤 부울 값 생성:\\n';
for (let i = 0; i < 5; i++) {
  const randBool = Math.random() >= 0.5;
  output += randBool + ' ';
}

// 화면에 출력
document.getElementById('result').textContent = output;
`
  }
},

{
  "key": "jsRandomWithDuplicates",
  "title": "퀴즈: 1부터 100까지 숫자 중 랜덤한 5개를 중복 허용하여 출력해보세요!",
  "bullets": [
    "반복문을 사용해 5번 반복하세요.",
    "매 반복마다 1~100 사이 랜덤 숫자를 생성하세요.",
    "생성한 숫자는 중복될 수 있습니다.",
    "생성한 숫자를 화면에 출력하세요."
  ],
  code :{
  "html": `
    <button id="randomBtn">랜덤 숫자 5개 출력</button>
    <p>결과: <span id="randomResult"></span></p>
  `,
  "css": "",
  "js": `
    const randomBtn = document.getElementById('randomBtn');
    const randomResult = document.getElementById('randomResult');

    randomBtn.addEventListener('click', function() {
      let result = '';
      for (let i = 0; i < 5; i++) {
        const num = Math.floor(Math.random() * 100) + 1; // 1~100 랜덤
        result += num + ' ';
      }
      randomResult.textContent = result.trim();
    });
  `
  }
},

{
  key: "jsLottoWithoutDuplicates",
  title: "퀴즈: 로또당첨을 위해 1~45 숫자 6개 중복 없이 랜덤 추출",
  bullets: [
    "1부터 45까지 숫자를 랜덤으로 뽑아 6개 저장하세요.",
    "중복된 숫자는 허용하지 않습니다.",
    "중복이 발생하면 다시 숫자를 뽑도록 조건문을 작성하세요.",
    "결과를 화면에 출력하세요.",
    "`배열.includes(값)`는 배열에 값이 있으면 true, 없으면 false를 반환합니다.",
    "`!lottoNums.includes(num)`는 배열에 num이 없을 때 true가 됩니다."
  ],
  code:{
  html: `
    <button id="drawBtnNoDup">번호 뽑기 (중복제거)</button>
    <p>뽑힌 번호: <span id="resultNoDup"></span></p>
  `,
  css: ``,
  js: `
    const drawBtnNoDup = document.getElementById('drawBtnNoDup');
    const resultNoDup = document.getElementById('resultNoDup');

    drawBtnNoDup.addEventListener('click', function() {
      let lottoNums = [];
      while (lottoNums.length < 6) {
        let num = Math.floor(Math.random() * 45) + 1;
        if (!lottoNums.includes(num)) {
          lottoNums.push(num);
        }
      }
      resultNoDup.textContent = lottoNums.join(', ');
    });
  `
  }
},

{
  key: 'breakContinue',
  title: 'JavaScript break 와 continue',
  bullets: [
    '`break` 문은 반복문 내에서 실행 시 즉시 반복문을 종료합니다.',
    '`continue` 문은 현재 반복을 건너뛰고 다음 반복으로 넘어갑니다.',
    '반복문 실행을 제어할 때 자주 사용됩니다.'
  ],
  code :{
  html: `
<h3>break 와 continue</h3>
<div id="result" style="white-space: pre-wrap; background: #111; color: #0f0; padding: 1em; border-radius: 8px; font-family: monospace;"></div>
`,
  css: '',
  js: `
let output = 'break 예시:\\n';
for (let i = 0; i < 5; i++) {
  if (i === 3) break;
  output += i + ' ';
}

output += '\\n\\ncontinue 예시:\\n';
for (let i = 0; i < 5; i++) {
  if (i === 3) continue;
  output += i + ' ';
}

document.getElementById('result').textContent = output;
`
  }
},




{
  key: "jsAppendChildBasic",
  title: "문법: 자바스크립트로 새로운 요소를 추가해보세요! (appendChild)",
  bullets: [
    "`appendChild`는 부모 요소에 새로운 자식 요소를 추가하는 함수입니다.",
    "먼저 `document.createElement`로 새로운 요소를 만듭니다.",
    "만든 요소에 텍스트나 속성을 넣을 수 있어요.",
    "마지막으로 `appendChild`를 사용해 기존 요소 안에 추가합니다."
  ],
  code :{
  html: `
    <div id="container">
      <p>여기에 새로운 문장이 추가됩니다:</p>
    </div>
    <button id="addBtn">새 문장 추가</button>
  `,
  css: ``,
  js: `
    const container = document.getElementById('container');
    const addBtn = document.getElementById('addBtn');

    addBtn.addEventListener('click', function() {
      const newParagraph = document.createElement('p');  // 새 <p> 요소 만들기
      newParagraph.textContent = '이 문장은 appendChild로 추가되었어요!'; // 텍스트 넣기
      container.appendChild(newParagraph); // container 안에 새 요소 추가
    });
  `
      }
},





        

    




{
  key: "jsDrag",
  title: "드래그 이벤트",
  bullets: [
    "`draggable='true'` 속성으로 요소를 드래그 가능하게 만듭니다.",
    "`ondragstart`, `ondragover`, `ondrop` 이벤트를 사용합니다.",
    "요소를 다른 영역으로 이동시키는 간단한 예제입니다."
  ],
  code: {
    html: `<div id="dragTarget" draggable="true" ondragstart="dragStart(event)">
  드래그하세요
</div>

<div id="dropZone" ondragover="allowDrop(event)" ondrop="drop(event)">
  여기에 놓기
</div>`,
    css: `#dragTarget {
  width: 120px;
  height: 50px;
  background-color: skyblue;
  text-align: center;
  line-height: 50px;
  cursor: grab;
  margin-bottom: 20px;
}

#dropZone {
  width: 150px;
  height: 100px;
  border: 2px dashed #aaa;
  text-align: center;
  line-height: 100px;
  color: gray;
}`,
    js: `function dragStart(event) {
  event.dataTransfer.setData("text", event.target.id);
}

function allowDrop(event) {
  event.preventDefault(); // 기본 동작 막기 (drop 허용)
}

function drop(event) {
  event.preventDefault();
  const data = event.dataTransfer.getData("text");
  const draggedElement = document.getElementById(data);
  event.target.appendChild(draggedElement);
}`
  }
},



{
  key: "jsOpenLinkViaButton",
  title: "버튼 클릭으로 a 태그 링크 열기 (onclick 사용)",
  bullets: [
    "버튼의 `onclick` 속성으로 클릭 이벤트 처리",
    "숨겨진 a 태그의 `click()` 메서드를 호출해서 링크 열기",
    "`target=\"_blank\"`로 새 창(탭)에서 열림",
    "간단한 이벤트 처리 방법"
  ],
  code: {
    html: `
<button id="openBtn" onclick="document.getElementById('myLink').click(); showMessage();">유튜브 열기</button>
<a id="myLink" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" style="display:none;">유튜브 링크</a>
<div id="result"></div>
    `,
    css: `
#result {
  margin-top: 10px;
  font-weight: bold;
}
    `,
    js: `
function showMessage() {
  document.getElementById("result").textContent = "링크를 새 창(탭)에서 열었습니다!";
}
    `
  }
},


{
  "key": "jsTablePersonListQuiz",
  "title": "퀴즈: 사람 여러 명을 등록하고 테이블로 출력해보세요!",
  "bullets": [
    "몇 명 등록할지 숫자를 먼저 입력받습니다.",
    "해당 수만큼 이름, 나이, 취미 등을 입력할 수 있게 폼을 만듭니다.",
    "객체로 각 사람 정보를 저장한 뒤 테이블로 보여주세요.",
    "`createElement`와 `appendChild`, `innerHTML`을 사용할 수 있어요!"
  ],
  code :{
  "html": `
    <input type="number" id="personCount" placeholder="몇 명 등록할까요?" />
    <button id="makeFormBtn">입력창 만들기</button>
    <form id="personFormArea"></form>
    <button id="submitBtn" style="display:none;">등록하기</button>
    <table border="1" id="personTable" style="margin-top:10px; display:none;">
      <thead>
        <tr>
          <th>성</th>
          <th>이름</th>
          <th>나이</th>
          <th>취미</th>
        </tr>
      </thead>
      <tbody id="tableBody"></tbody>
    </table>
  `,
  "css": "",
  "js": `
    function Person(lastName, firstName, age, hobby) {
      this.lastName = lastName;
      this.firstName = firstName;
      this.age = age;
      this.hobby = hobby;
    }

    const personCountInput = document.getElementById('personCount');
    const makeFormBtn = document.getElementById('makeFormBtn');
    const personFormArea = document.getElementById('personFormArea');
    const submitBtn = document.getElementById('submitBtn');
    const table = document.getElementById('personTable');
    const tableBody = document.getElementById('tableBody');

    makeFormBtn.addEventListener('click', function() {
      const count = Number(personCountInput.value);
      personFormArea.innerHTML = '';
      table.style.display = 'none';
      tableBody.innerHTML = '';
      submitBtn.style.display = 'inline';

      for (let i = 0; i < count; i++) {
        personFormArea.innerHTML += \`
          <div>
            <input placeholder="성" id="lastName-\${i}" />
            <input placeholder="이름" id="firstName-\${i}" />
            <input type="number" placeholder="나이" id="age-\${i}" />
            <input placeholder="취미" id="hobby-\${i}" />
          </div>
        \`;
      }
    });

    submitBtn.addEventListener('click', function() {
      const count = Number(personCountInput.value);
      tableBody.innerHTML = '';
      for (let i = 0; i < count; i++) {
        const lastName = document.getElementById('lastName-' + i).value;
        const firstName = document.getElementById('firstName-' + i).value;
        const age = document.getElementById('age-' + i).value;
        const hobby = document.getElementById('hobby-' + i).value;

        const person = new Person(lastName, firstName, age, hobby);

        const row = document.createElement('tr');
        row.innerHTML = \`
          <td>\${person.lastName}</td>
          <td>\${person.firstName}</td>
          <td>\${person.age}</td>
          <td>\${person.hobby}</td>
        \`;
        tableBody.appendChild(row);
      }
      table.style.display = 'table';
    });
  `
  }
},



{
  key: "jsSvgFollowMouseQuiz",
  title: "퀴즈: svg로 원을 하나 만든 뒤, 이 원이 마우스를 따라다니게 해보세요!",
  bullets: [
    "SVG 내에 원(`<circle>`)을 생성합니다.",
    "마우스가 움직일 때마다 원의 중심(cx, cy)을 마우스 좌표로 업데이트합니다.",
    "이벤트 리스너로 `mousemove`를 사용합니다.",
    "SVG 좌표계와 마우스 좌표계를 맞추는 점에 주의하세요."
  ],
  code: {
  html: `
    <svg id="mySvg" width="300" height="200" style="border:1px solid #ccc;">
      <circle id="myCircle" cx="150" cy="100" r="20" fill="tomato" />
    </svg>
  `,
  css: ``,
  js: `
    const svg = document.getElementById('mySvg');
    const circle = document.getElementById('myCircle');
    
    svg.addEventListener('mousemove', e => {
      // SVG 내부 좌표 얻기
      const pt = svg.createSVGPoint();
      pt.x = e.clientX;
      pt.y = e.clientY;
      const svgP = pt.matrixTransform(svg.getScreenCTM().inverse());
      
      circle.setAttribute('cx', svgP.x);
      circle.setAttribute('cy', svgP.y);
    });
  `
}
}












		


      ]

		};
	},
  computed: {
    currentSlide() {
      return this.slides.find(slide => slide.key === this.currentKey) || {};
    },
    currentCode() {
      return this.currentSlide.code || { html: '', css: '', js: '' };
    }
  },
	methods: {
		goSlide(number) {
      if (this.deck) {
        this.deck.slide(number);
      } else {
        console.error("Reveal 인스턴스가 초기화되지 않았습니다.");
      }
		},
    onCodeUpdate({ html, css, js }) {
      const slide = this.slides.find(s => s.key === this.currentKey);
      if (slide) {
        slide.code = { html, css, js };
        this.updateCodeBlock(Reveal.getCurrentSlide());
      }
    },
    updateCodeBlock(slide) {
      if (!slide) return;
      const key = slide.dataset.key;
      if (!key) return;
      this.currentKey = key;

      const current = this.slides.find(s => s.key === key);
      if (!current) return;

      const codeEl = slide.querySelector("code.language-html");
      if (codeEl) {
        codeEl.textContent = current.code?.html || '';
        if (window.hljs) hljs.highlightElement(codeEl);
      }
      const cssEl = slide.querySelector("code.language-css");
      if (cssEl) {
        cssEl.textContent = current.code?.css || '';
        if (window.hljs) hljs.highlightElement(cssEl);
      }
      const jsEl = slide.querySelector("code.language-javascript");
      if (jsEl) {
        jsEl.textContent = current.code?.js || '';
        if (window.hljs) hljs.highlightElement(jsEl);
      }    
    },
    
	},
	mounted() {
		// ✅ 3. ref로 지정한 DOM 엘리먼트를 넘겨주고, 인스턴스를 this.deck에 저장합니다.
    this.deck = initializeReveal(this.$refs.revealRef, false);
    

    // 약간 지연 시켜서 초기 렌더링 이후 실행
    setTimeout(() => {
      // ✅ 수정 후: 우리가 마운트할 때 만든 인스턴스(this.deck) 호출
      const slide = this.deck.getCurrentSlide();
      
      this.currentKey = slide?.dataset?.key || '';
      this.updateCodeBlock(slide);
    }, 100);

    // ✅ 4. 전역 Reveal.addEventListener 대신 인스턴스의 on 메서드 사용
		this.deck.on('slidechanged', (event) => {
      this.updateCodeBlock(event.currentSlide);
    });
	},
  unmounted() {
        // ✅ 5. 여기가 핵심! 페이지를 벗어날 때 Reveal 객체를 메모리에서 완전히 파괴합니다.
        if (this.deck) {
            this.deck.destroy();
        }
    }

};
</script>

<style scoped>
/* @import url('@/assets/js/plugins/reveal-js/css/reset.css'); */
@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/github.css');
@import url('@/assets/js/plugins/reveal-js/plugin/chalkboard/style.css');
@import url('@/assets/js/plugins/reveal-js/plugin/customcontrols/style.css');
@import url('@/assets/js/plugins/reveal-js/plugin/menu/menu.css');
@import url('@/assets/css/reveal-lecture.css');


.layout {
  display: flex;
  flex-direction: row;
  height: 100vh; /* 전체 높이 채우기 */
}

.reveal {
  flex: 0 0 60%;
  /* overflow: auto; */
  transition: flex-basis 0.3s ease;
}
.code-editor-wrapper {
  flex: 0 0 40%;
  border-left: 1px solid #ccc;
  overflow: auto;
  transition: width 0.3s ease;
}

/* 접혔을 때 */
.layout.code-collapsed .reveal {
  flex-basis: 100%;
}
.layout.code-collapsed .code-editor-wrapper {
  flex-basis: 40px; /* 접힌 상태 너비 */
  width: auto; /* 핵심: 최소 크기 유지 */
}


/* 코드 블록 전체 스타일 오버라이드 */
.reveal pre code {
  height: 150px;
  font-size: 1.3rem;         /* 폰트 크기 키움 */
  line-height: 1.6;
  /*background: #f9f9f9 !important;   밝은 회색 배경 */
  color: #333 !important;    /* 진한 글자색 */
  padding: 1rem;
  border-radius: 8px;
  font-family: 'Fira Code', 'Courier New', monospace;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.reveal section ul li {
  font-size: 1.7rem; /* 원하는 크기로 조절 가능 */
  line-height: 1.6;
}

</style>