{"id":1274,"date":"2025-10-18T04:27:35","date_gmt":"2025-10-17T19:27:35","guid":{"rendered":"https:\/\/dod77.synology.me\/wordpress\/?p=1274"},"modified":"2025-10-28T08:20:17","modified_gmt":"2025-10-27T23:20:17","slug":"%ea%b2%b9%ec%b9%98%eb%8a%94-%ea%b8%80%ec%9e%90-%ec%b0%be%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/dod77.synology.me\/wordpress\/1274\/","title":{"rendered":"\uc9dd\uafcd \ud55c\uc790, \ud55c\uc790\uc5b4 \ucc3e\uae30"},"content":{"rendered":"\n<!-- ===== Overlap Letter\/Word Game | Versus Mode (\ud134\uc81c, \ub77c\uc6b4\ub4dc \uc2dc\uc791 \uc120\ucc29) ===== -->\n<div id=\"quiz-container\">\n  <!-- \uc81c\uc5b4 \ud328\ub110 -->\n  <div class=\"control-panel\">\n    <label>\ud06c\uae30 \uc870\uc808:\n      <!-- \ub354 \ud06c\uac8c \ud0a4\uc6b0\uace0 \uc2f6\uc73c\uba74 max \uac12\uc744 \uc62c\ub9ac\uc138\uc694(\uc608: 3.5) -->\n      <input type=\"range\" id=\"scale-slider\" min=\"0.6\" max=\"3.5\" step=\"0.25\" value=\"1.2\">\n    <\/label>\n    <button class=\"fullscreen-btn\" onclick=\"toggleFullscreen()\">\uc804\uccb4\ud654\uba74<\/button>\n  <\/div>\n\n  <!-- \uc2e4\uc81c \ucf58\ud150\uce20 \uc601\uc5ed -->\n  <div id=\"game-content\">\n    <!-- \uc2dc\uc791 \ud654\uba74 -->\n    <section id=\"ol-start\" class=\"ol-card\">\n      <h2 class=\"ol-title\">\uacb9\uce58\ub294 \uae00\uc790\u00b7\ud55c\uc790\uc5b4 \ucc3e\uae30 (\ub300\uacb0 \ubaa8\ub4dc)<\/h2>\n      <p class=\"ol-desc\">\n        \uc27c\ud45c(,)\ub85c \uad6c\ubd84\ub41c <b>\ud55c\uc790\uc5b4 \ubaa9\ub85d<\/b>\uc744 \uc785\ub825\ud558\uc138\uc694. \uacf5\ubc31\uc740 \uc790\ub3d9 \uc81c\uac70\ub429\ub2c8\ub2e4.<br>\n        \uc27c\ud45c\uac00 \uc5c6\uc73c\uba74 <b>\ub0b1\uae00\uc790 \ubaa8\ub4dc<\/b>\ub85c \ub3d9\uc791\ud569\ub2c8\ub2e4. \uc88c\/\uc6b0 \ud328\ub110\uc5d0\ub294 <b>N\uac1c(3~9)<\/b>\uc529 \ud45c\uc2dc\ub418\uace0,\n        <b>\uc624\uc9c1 1\uac1c\ub9cc \uacb9\uce58\ub3c4\ub85d<\/b> \uad6c\uc131\ub3fc\uc694.<br>\n        \uc815\ub2f5: <b>+1<\/b>, \uc624\ub2f5: <b>-1<\/b>(\ucd5c\uc800 0). \uc624\ub2f5\uc774\uba74 <b>\u201c\uc544\uc26c\uc6cc\uc694. \ub2e4\uc74c\ud300\uc5d0 \uae30\ud68c!\u201d<\/b>\uc640 \ud568\uaed8 \ud134\uc774 \ub118\uc5b4\uac11\ub2c8\ub2e4.\n      <\/p>\n\n      <textarea id=\"ol-input\" class=\"ol-textarea\" placeholder=\"\uc608: \u5927\u97d3\u6c11\u570b, \u97d3\u570b, \u570b\u6c11, \u6c11\u65cf, \u6587\u5316, \u6559\u80b2, \u5b78\u6821, \u5927\u5b78, \u53cb\u60c5, \u52aa\u529b, \u8aa0\u5be6, \u81ea\u7acb\"><\/textarea>\n\n      <div class=\"ol-row\">\n        <label for=\"ol-count\"><b>\ud45c\uc2dc \ud56d\ubaa9 \uc218(N):<\/b><\/label>\n        <input type=\"number\" id=\"ol-count\" class=\"ol-num\" min=\"3\" max=\"9\" value=\"4\">\n        <button id=\"ol-play\" class=\"ol-btn\">\ud50c\ub808\uc774<\/button>\n      <\/div>\n\n      <p id=\"ol-help\" class=\"ol-help\">\n        * N\uc744 \uc120\ud0dd\ud558\uba74 \ucd5c\uc18c \ud544\uc694 \uace0\uc720 \ud56d\ubaa9 \uc218\ub294 <b>2\u00d7N\u22121<\/b>\uc785\ub2c8\ub2e4.\n      <\/p>\n    <\/section>\n\n    <!-- \uac8c\uc784 \ud654\uba74 -->\n    <section id=\"ol-game\" class=\"ol-card ol-hidden\">\n      <div class=\"ol-board\">\n        <div class=\"ol-panel ol-left\">\n          <div class=\"ol-letters\" id=\"ol-leftLetters\"><\/div>\n        <\/div>\n        <div class=\"ol-panel ol-right\">\n          <div class=\"ol-letters\" id=\"ol-rightLetters\"><\/div>\n        <\/div>\n      <\/div>\n\n      <!-- \uc810\uc218\ud310 (\uc591\ucabd \uc544\ub798) -->\n      <div class=\"ol-scores\">\n        <div class=\"ol-score-box ol-score-left\" id=\"ol-scoreBoxL\">\n          <button class=\"score-btn minus\" data-team=\"blue\" aria-label=\"\ud30c\ub780\ud300 \uc810\uc218 \uac10\uc18c\">\u2212<\/button>\n          <div class=\"score-text\">\ud30c\ub780\ud300 \uc810\uc218: <span id=\"ol-scoreL\">0<\/span><\/div>\n          <button class=\"score-btn plus\" data-team=\"blue\" aria-label=\"\ud30c\ub780\ud300 \uc810\uc218 \uc99d\uac00\">\uff0b<\/button>\n        <\/div>\n        <div class=\"ol-score-box ol-score-right\" id=\"ol-scoreBoxR\">\n          <button class=\"score-btn minus\" data-team=\"pink\" aria-label=\"\ubd84\ud64d\ud300 \uc810\uc218 \uac10\uc18c\">\u2212<\/button>\n          <div class=\"score-text\">\ubd84\ud64d\ud300 \uc810\uc218: <span id=\"ol-scoreR\">0<\/span><\/div>\n          <button class=\"score-btn plus\" data-team=\"pink\" aria-label=\"\ubd84\ud64d\ud300 \uc810\uc218 \uc99d\uac00\">\uff0b<\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"ol-info\" id=\"ol-info\"><\/div>\n\n      <div class=\"ol-actions\">\n        <button id=\"ol-next\" class=\"ol-btn\">\ub2e4\uc74c \ub77c\uc6b4\ub4dc<\/button>\n        <button id=\"ol-home\" class=\"ol-btn\">\ucc98\uc74c\uc73c\ub85c<\/button>\n      <\/div>\n    <\/section>\n  <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n  initScaleSlider();\n  initOverlapGame();\n});\n\n\/* ====== \ud06c\uae30 \uc870\uc808 ====== *\/\nfunction initScaleSlider() {\n  const slider = document.getElementById('scale-slider');\n  const gameContent = document.getElementById('game-content');\n  const apply = () => {\n    const v = Math.round(parseFloat(slider.value) * 4) \/ 4; \/\/ 0.25 \ub2e8\uc704 \uc2a4\ub0c5\n    gameContent.style.setProperty('--z', v);\n  };\n  slider.addEventListener('input', apply);\n  apply();\n}\n\n\/* ====== \uc804\uccb4\ud654\uba74 \ud1a0\uae00 ====== *\/\nfunction toggleFullscreen() {\n  const container = document.getElementById('quiz-container');\n  if (!document.fullscreenElement) {\n    container.requestFullscreen().catch(err => alert(err.message));\n  } else {\n    document.exitFullscreen();\n  }\n}\nwindow.toggleFullscreen = toggleFullscreen;\n\n\/* ====== \uacb9\uce58\ub294 \uae00\uc790\u00b7\ud55c\uc790\uc5b4 \uac8c\uc784 \ub85c\uc9c1 (\ub2e8\uc5b4\/\ub0b1\uae00\uc790 \uacb8\uc6a9, \ud134\uc81c \ub300\uacb0, \ub77c\uc6b4\ub4dc \uc2dc\uc791 \uc120\ucc29) ====== *\/\nfunction initOverlapGame() {\n  const $ = id => document.getElementById(id);\n\n  const secStart = $('ol-start');\n  const secGame  = $('ol-game');\n  const input    = $('ol-input');\n  const countEl  = $('ol-count');\n  const playBtn  = $('ol-play');\n  const help     = $('ol-help');\n\n  const leftBox   = $('ol-leftLetters');\n  const rightBox  = $('ol-rightLetters');\n  const infoEl    = $('ol-info');\n  const nextBtn   = $('ol-next');\n  const homeBtn   = $('ol-home');\n\n  const scoreLEl  = $('ol-scoreL');\n  const scoreREl  = $('ol-scoreR');\n  const scoreBoxL = $('ol-scoreBoxL');\n  const scoreBoxR = $('ol-scoreBoxR');\n\n  let N = 4;\n  let baseUnique = [];   \/\/ \uace0\uc720 \ud56d\ubaa9(\ub0b1\uae00\uc790 \ub610\ub294 \ub2e8\uc5b4)\n  let answerItem = '';   \/\/ \uc815\ub2f5 \ud56d\ubaa9\n  let blueScore = 0;\n  let pinkScore = 0;\n  let roundLocked = false;\n\n  \/\/ \ub77c\uc6b4\ub4dc \uc2dc\uc791 \uc2dc \uc120\ucc29 \ud5c8\uc6a9: null\n  let activeTeam = null;\n\n  \/* -------- \uc720\ud2f8 -------- *\/\n  const uniq = arr => Array.from(new Set(arr));\n  const shuffle = arr => { for (let i=arr.length-1;i>0;i--){ const j=Math.floor(Math.random()*(i+1)); [arr[i],arr[j]]=[arr[j],arr[i]]; } return arr; };\n  const escHTML = s => String(s ?? '').replace(\/[&<>\"']\/g, m=>({'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;'}[m]));\n\n  \/\/ N\ubcc4 \ud589 \ubc30\uce58(\ud0c0\uc77c \uac1c\uc218 \uae30\uc900)\n  function rowsFor(n){\n    switch(n){\n      case 3: return [3];\n      case 4: return [2,2];\n      case 5: return [2,3];\n      case 6: return [2,2,2];\n      case 7: return [2,3,2];\n      case 8: return [3,3,2];\n      case 9: return [3,3,3];\n      default: {\n        const r=[]; while(n>3){ const take=Math.min(3,n); r.push(take); n-=take; } if(n) r.push(n); return r;\n      }\n    }\n  }\n\n  \/\/ \uc785\ub825 \ud30c\uc2f1: \uc27c\ud45c\uac00 \uc788\uc73c\uba74 \ub2e8\uc5b4 \ubaa8\ub4dc, \uc5c6\uc73c\uba74 \ub0b1\uae00\uc790 \ubaa8\ub4dc\n  function parseInputToItems(rawText){\n    const cleaned = (rawText || '').replace(\/\\s+\/g,''); \/\/ \uacf5\ubc31 \uc81c\uac70\n    if (cleaned.includes(',')) {\n      return cleaned.split(',')\n        .map(s => s.trim())\n        .filter(s => s.length > 0);\n    }\n    \/\/ \ub0b1\uae00\uc790 \ubaa8\ub4dc(\uae30\uc874 \ud638\ud658)\n    return Array.from(cleaned);\n  }\n\n  \/\/ \ub77c\uc6b4\ub4dc \ub370\uc774\ud130 \ub9cc\ub4e4\uae30(\ud56d\ubaa9 \uae30\uc900, \uc88c\/\uc6b0\uc5d0 N\uac1c, \uacf5\ud1b5 1\uac1c\ub9cc \uacb9\uce58\uac8c)\n  function buildRound(pool, N){\n    if (!Array.isArray(pool) || pool.length < (2*N - 1)) return null;\n    const bag = shuffle([...pool]);\n    const common = bag.shift();\n    if (bag.length < 2*(N-1) || common == null) return null;\n\n    const L = bag.slice(0,    N-1);\n    const R = bag.slice(N-1,  2*(N-1));\n    if (L.length !== N-1 || R.length !== N-1) return null;\n\n    return {\n      left : shuffle([common, ...L]),\n      right: shuffle([common, ...R]),\n      answer: common\n    };\n  }\n\n  \/\/ \ub2e8\uc5b4 \uae38\uc774\uc5d0 \ub530\ub978 \ud3f0\ud2b8 \uc0ac\uc774\uc988 \ud074\ub798\uc2a4 \ubd80\uc5ec\n  function sizeClassByLen(len){\n    if (len <= 2) return 'tile-xl';\n    if (len === 3) return 'tile-l';\n    if (len === 4) return 'tile-m';\n    if (len === 5) return 'tile-s';\n    return 'tile-xs'; \/\/ 6\uc790 \uc774\uc0c1\n  }\n\n  function renderLetters(el, items){\n    const safe = (items || []).filter(x => x != null && String(x).length > 0);\n    const rows = rowsFor(safe.length);\n    let idx = 0;\n    let html = '';\n    rows.forEach(cnt => {\n      const slice = safe.slice(idx, idx + cnt);\n      idx += cnt;\n      const rowHTML = slice.map(word => {\n        const text = String(word);\n        const cls  = sizeClassByLen(text.length);\n        return `<span class=\"ol-cardtile ${cls}\" data-item=\"${escHTML(text)}\" data-len=\"${text.length}\">${escHTML(text)}<\/span>`;\n      }).join('');\n      html += `<div class=\"ol-rowline\">${rowHTML}<\/div>`;\n    });\n    el.innerHTML = html;\n  }\n\n  function attachPanelHandlers(){\n    leftBox.querySelectorAll('.ol-cardtile').forEach(tile => {\n      tile.addEventListener('click', () => handlePick('blue', tile.getAttribute('data-item'), tile));\n    });\n    rightBox.querySelectorAll('.ol-cardtile').forEach(tile => {\n      tile.addEventListener('click', () => handlePick('pink', tile.getAttribute('data-item'), tile));\n    });\n  }\n\n  function updateScores(){\n    scoreLEl.textContent = blueScore;\n    scoreREl.textContent = pinkScore;\n  }\n\n  \/* \uc810\uc218 \uc218\ub3d9 \uc870\uc815(\uc720\uc9c0) *\/\n  function updateManualScore(team, delta) {\n    if (team === 'blue') blueScore = Math.max(0, blueScore + delta);\n    else if (team === 'pink') pinkScore = Math.max(0, pinkScore + delta);\n    updateScores();\n  }\n  document.querySelectorAll('.score-btn').forEach(btn => {\n    btn.addEventListener('click', (e) => {\n      e.stopPropagation();\n      const team = btn.getAttribute('data-team');\n      const delta = btn.classList.contains('plus') ? 1 : -1;\n      updateManualScore(team, delta);\n    });\n  });\n\n  function setTurn(team){\n    activeTeam = team;\n    leftBox.style.pointerEvents  = (team === 'blue') ? 'auto' : 'none';\n    rightBox.style.pointerEvents = (team === 'pink') ? 'auto' : 'none';\n    scoreBoxL.classList.toggle('ol-turn', team === 'blue');\n    scoreBoxR.classList.toggle('ol-turn', team === 'pink');\n    infoEl.textContent = (team === 'blue') ? '\ud30c\ub780\ud300 \ucc28\ub840!' : '\ubd84\ud64d\ud300 \ucc28\ub840!';\n  }\n\n  function handlePick(team, picked, tileEl){\n    if (roundLocked) return;\n\n    \/\/ \uc120\uacf5 \ubbf8\uc815\uc774\uba74 \uccab \ud074\ub9ad \ud300 \ud655\uc815(\ub77c\uc6b4\ub4dc \uc2dc\uc791 \uc120\ucc29)\n    if (activeTeam === null) {\n      setTurn(team);\n    }\n\n    if (team !== activeTeam) return;\n    if (tileEl.classList.contains('ol-correct') || tileEl.classList.contains('ol-wrong')) return;\n\n    const ok = (picked === answerItem);\n\n    if (team === 'blue') blueScore = ok ? blueScore + 1 : Math.max(0, blueScore - 1);\n    else                 pinkScore = ok ? pinkScore + 1 : Math.max(0, pinkScore - 1);\n    updateScores();\n\n    tileEl.classList.add(ok ? 'ol-correct' : 'ol-wrong');\n\n    if (ok) {\n      infoEl.textContent = team === 'blue' ? '\ud30c\ub780\ud300 +1!' : '\ubd84\ud64d\ud300 +1!';\n      leftBox.style.pointerEvents = 'none';\n      rightBox.style.pointerEvents = 'none';\n      roundLocked = true;\n    } else {\n      tileEl.style.pointerEvents = 'none';\n      infoEl.textContent = '\uc544\uc26c\uc6cc\uc694. \ub2e4\uc74c\ud300\uc5d0 \uae30\ud68c!';\n      setTurn(team === 'blue' ? 'pink' : 'blue');\n    }\n  }\n\n  function nextRound(){\n    infoEl.textContent = '';\n    leftBox.innerHTML = rightBox.innerHTML = '';\n    roundLocked = false;\n\n    const round = buildRound(baseUnique, N);\n    if (!round){\n      alert('\ub77c\uc6b4\ub4dc \uc0dd\uc131\uc5d0 \uc2e4\ud328\ud588\uc5b4\uc694. \uc785\ub825\uc744 \ubc14\uafd4\ubcf4\uc138\uc694.');\n      goHome();\n      return;\n    }\n    answerItem = round.answer;\n    renderLetters(leftBox, round.left);\n    renderLetters(rightBox, round.right);\n    attachPanelHandlers();\n\n    \/\/ \ub77c\uc6b4\ub4dc \uc2dc\uc791: \uc544\ubb34 \ud300\uc774\ub098 \uba3c\uc800!\n    activeTeam = null;\n    leftBox.style.pointerEvents  = 'auto';\n    rightBox.style.pointerEvents = 'auto';\n    scoreBoxL.classList.remove('ol-turn');\n    scoreBoxR.classList.remove('ol-turn');\n    infoEl.textContent = '\uc544\ubb34 \ud300\uc774\ub098 \uba3c\uc800!';\n  }\n\n  function startGame(){\n    const raw   = input.value || '';\n    const items = parseInputToItems(raw);\n    baseUnique  = uniq(items);\n\n    N = Math.max(3, Math.min(9, Number(countEl.value)||4));\n    const need = 2*N - 1;\n    if (baseUnique.length < need){\n      alert(`\uace0\uc720 \ud56d\ubaa9\uc774 \ubd80\uc871\ud569\ub2c8\ub2e4.\\nN=${N}\uc774\uba74 \ucd5c\uc18c ${need}\uac1c \uc774\uc0c1\uc758 \uc11c\ub85c \ub2e4\ub978 \ud56d\ubaa9\uc774 \ud544\uc694\ud574\uc694.\\n(\ud604\uc7ac ${baseUnique.length}\uac1c)`);\n      return;\n    }\n\n    secStart.classList.add('ol-hidden');\n    secGame.classList.remove('ol-hidden');\n    nextRound();\n  }\n\n  function goHome(){\n    \/\/ \ucc98\uc74c\uc73c\ub85c: \uac8c\uc784 \ud654\uba74 \uc228\uae30\uace0, \uc810\uc218\/\uc0c1\ud0dc \ucd08\uae30\ud654\n    secGame.classList.add('ol-hidden');\n    secStart.classList.remove('ol-hidden');\n    infoEl.textContent = '';\n\n    blueScore = 0; pinkScore = 0; updateScores();\n\n    activeTeam = null;\n    roundLocked = false;\n    leftBox.innerHTML = rightBox.innerHTML = '';\n    scoreBoxL.classList.remove('ol-turn');\n    scoreBoxR.classList.remove('ol-turn');\n  }\n\n  \/\/ \uc774\ubca4\ud2b8\n  playBtn.addEventListener('click', startGame);\n  nextBtn.addEventListener('click', nextRound);\n  homeBtn.addEventListener('click', goHome);\n  countEl.addEventListener('input', () => {\n    const n = Math.max(3, Math.min(9, Number(countEl.value)||4));\n    const need = 2*n - 1;\n    help.innerHTML = `* N\uc744 \uc120\ud0dd\ud558\uba74 \ucd5c\uc18c \ud544\uc694 \uace0\uc720 \ud56d\ubaa9 \uc218\ub294 <b>2\u00d7${n}\u22121 = ${need}<\/b> \uc785\ub2c8\ub2e4.`;\n  });\n}\n<\/script>\n\n<style>\n* { box-sizing: border-box; }\n\n\/* === \ucee8\ud14c\uc774\ub108 & \uc81c\uc5b4 \ud328\ub110 === *\/\n#quiz-container {\n  max-width: 1100px;\n  margin: 24px auto;\n  padding: 16px;\n  background: #fff8dc;\n  border: 2px solid #000;\n  border-radius: 10px;\n}\n.control-panel {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 12px;\n  font-size: 1em;\n}\n#scale-slider { width: 220px; }\n.fullscreen-btn {\n  padding: 6px 12px; font-size: 1em;\n  background-color: #eee; border: 1px solid #000; border-radius: 6px; cursor: pointer;\n}\n.fullscreen-btn:hover { background-color: #ddd; }\n\n\/* === \ucf58\ud150\uce20 \ub8e8\ud2b8: \uae00\uc790 \uc2a4\ucf00\uc77c \ubcc0\uc218\ub9cc \ubcf4\uad00 === *\/\n#game-content { --z: 1.2; }\n\n\/* === \uac8c\uc784 UI === *\/\n.ol-card  { background: transparent; }\n.ol-hidden{ display: none !important; }\n\n.ol-title { margin: 0 0 6px; font-size: 22px; }\n.ol-desc  { margin: 6px 0 12px; font-size: 14px; }\n\n.ol-textarea{\n  width: 100%; min-height: 100px; padding: 12px;\n  border: 2px solid #000; border-radius: 10px; font-size: 16px; resize: vertical; background: #fff;\n}\n.ol-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }\n.ol-num {\n  width: 72px; padding: 8px; font-size: 16px; border: 2px solid #000; border-radius: 8px; background: #fff;\n}\n.ol-btn {\n  padding: 10px 16px; border: 2px solid #000; border-radius: 10px;\n  background: #add8e6; color: #000; font-weight: 700; cursor: pointer;\n}\n.ol-btn:hover { background: #87cefa; }\n.ol-help { font-size: 13px; margin-top: 8px; color: #555; }\n\n\/* === \ubcf4\ub4dc(\ud328\ub110 2\uac1c) === *\/\n.ol-board {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 12px;\n  height: calc(100vh - 250px); \/* \uc810\uc218\/\ubc84\ud2bc \uc5ec\uc720 *\/\n}\n@media (max-width: 679px) { .ol-board { grid-template-columns: 1fr; } }\n\n.ol-panel {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 2px solid #000;\n  border-radius: 12px;\n  padding: 12px;\n  font-weight: 800;\n  height: 100%;\n  overflow: auto;\n  background-clip: padding-box;\n}\n.ol-left  { background: #cfe8ff; }\n.ol-right { background: #ffd9e0; }\n\n\/* ===== \ud0c0\uc77c \ucee8\ud14c\uc774\ub108 ===== *\/\n.ol-letters{\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n  font-size: calc(46px * var(--z));\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.45em;             \/* \ud589 \uac04\uaca9 *\/\n}\n.ol-rowline{\n  display: flex;\n  gap: 0.45em;             \/* \ud0c0\uc77c \uac04 \uac04\uaca9 *\/\n  justify-content: center;\n  flex-wrap: wrap;\n}\n\n\/* ===== \ud0c0\uc77c(\uac00\ubcc0\ud3ed, \uae38\uc774\ubcc4 \ud3f0\ud2b8 \ub2e8\uacc4) ===== *\/\n.ol-cardtile{\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  padding: 0.28em 0.52em;            \/* \ub2e8\uc5b4 \uae38\uc774\uc5d0 \ub530\ub77c \ud3ed\uc774 \ub298\uc5b4\ub098\ub294 \uac00\ubcc0\ud3ed *\/\n  min-width: 2.0em;                  \/* \ub108\ubb34 \uc881\uc9c0 \uc54a\uac8c \ucd5c\uc18c\ud3ed *\/\n  height: 2.1em;\n\n  border-radius: 0.36em;\n  background: #fff;\n  border: 0.12em solid #000;\n\n  line-height: 1.05;\n  font-size: 1em;\n  font-weight: 800;\n  transform: translateY(-0.03em);\n  transition: transform .05s ease, box-shadow .05s ease;\n  white-space: nowrap;               \/* \ud55c \uc904 \uc720\uc9c0 *\/\n}\n\n\/* \uae38\uc774\uc5d0 \ub530\ub978 \ud3f0\ud2b8 \ub2e8\uacc4 (JS\uac00 \ubd80\uc5ec) *\/\n.tile-xl { font-size: 1em;   }   \/* 1~2\uc790 *\/\n.tile-l  { font-size: 0.92em;}   \/* 3\uc790 *\/\n.tile-m  { font-size: 0.86em;}   \/* 4\uc790 *\/\n.tile-s  { font-size: 0.8em; }   \/* 5\uc790 *\/\n.tile-xs { font-size: 0.72em;}   \/* 6\uc790 \uc774\uc0c1 *\/\n\n.ol-cardtile:hover{\n  transform: translateY(-0.03em) scale(1.03);\n  box-shadow: 0 0 0.15em rgba(0,0,0,.15);\n}\n\n\/* \uc120\ud0dd \ud53c\ub4dc\ubc31 *\/\n.ol-correct{\n  outline: 0.2em solid #2e7d32;\n  box-shadow: 0 0 0.3em rgba(46,125,50,.5);\n}\n.ol-wrong{\n  outline: 0.2em solid #c62828;\n  box-shadow: 0 0 0.3em rgba(198,40,40,.5);\n}\n\n\/* ===== \uc810\uc218\ud310 & \uc548\ub0b4 & \uc561\uc158 ===== *\/\n.ol-scores{\n  margin-top: 10px;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 12px;\n}\n.ol-score-box{\n  border: 2px dashed #000;\n  border-radius: 10px;\n  padding: 8px 10px;\n  text-align: center;\n  font-weight: 800;\n  background: #fff;\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between; \/* \uc591\ub05d \uc815\ub82c *\/\n  gap: 8px;\n}\n.ol-score-left { background: #e8f3ff; }\n.ol-score-right{ background: #ffe8ef; }\n.score-text { flex: 1; text-align: center; }\n\n\/* \ucc28\ub840 \ud558\uc774\ub77c\uc774\ud2b8 *\/\n.ol-turn{ outline: 3px solid #000; }\n\n.ol-info{ margin-top: 8px; text-align: center; min-height: 24px; font-weight: 700; }\n\n.ol-actions{ margin-top: 10px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }\n\n\/* \uc810\uc218 \uc218\ub3d9 \uc870\uc815 \ubc84\ud2bc *\/\n.score-btn {\n  background: #fff;\n  border: 2px solid #000;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 800;\n  width: 28px;\n  height: 28px;\n  cursor: pointer;\n  line-height: 1;\n  transition: transform .06s ease, background .1s ease;\n  user-select: none;\n}\n.score-btn:hover { background: #f0f0f0; transform: translateY(-1px); }\n.score-btn:active { transform: translateY(0); }\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>\ud06c\uae30 \uc870\uc808: \uc804\uccb4\ud654\uba74 \uacb9\uce58\ub294 \uae00\uc790\u00b7\ud55c\uc790\uc5b4 \ucc3e\uae30 (\ub300\uacb0 \ubaa8\ub4dc) \uc27c\ud45c(,)\ub85c \uad6c\ubd84\ub41c \ud55c\uc790\uc5b4 \ubaa9\ub85d\uc744 \uc785\ub825\ud558\uc138\uc694. \uacf5\ubc31\uc740 \uc790\ub3d9 \uc81c\uac70\ub429\ub2c8\ub2e4. \uc27c\ud45c\uac00 \uc5c6\uc73c\uba74 \ub0b1\uae00\uc790 \ubaa8\ub4dc\ub85c \ub3d9\uc791\ud569\ub2c8\ub2e4. \uc88c\/\uc6b0 \ud328\ub110\uc5d0\ub294 N\uac1c(3~9)\uc529 \ud45c\uc2dc\ub418\uace0, \uc624\uc9c1 1\uac1c\ub9cc \uacb9\uce58\ub3c4\ub85d \uad6c\uc131\ub3fc\uc694. \uc815\ub2f5: +1, \uc624\ub2f5: -1(\ucd5c\uc800 0). \uc624\ub2f5\uc774\uba74 \u201c\uc544\uc26c\uc6cc\uc694. \ub2e4\uc74c\ud300\uc5d0 \uae30\ud68c!\u201d\uc640 \ud568\uaed8 \ud134\uc774 \ub118\uc5b4\uac11\ub2c8\ub2e4. \ud45c\uc2dc \ud56d\ubaa9 \uc218(N): \ud50c\ub808\uc774 * N\uc744 \uc120\ud0dd\ud558\uba74 \ucd5c\uc18c \ud544\uc694 \uace0\uc720 \ud56d\ubaa9 \uc218\ub294 2\u00d7N\u22121\uc785\ub2c8\ub2e4. \u2212 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[],"_links":{"self":[{"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/posts\/1274"}],"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=1274"}],"version-history":[{"count":0,"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/posts\/1274\/revisions"}],"wp:attachment":[{"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/media?parent=1274"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/categories?post=1274"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/tags?post=1274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}