{"id":1164,"date":"2025-06-19T23:59:00","date_gmt":"2025-06-19T14:59:00","guid":{"rendered":"https:\/\/dod77.synology.me\/wordpress\/?p=1164"},"modified":"2026-04-01T19:31:43","modified_gmt":"2026-04-01T10:31:43","slug":"%ec%a7%9d-%eb%a7%9e%ec%b6%94%ea%b8%b0-%ea%b2%8c%ec%9e%84-v2","status":"publish","type":"post","link":"https:\/\/dod77.synology.me\/wordpress\/1164\/","title":{"rendered":"\ud55c\uc790 \uc9dd \ub9de\ucd94\uae30 \uac8c\uc784"},"content":{"rendered":"\n<div class=\"jk-game-board-container\" id=\"jk-gameBoardContainer\">\n  <div class=\"jk-game-board\" id=\"jk-gameBoard\">\n    <div id=\"jk-inputContainer\">\n      <textarea id=\"jk-userInput\" placeholder=\"\ucd5c\ub300 100\uc790\uc758 \uae00\uc790\ub97c \uc785\ub825\ud558\uc138\uc694 (\uc9dd \ub9de\ucd94\uae30)\"><\/textarea>\n      <label for=\"jk-charCountSelect\">\uc0ac\uc6a9\ud560 \uae00\uc790 \uc218:<\/label>\n        <input type=\"number\" id=\"jk-charCountSelect\" min=\"1\" max=\"25\" value=\"10\">\n      <button id=\"jk-playButton\" class=\"jk-button\">\ud50c\ub808\uc774<\/button>\n    <\/div>\n\n    <div id=\"jk-cardGrid\" style=\"display: none;\"><\/div>\n\n    <div id=\"jk-topControls\">\n      <div class=\"jk-button-group\">\n        <button id=\"jk-fullscreenButton\" class=\"jk-button\">\uc804\uccb4 \ud654\uba74<\/button>\n        <button id=\"jk-restartButton\" class=\"jk-button\">\ub2e4\uc2dc\ud558\uae30<\/button>\n        <button id=\"jk-retryButton\" class=\"jk-button\">\uce74\ub4dc \uadf8\ub300\ub85c \ub2e4\uc2dc\ud558\uae30<\/button>\n        <button id=\"jk-homeButton\" class=\"jk-button\">\ucc98\uc74c\uc73c\ub85c<\/button>\n        <button id=\"jk-toggleFlipButton\" class=\"jk-button\">\uce74\ub4dc \ub4a4\uc9d1\uae30<\/button>\n        <div style=\"font-weight: bold;\">\n          <span id=\"jk-wrongCountDisplay\">\ud2c0\ub9b0 \ud69f\uc218: 0<\/span> |\n          <span id=\"jk-timeDisplay\">\uacbd\uacfc \uc2dc\uac04: 00:00<\/span>\n        <\/div>\n        <button id=\"jk-musicButton\" class=\"jk-music-button\">\u25b6<\/button>\n        <input type=\"range\" id=\"jk-cardSizeSlider\" min=\"60\" max=\"250\" value=\"100\">\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n#jk-cardSizeSlider {\n  width: 120px;\n  accent-color: #000;\n}\n\n.jk-game-board-container {\n  width: 100%;\n  max-width: 100vw;\n  padding-top: 46.875%;\n  position: relative;\n  margin: 0 auto;\n}\n\n.jk-game-board {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: #fff8dc;\n  border: 2px solid #000;\n  border-radius: 15px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 20px;\n  font-family: sans-serif;\n  overflow: auto;\n}\n\n#jk-inputContainer {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 20px;\n}\n\n#jk-userInput {\n  width: 80%;\n  height: 100px;\n  padding: 10px;\n  font-size: 1.2em;\n  border: 2px solid #000;\n  border-radius: 10px;\n  resize: none;\n}\n\n#jk-cardGrid {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 10px;\n  max-width: 90%;\n}\n\n.card {\n  width: 100px;\n  height: 150px;\n  perspective: 1000px;\n  cursor: pointer;\n}\n\n.card-inner {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  transition: transform 0.6s;\n  transform-style: preserve-3d;\n}\n\n.card.flipped .card-inner {\n  transform: rotateY(180deg);\n}\n\n.card-front, .card-back {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  backface-visibility: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: bold;\n  border: 2px solid #000;\n  border-radius: 10px;\n}\n\n.card-front {\n  background-color: #444;\n  color: #fff;\n}\n\n.card-back {\n  background-color: #fff;\n  color: #000;\n  transform: rotateY(180deg);\n}\n\n.jk-button {\n  padding: 10px 20px;\n  border: 2px solid #000;\n  border-radius: 10px;\n  cursor: pointer;\n  font-size: 1em;\n  background-color: #87cefa;\n  color: #000;\n}\n\n#jk-topControls {\n  position: absolute;\n  top: 10px;\n  left: 10px;\n  z-index: 10;\n}\n\n.jk-button-group {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n}\n\n.jk-music-button {\n  font-size: 1.5em;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 6px 10px;\n  line-height: 1;\n}\n\n.card-number-corner {\n  position: absolute;\n  top: -10px;\n  left: 8px;\n  font-size: 0.6em;\n  font-weight: bold;\n  opacity: 0.6;\n  pointer-events: none;\n}\n\n.card.matched .card-back {\n  background-color: lightgreen;\n  color: #000;\n}\n\n<\/style>\n\n<script>\n  \/\/ \u2705 \ubcf5\uc81c \ubc29\uc9c0\uc6a9: \uc624\ud504\ub77c\uc778 \ub610\ub294 \uc678\ubd80 \ub3c4\uba54\uc778\uc5d0\uc11c \uc2e4\ud589 \uc911\uc9c0\n  if (location.protocol === 'file:' || !location.hostname.includes('dod77.synology.me')) {\n    alert('\u26a0\ufe0f \uc774 \uac8c\uc784\uc740 \uacf5\uc2dd \uc0ac\uc774\ud2b8\uc5d0\uc11c\ub9cc \uc2e4\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.');\n    document.body.innerHTML = '<h2 style=\"text-align:center; margin-top:50px;\">\uc624\ud504\ub77c\uc778\uc5d0\uc11c\ub294 \uc2e4\ud589\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.<\/h2>';\n    throw new Error('\ucc28\ub2e8: \uc624\ud504\ub77c\uc778 \ub610\ub294 \uc678\ubd80 \ub3c4\uba54\uc778\uc5d0\uc11c\uc758 \uc2e4\ud589\uc744 \ubc29\uc9c0\ud569\ub2c8\ub2e4.');\n  }\n\ndocument.addEventListener('DOMContentLoaded', () => {\n  const cardSizeSlider = document.getElementById('jk-cardSizeSlider');\n  const userInput = document.getElementById('jk-userInput');\n  const playButton = document.getElementById('jk-playButton');\n  const cardGrid = document.getElementById('jk-cardGrid');\n  const inputContainer = document.getElementById('jk-inputContainer');\n  const restartButton = document.getElementById('jk-restartButton');\n  const homeButton = document.getElementById('jk-homeButton');\n  const fullscreenButton = document.getElementById('jk-fullscreenButton');\n  const musicButton = document.getElementById('jk-musicButton');\n  const gameContainer = document.getElementById('jk-gameBoardContainer');\n  const toggleFlipButton = document.getElementById('jk-toggleFlipButton');\n  const retryButton = document.getElementById('jk-retryButton');\n  const wrongCountDisplay = document.getElementById('jk-wrongCountDisplay');\n  const timeDisplay = document.getElementById('jk-timeDisplay');\n  \n  let isAllFlipped = false;\n  let wrongCount = 0;\n  let startTime = null;\n  let timerInterval = null;\n  let currentCardOrder = [];  \/\/ \ud604\uc7ac \uc11e\uc778 \uce74\ub4dc \ubc30\uc5f4\uc744 \uc800\uc7a5\n  let userCharacters = [];\n  let firstCard = null;\n  let secondCard = null;\n  let lockBoard = false;\n  let matchedCount = 0;\n\n  \/\/ \ud83d\udc51 \ud504\ub9ac\ubbf8\uc5c4 \uc0c1\ud0dc \ud655\uc778 \ubc0f \ubaa8\ub2ec \ud638\ucd9c \ud568\uc218\n  const isPremiumUser = (typeof JK_USER_CAN_USE_HANJA !== 'undefined' && JK_USER_CAN_USE_HANJA === true);\n  const FREE_MAX_CARDS = 5; \/\/ \ubb34\ub8cc \uc0ac\uc6a9\uc790\ub294 \ucd5c\ub300 5\uac1c(10\uc7a5)\uae4c\uc9c0\ub9cc \ud5c8\uc6a9\n\n  function triggerPremiumModal(message) {\n    if (typeof window.openPremiumModal === 'function') {\n      window.openPremiumModal(); \/\/ 1244\ubc88\uc5d0 \uc788\ub294 \ubaa8\ub2ec \ub744\uc6b0\uae30\n    } else {\n      alert(message || '\ud504\ub9ac\ubbf8\uc5c4 \uc804\uc6a9 \uae30\ub2a5\uc785\ub2c8\ub2e4.');\n    }\n  }\n\n  \/\/ UI \ucd08\uae30\ud654: \ubb34\ub8cc \uc0ac\uc6a9\uc790\uc5d0\uac8c \ud504\ub9ac\ubbf8\uc5c4 \uc81c\ud55c \uc548\ub0b4 \ud45c\uc2dc\n  if (!isPremiumUser) {\n    document.getElementById('jk-charCountSelect').setAttribute('max', FREE_MAX_CARDS);\n    userInput.setAttribute('placeholder', `\ucd5c\ub300 100\uc790 \uc785\ub825 (\ubb34\ub8cc \ud68c\uc6d0\uc740 \ucd5c\ub300 ${FREE_MAX_CARDS}\uac1c \uae00\uc790\ub9cc \uc0ac\uc6a9 \uac00\ub2a5)`);\n    retryButton.innerHTML = '\uce74\ub4dc \uadf8\ub300\ub85c \ub2e4\uc2dc\ud558\uae30 <span style=\"font-size:0.7em; color:#d33;\">(P)<\/span>';\n    toggleFlipButton.innerHTML = '\uce74\ub4dc \ub4a4\uc9d1\uae30 <span style=\"font-size:0.7em; color:#d33;\">(P)<\/span>';\n    \/\/ \uc804\uccb4 \ud654\uba74 \ubc43\uc9c0\ub294 \uc0ad\uc81c\n  }\n\n  \/\/ 1. [\uc81c\ud55c] \uce74\ub4dc \uadf8\ub300\ub85c \ub2e4\uc2dc\ud558\uae30\n  retryButton.addEventListener('click', () => {\n    if (!isPremiumUser) {\n      triggerPremiumModal('\ub3d9\uc77c\ud55c \ubc30\uce58\ub85c \ub2e4\uc2dc\ud558\uae30\ub294 \ud504\ub9ac\ubbf8\uc5c4 \uc804\uc6a9 \uae30\ub2a5\uc785\ub2c8\ub2e4.');\n      return;\n    }\n\n    if (currentCardOrder.length === 0) return;\n\n    resetTimer();\n    matchedCount = 0;\n    wrongCount = 0;\n    wrongCountDisplay.textContent = '\ud2c0\ub9b0 \ud69f\uc218: 0';\n    cardGrid.innerHTML = '';\n    firstCard = null;\n    secondCard = null;\n    lockBoard = false;\n\n    currentCardOrder.forEach((char, index) => {\n      const card = createCardElement(char, index);\n      cardGrid.appendChild(card);\n    });\n\n    applyCardSizes();\n  });\n\n  \/\/ 2. [\uc81c\ud55c] \uce74\ub4dc \ub4a4\uc9d1\uae30 (\uc804\uccb4 \uc55e\uba74 \ubcf4\uae30)\n  toggleFlipButton.addEventListener('click', () => {\n    if (!isPremiumUser) {\n      triggerPremiumModal('\ubaa8\ub4e0 \uce74\ub4dc \uc55e\uba74 \ubcf4\uae30\ub294 \ud504\ub9ac\ubbf8\uc5c4 \uc804\uc6a9(\ud78c\ud2b8) \uae30\ub2a5\uc785\ub2c8\ub2e4.');\n      return;\n    }\n\n    document.querySelectorAll('.card').forEach(card => {\n      const isMatched = card.classList.contains('matched');\n      if (!isMatched) {\n        if (isAllFlipped) {\n          card.classList.remove('flipped');\n        } else {\n          card.classList.add('flipped');\n        }\n      }\n    });\n    isAllFlipped = !isAllFlipped;\n  });\n\n  \/\/ 3. \uc804\uccb4 \ud654\uba74 (\ubaa8\ub450 \uc0ac\uc6a9 \uac00\ub2a5)\n  fullscreenButton.addEventListener('click', () => {\n    if (!document.fullscreenElement) {\n      gameContainer.requestFullscreen().catch(err => alert(err.message));\n    } else {\n      document.exitFullscreen();\n    }\n  });\n\n  \/\/ 4. [\uc81c\ud55c] \uc0ac\uc6a9\ud560 \uae00\uc790 \uc218 \uc81c\ud55c (\ud50c\ub808\uc774 \ubc84\ud2bc)\n  playButton.addEventListener('click', () => {\n    handleGameStart();\n  });\n\n  \/\/ 4. [\uc81c\ud55c] \uc0ac\uc6a9\ud560 \uae00\uc790 \uc218 \uc81c\ud55c (\ub2e4\uc2dc\ud558\uae30 \ubc84\ud2bc - \uc11e\uc5b4\uc11c \uc0c8\ub85c)\n  restartButton.addEventListener('click', () => {\n    handleGameStart(true);\n  });\n\n  function handleGameStart(isRestart = false) {\n    const text = userInput.value.trim().replace(\/\\s+\/g, '');\n    const countInput = document.getElementById('jk-charCountSelect');\n    let count = parseInt(countInput.value);\n\n    if (text.length === 0 || text.length > 100 || isNaN(count) || count < 1 || count > 25) {\n      alert('\uc785\ub825\uac12\uc774 \uc62c\ubc14\ub974\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. (1~25\uac1c \uc124\uc815 \uac00\ub2a5)');\n      return;\n    }\n\n    \/\/ \ud83d\udc51 \ud504\ub9ac\ubbf8\uc5c4 \uae00\uc790 \uc218 \uc81c\ud55c \ub85c\uc9c1\n    if (!isPremiumUser && count > FREE_MAX_CARDS) {\n      triggerPremiumModal(`\ubb34\ub8cc \ubc84\uc804\uc740 \ucd5c\ub300 ${FREE_MAX_CARDS}\uac1c\uc758 \uae00\uc790(10\uc7a5)\uae4c\uc9c0\ub9cc \uc9dd\ub9de\ucd94\uae30\uac00 \uac00\ub2a5\ud569\ub2c8\ub2e4.`);\n      countInput.value = FREE_MAX_CARDS; \/\/ \uc785\ub825\uac12\uc744 \ud5c8\uc6a9\uce58\ub85c \uac15\uc81c \ubcc0\uacbd\n      return;\n    }\n\n    const totalChars = [...text];\n    const uniqueChars = [...new Set(totalChars)];\n\n    if (count > uniqueChars.length) {\n      alert(`\uc785\ub825\ub41c \uc911\ubcf5 \uc5c6\ub294 \uae00\uc790 \uc218\uac00 ${count}\uac1c\ubcf4\ub2e4 \uc801\uc2b5\ub2c8\ub2e4.`);\n      return;\n    }\n\n    if (isRestart) resetTimer();\n\n    const selectedChars = pickRandomChars(uniqueChars, count);\n\n    \/\/ \ubcf4\uc548 \ud1a0\ud070 \ud655\uc778\n    let currentNonce = '';\n    if (typeof jk_game_nonce !== 'undefined') {\n      currentNonce = jk_game_nonce;\n    } else if (typeof wpApiSettings !== 'undefined') {\n      currentNonce = wpApiSettings.nonce;\n    }\n\n    fetch('\/wordpress\/wp-json\/game\/v1\/validate', {\n      method: 'POST',\n      headers: { \n        'Content-Type': 'application\/json',\n        'X-WP-Nonce': currentNonce\n      },\n      body: JSON.stringify({ input: selectedChars.join('') })\n    })\n      .then(response => response.json())\n      .then(data => {\n        if (data.allow && Array.isArray(data.characters)) {\n          userCharacters = data.characters;\n          startGame();\n        } else {\n          alert('\uc11c\ubc84\uc5d0\uc11c \uc785\ub825\uc774 \uac70\ubd80\ub418\uc5c8\uc2b5\ub2c8\ub2e4.');\n        }\n      })\n      .catch(err => {\n        alert('\uc11c\ubc84 \ud1b5\uc2e0 \uc624\ub958: ' + err.message);\n      });\n  }\n\n  \/\/ \uac8c\uc784 \uc694\uc18c \uc0dd\uc131 \ud5ec\ud37c \ud568\uc218\n  function createCardElement(char, index) {\n    const card = document.createElement('div');\n    card.classList.add('card');\n    card.dataset.value = char;\n\n    const inner = document.createElement('div');\n    inner.classList.add('card-inner');\n\n    const front = document.createElement('div');\n    front.classList.add('card-front');\n    front.textContent = String(index + 1);\n\n    const back = document.createElement('div');\n    back.classList.add('card-back');\n    back.textContent = char;\n\n    const numberInCorner = document.createElement('span');\n    numberInCorner.classList.add('card-number-corner');\n    numberInCorner.textContent = String(index + 1);\n    back.appendChild(numberInCorner);\n\n    inner.appendChild(front);\n    inner.appendChild(back);\n    card.appendChild(inner);\n\n    card.addEventListener('click', () => handleCardClick(card));\n    return card;\n  }\n\n  function applyCardSizes() {\n    const width = parseInt(cardSizeSlider.value);\n    const height = Math.round(width * 1.5);\n    document.querySelectorAll('.card').forEach(card => {\n      card.style.width = width + 'px';\n      card.style.height = height + 'px';\n    });\n    updateCardFontSizes();\n  }\n\n  \/\/ \uae30\ud0c0 \uae30\uc874 \uac8c\uc784 \ub85c\uc9c1\ub4e4 (\ubcc0\uacbd \uc5c6\uc74c)\n  const musicFiles = [\n    \"(I've Got A) Baby Sister - Reed Mathis.mp3\",\n    \"Birthday Cake - Reed Mathis.mp3\",\n    \"Calimba - E's Jammy Jams.mp3\",\n    \"Good Morning! - Reed Mathis.mp3\",\n    \"Kazoom - Quincas Moreira.mp3\",\n    \"My Dog Is Happy - Reed Mathis.mp3\",\n    \"Sunny Day - Reed Mathis.mp3\",\n    \"Try To Catch Me - Reed Mathis.mp3\"\n  ];\n  const musicFolderPath = 'https:\/\/dod77.synology.me\/wordpress\/wp-content\/themes\/oceanwp\/customgamecode\/music\/background\/';\n  const effectSoundPath = 'https:\/\/dod77.synology.me\/wordpress\/wp-content\/themes\/oceanwp\/customgamecode\/music\/effect\/turnpage-99756.mp3';\n\n  let audio = new Audio();\n  let effectAudio = new Audio(effectSoundPath);\n  effectAudio.volume = 0.5;\n  let isPlaying = false;\n\n  function pickRandomChars(array, count) {\n    const result = [];\n    const used = new Set();\n    while (true) {\n      if (result.length >= count) break;\n      if (used.size >= array.length) break;\n      const i = Math.floor(Math.random() * array.length);\n      if (!used.has(i)) { result.push(array[i]); used.add(i); }\n    }\n    return result;\n  }\n\n  function updateCardFontSizes() {\n    const width = parseInt(cardSizeSlider.value);\n    const fontSize = width * 0.5;\n    document.querySelectorAll('.card-front, .card-back').forEach(face => {\n      face.style.fontSize = fontSize + 'px';\n    });\n  }\n  \n  function startTimer() {\n    startTime = Date.now();\n    timerInterval = setInterval(() => {\n      const elapsed = Date.now() - startTime;\n      const seconds = Math.floor(elapsed \/ 1000) % 60;\n      const minutes = Math.floor(elapsed \/ 1000 \/ 60);\n      timeDisplay.textContent = `\uacbd\uacfc \uc2dc\uac04: ${pad(minutes)}:${pad(seconds)}`;\n    }, 1000);\n  }\n\n  function stopTimer() { clearInterval(timerInterval); timerInterval = null; }\n  function resetTimer() { stopTimer(); timeDisplay.textContent = '\uacbd\uacfc \uc2dc\uac04: 00:00'; }\n  function pad(n) { return n.toString().padStart(2, '0'); }\n\n  function checkForMatch() {\n    const isMatch = firstCard.dataset.value === secondCard.dataset.value;\n    if (isMatch) {\n      matchedCount += 1;\n      firstCard.classList.add('matched');\n      secondCard.classList.add('matched');\n      firstCard = null;\n      secondCard = null;\n\n      if (matchedCount === userCharacters.length) {\n        stopTimer();\n        setTimeout(() => { alert('\ud83c\udf89 \ucd95\ud558\ud569\ub2c8\ub2e4! \ubaa8\ub4e0 \uc9dd\uc744 \ub9de\ucdc4\uc5b4\uc694!'); }, 500);\n      }\n    } else {\n      wrongCount++;\n      wrongCountDisplay.textContent = `\ud2c0\ub9b0 \ud69f\uc218: ${wrongCount}`;\n      lockBoard = true;\n      setTimeout(() => {\n        firstCard.classList.remove('flipped');\n        secondCard.classList.remove('flipped');\n        firstCard = null;\n        secondCard = null;\n        lockBoard = false;\n      }, 1000);\n    }\n  }\n\n  function startGame() {\n    wrongCount = 0;\n    wrongCountDisplay.textContent = '\ud2c0\ub9b0 \ud69f\uc218: 0';\n    resetTimer();\n\n    const duplicated = [...userCharacters, ...userCharacters];\n    const shuffled = shuffleArray(duplicated);\n    currentCardOrder = [...shuffled];\n    cardGrid.innerHTML = '';\n    inputContainer.style.display = 'none';\n    cardGrid.style.display = 'flex';\n    matchedCount = 0;\n\n    playRandomMusic();\n\n    shuffled.forEach((char, index) => {\n      const card = createCardElement(char, index);\n      cardGrid.appendChild(card);\n    });\n    applyCardSizes();\n  }\n\n  function shuffleArray(array) {\n    for (let i = array.length - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      [array[i], array[j]] = [array[j], array[i]];\n    }\n    return array;\n  }\n\n  function handleCardClick(card) {\n    if (lockBoard || card.classList.contains('flipped')) return;\n    card.classList.add('flipped');\n    effectAudio.currentTime = 0;\n    effectAudio.play();\n\n    if (!firstCard) {\n      firstCard = card;\n      if (!timerInterval) startTimer();\n    } else {\n      secondCard = card;\n      checkForMatch();\n    }\n  }\n\n  homeButton.addEventListener('click', () => {\n    resetTimer();\n    stopMusic();\n    userCharacters = [];\n    firstCard = null;\n    secondCard = null;\n    cardGrid.innerHTML = '';\n    cardGrid.style.display = 'none';\n    inputContainer.style.display = 'flex';\n  });\n\n  document.addEventListener('fullscreenchange', () => {\n    \/\/ \ud480\uc2a4\ud06c\ub9b0 \ubc84\ud2bc \ud14d\uc2a4\ud2b8 \ub2e8\uc21c \ubcc0\uacbd\n    const isFull = document.fullscreenElement;\n    fullscreenButton.innerHTML = isFull ? '\uc804\uccb4 \ud654\uba74 \uc885\ub8cc' : '\uc804\uccb4 \ud654\uba74';\n  });\n\n  function playRandomMusic() {\n    const index = Math.floor(Math.random() * musicFiles.length);\n    audio.src = musicFolderPath + musicFiles[index];\n    audio.volume = 0.2;\n    audio.play();\n    isPlaying = true;\n    musicButton.textContent = '\u23f8';\n  }\n\n  function stopMusic() {\n    audio.pause();\n    audio.currentTime = 0;\n    isPlaying = false;\n    musicButton.textContent = '\u25b6';\n  }\n\n  musicButton.addEventListener('click', () => {\n    if (isPlaying) { audio.pause(); musicButton.textContent = '\u25b6'; } \n    else { audio.play(); musicButton.textContent = '\u23f8'; }\n    isPlaying = !isPlaying;\n  });\n  \n  cardSizeSlider.addEventListener('input', applyCardSizes);\n\n});\n<\/script>\n\n\n\n<br><br>\n<div style=\"max-width: 800px; margin: auto; font-family: 'Arial', sans-serif; line-height: 1.8; font-size: 1.1em; background: #fff8dc; padding: 20px; border-radius: 10px; border: 2px solid #ccc;\">\n  <h2 style=\"text-align: center;\">\ud83c\udccf \uc9dd \ub9de\ucd94\uae30 \uac8c\uc784 \uc774\uc6a9 \uc548\ub0b4<\/h2>\n\n  <p><strong>\ub3c4\ub4ec\ub3cc \uc9dd \ub9de\ucd94\uae30 \uac8c\uc784<\/strong>\uc740 \uc785\ub825\ud55c \uae00\uc790\ub4e4\uc744 \uc11e\uc5b4\uc11c \uac19\uc740 \uae00\uc790\ub97c \ucc3e\uc544 \uc9dd\uc744 \ub9de\ucd94\ub294 \uc7ac\ubbf8\uc788\ub294 \uae30\uc5b5\ub825 \uac8c\uc784\uc785\ub2c8\ub2e4. <br>\uc774 \ud398\uc774\uc9c0\ub294 \uc544\uc774\ub4e4\uc744 \uc704\ud55c \uc218\uc5c5\uc6a9 \ud65c\ub3d9\uc73c\ub85c \uad6c\uc131\ub418\uc5b4, \ub178\ud2b8\ubd81\uc774\ub098 \ud0dc\ube14\ub9bf\uc5d0\uc11c \ucd5c\uc801\uc758 \ud654\uba74\uc73c\ub85c \uc2e4\ud589\ub429\ub2c8\ub2e4. \uac8c\uc784 \uc2dc\uc791 \uc804 <strong>\uc804\uccb4\ud654\uba74 \ubc84\ud2bc<\/strong>\uc744 \ub204\ub974\uc138\uc694.<\/p>\n\n  <hr>\n\n  <h3>\ud83c\udfae \uac8c\uc784 \ubc29\ubc95<\/h3>\n  <ol>\n    <li><strong>\uc785\ub825\ucc3d<\/strong>\uc5d0 \ucd5c\ub300 <strong>25\uc790<\/strong> \uc774\ub0b4\uc758 \uae00\uc790\ub97c \uc785\ub825\ud569\ub2c8\ub2e4.<br>\n        \uc608\uc2dc: <code>\u65e5\u6708\u5c71\u6c34\u706b\u6728\u91d1\u571f\u4eba\u5b50\u5973\u5927\u5c0f\u4e2d\u4e0a\u4e0b<\/code><\/li>\n    <li><strong>\u26a0\ufe0f <u>\uba3c\uc800 &#8220;\uc804\uccb4 \ud654\uba74&#8221; \ubc84\ud2bc<\/u><\/strong>\uc744 \ub20c\ub7ec \uc8fc\uc138\uc694.<br>\n        \uc804\uccb4\ud654\uba74\uc73c\ub85c \uc2e4\ud589\ud558\uba74 \uce74\ub4dc\uac00 \ub354 \ub113\uac8c \ubcf4\uc5ec\uc9c0\uace0, \uac8c\uc784\uc774 \ub354\uc6b1 \ud3b8\ud558\uac8c \uc9c4\ud589\ub429\ub2c8\ub2e4.<\/li>\n    <li>\uc785\ub825\uc744 \ub9c8\uce5c \ud6c4 <strong>\u201c\ud50c\ub808\uc774\u201d \ubc84\ud2bc<\/strong>\uc744 \ub204\ub974\uba74 \uce74\ub4dc\uac00 \uc0dd\uc131\ub429\ub2c8\ub2e4.<\/li>\n    <li>\uce74\ub4dc\ub97c \ud074\ub9ad\ud574\uc11c <strong>\uac19\uc740 \uae00\uc790 \uc9dd<\/strong>\uc744 \ucc3e\uc544 \ub4a4\uc9d1\uc73c\uc138\uc694.<\/li>\n    <li>\ubaa8\ub4e0 \uc9dd\uc744 \ub9de\ucd94\uba74 \uac8c\uc784\uc774 \uc885\ub8cc\ub418\uace0, <strong>\ucd95\ud558 \uba54\uc2dc\uc9c0<\/strong>\uac00 \ud45c\uc2dc\ub429\ub2c8\ub2e4!<\/li>\n  <\/ol>\n\n  <hr>\n\n  <h3>\ud83d\udee0\ufe0f \uc8fc\uc694 \uae30\ub2a5<\/h3>\n  <ul>\n    <li><strong>\uc804\uccb4 \ud654\uba74<\/strong> : \uce74\ub4dc\uac00 \ub354 \ud06c\uac8c \ubcf4\uc5ec\uc9c0\ub294 \ubaa8\ub4dc\ub85c \uc804\ud658\ud569\ub2c8\ub2e4.<\/li>\n    <li><strong>\ub2e4\uc2dc\ud558\uae30<\/strong> : \uce74\ub4dc \ubc30\uc5f4\uc744 \uc0c8\ub85c \uc11e\uc5b4\uc11c \ucc98\uc74c\ubd80\ud130 \uc2dc\uc791\ud569\ub2c8\ub2e4.<\/li>\n    <li><strong>\uce74\ub4dc \uadf8\ub300\ub85c \ub2e4\uc2dc\ud558\uae30<\/strong> : \ud604\uc7ac \uce74\ub4dc \ubc30\uc5f4 \uadf8\ub300\ub85c \ub2e4\uc2dc \uc2dc\uc791\ud569\ub2c8\ub2e4.<\/li>\n    <li><strong>\uce74\ub4dc \ub4a4\uc9d1\uae30<\/strong> : \ubaa8\ub4e0 \uce74\ub4dc\ub97c \ud55c \ubc88\uc5d0 \ub4a4\uc9d1\uac70\ub098 \ub2e4\uc2dc \uac00\ub9bd\ub2c8\ub2e4.<\/li>\n    <li><strong>\ud83c\udfb5 \uc74c\uc545 \ubc84\ud2bc<\/strong> : \ubc30\uacbd \uc74c\uc545\uc744 \uc7ac\uc0dd\ud558\uac70\ub098 \uc815\uc9c0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n    <li><strong>\uce74\ub4dc \ud06c\uae30 \uc870\uc808<\/strong> : \uc2ac\ub77c\uc774\ub354\ub97c \uc774\uc6a9\ud574 \uce74\ub4dc\uc758 \ud06c\uae30\ub97c \uc870\uc808\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n  <\/ul>\n\n  <hr>\n\n  <h3>\ud83d\udccc \ucc38\uace0 \uc0ac\ud56d<\/h3>\n  <ul>\n    <li>\uc785\ub825\ud55c \uae00\uc790\ub294 \uc790\ub3d9\uc73c\ub85c <strong>\ub450 \ubc88\uc529 \ubcf5\uc81c<\/strong>\ub418\uc5b4 \uce74\ub4dc\ub85c \ub9cc\ub4e4\uc5b4\uc9d1\ub2c8\ub2e4.<\/li>\n    <li>\uc798\ubabb\ub41c \uc9dd\uc744 \ud074\ub9ad\ud558\uba74 <strong>\ud2c0\ub9b0 \ud69f\uc218<\/strong>\uac00 \uc99d\uac00\ud558\uba70, \uae30\ub85d\ub429\ub2c8\ub2e4.<\/li>\n    <li>\ud0c0\uc774\uba38\ub294 <strong>\uccab \uce74\ub4dc\ub97c \ub4a4\uc9d1\uc740 \uc21c\uac04\ubd80\ud130<\/strong> \uc2dc\uc791\ub429\ub2c8\ub2e4.<\/li>\n  <\/ul>\n\n  <p style=\"text-align: center; font-size: 1.2em; margin-top: 30px;\"><strong>\ud83c\udf89 \uc9d1\uc911\ub825\uacfc \uae30\uc5b5\ub825\uc744 \ud0a4\uc6b0\ub294 \ub3c4\ub4ec\ub3cc \uc9dd \ub9de\ucd94\uae30 \uac8c\uc784! \uc9c0\uae08 \ub3c4\uc804\ud574 \ubcf4\uc138\uc694!<\/strong><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\uc0ac\uc6a9\ud560 \uae00\uc790 \uc218: \ud50c\ub808\uc774 \uc804\uccb4 \ud654\uba74 \ub2e4\uc2dc\ud558\uae30 \uce74\ub4dc \uadf8\ub300\ub85c \ub2e4\uc2dc\ud558\uae30 \ucc98\uc74c\uc73c\ub85c \uce74\ub4dc \ub4a4\uc9d1\uae30 \ud2c0\ub9b0 \ud69f\uc218: 0 | \uacbd\uacfc \uc2dc\uac04: 00:00 \u25b6 \ud83c\udccf \uc9dd \ub9de\ucd94\uae30 \uac8c\uc784 \uc774\uc6a9 \uc548\ub0b4 \ub3c4\ub4ec\ub3cc \uc9dd \ub9de\ucd94\uae30 \uac8c\uc784\uc740 \uc785\ub825\ud55c \uae00\uc790\ub4e4\uc744 \uc11e\uc5b4\uc11c \uac19\uc740 \uae00\uc790\ub97c \ucc3e\uc544 \uc9dd\uc744 \ub9de\ucd94\ub294 \uc7ac\ubbf8\uc788\ub294 \uae30\uc5b5\ub825 \uac8c\uc784\uc785\ub2c8\ub2e4. \uc774 \ud398\uc774\uc9c0\ub294 \uc544\uc774\ub4e4\uc744 \uc704\ud55c \uc218\uc5c5\uc6a9 \ud65c\ub3d9\uc73c\ub85c \uad6c\uc131\ub418\uc5b4, \ub178\ud2b8\ubd81\uc774\ub098 \ud0dc\ube14\ub9bf\uc5d0\uc11c \ucd5c\uc801\uc758 \ud654\uba74\uc73c\ub85c \uc2e4\ud589\ub429\ub2c8\ub2e4. \uac8c\uc784 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1168,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":[],"categories":[12],"tags":[],"_links":{"self":[{"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/posts\/1164"}],"collection":[{"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/comments?post=1164"}],"version-history":[{"count":0,"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/posts\/1164\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/media\/1168"}],"wp:attachment":[{"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/media?parent=1164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/categories?post=1164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/tags?post=1164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}